How to give a product its own page and design

Every product in a TeleportHQ store opens on the store's standard product page. To show some products differently, for example made-to-order cakes with their own story, create a custom product page: open E-Commerce Settings → Product pages → Manage, click Create product page, name it, choose its products and click Create page. The page opens on the canvas, where you design it like any page, and its products open at its own address, such as /made-to-order/celebration-cake.

Before you start#

• The store needs its standard product page. If it was deleted, the Product pages panel says "Your standard product page is missing…": click Recreate store pages first. See How to regenerate store pages or turn off e-commerce.
• A custom product page is a page of your project, so it counts toward the project's page limit (200 pages on the trial).
• You need a role that can create pages.

Steps#

1. Open the product pages#

1. In the editor's left sidebar (the icon column), click E-commerce (the card icon). If you don't see it, click Plugins, then E-commerce, then Open next to E-commerce panel. The E-Commerce panel opens.
2. At the top right of the panel, click the gear (tooltip E-Commerce Settings). E-Commerce Setup opens beside the panel.
3. Find Product pages ("Give some products a page of their own, with its own address and design.") and click Manage.

4. The Product pages panel lists your store's product pages. The first card is the Standard product page (badge Standard), with its address and the products that open on it.

2. Create the page#

1. At the top right of the Product pages panel, click + (tooltip Create product page). If you have no custom page yet, you can also click Create product page under "No custom product pages yet".
2. In Page name, type a name, for example Made to order. The line under it shows the address: "Products on this page open at /made-to-order/…".
3. Under Products that open on it (optional), tick the products, for example Celebration Cake. A product that's already on another custom page says so ("on …").
4. Click Create page. The page is added to the products folder inside e-commerce in your Pages list, and opens on the canvas with the first product you ticked.

3. Design the page#

The new page starts with the standard product layout: gallery, price, options and Add to cart. Change it on the canvas like any other page: add sections, move the product details, change colors and text.

To preview the page with another of its products, use the product drop-down at the top left of the canvas. It lists only the products that open on that page. See How to show products on your pages.

4. Choose which products open on the page#

You can move products onto the page in two places:

• From the Product pages panel: on the page's card, click Products…, tick the products that open on it, and click Save. Unticked products go back to the standard product page.
• From the product: open the product, scroll to More ways to sell it and click Product page ("Where shoppers see it: the standard product page, or a page of its own with its own design."). In the Product page column, choose the page. The line "The product moves to “Made to order” when you save it." appears. Click Save Changes.

In the Product page column:

1. Each choice shows the page's name, the address the product gets there, and how many products open on it. Open shows that page on the canvas.
2. Create a custom product page creates a page from the product's form: type the Page name and click Create and choose it. The new page is chosen for the product; click Save Changes to keep it.

Check that it worked#

• In the Products list, the product's card shows a badge with the page's name, for example Made to order.
• The page's card in the Product pages panel lists its products, for example "1 product: Celebration Cake".
• After you publish, the product opens at the page's address, and product lists link there. A shopper who opens the product's old address on another product page is sent to its own page.

Manage a custom product page#

Each custom page's card in the TeleportHQ Product pages panel has these buttons:

• Open: shows the page on the canvas.
• Products…: chooses the products that open on it.
• Change address: opens the page's settings in the Pages panel, where you change its URL. See How to change a page's URL.
• Rename: changes the page's name. Type the new name and click Save.
• Delete (the trash button): asks Delete “Made to order”? and says what happens to its products. They go back to the standard product page, and their addresses on the deleted page stop working. Click Delete page to confirm, or Cancel.

Troubleshooting#

The Product pages panel and the Product page column show a warning under a page when something keeps it from working:

"The product block was removed from this page, so it doesn't show the product." The part of the page that shows the product was deleted. Click Undo above the canvas, or delete the page and create it again.

"Marked "Do not export": on your published site its products open on the standard product page." The page is excluded from your published site. Open the page's menu in the Pages list and click Include in Code Generation. See How to keep a page out of your published site.

"Only signed-in shoppers can open this page." The page is protected by sign-in, so other shoppers can't see its products. Remove the protection in the page's settings if that's not what you want.

"This page has no product address, so no product can open on it." The page has no URL, or its address no longer ends with the product. Click Change address and set the page's URL again in its settings.

"Created twice at the same time by two people: products open on the other copy. Delete this one." Two people created the same page at once. Delete the copy that shows this warning.

"You reached the maximum number of pages allowed in a project." The project has as many pages as your plan allows. Delete a page you don't use, or see What's the difference between Trial, Pro and Premium?.

Good to know#

• One page per product. A product opens on one page at a time: the standard one or one custom page.
• Addresses. The page name becomes the start of the address. Names that are reserved on the published site (api, admin, static, _next) get -page added, for example /admin-page/….
• Product options. If a product on a custom page has options, that page needs a place for them too. See How to let shoppers personalize a product (product options).
• Google Shopping. A product on a custom page is listed with that page's address. See How to list products on Google Shopping.
• AI Assistant. You can ask the AI Assistant to create a product page and move products onto it, for example "Give the celebration cakes their own page called Made to order".