How to show products on your pages

Your TeleportHQ store has a products page and a product details page of its own, but you can show products anywhere, for example a "Best sellers" grid on your home page. Open Elements → E-Commerce and add List Products or Grid Products to the page, then adjust it in the Products List Settings panel on the right. To show one product, use Details Product. To change how the store's own products page looks (filters, grid or list view, pagination), open E-Commerce Settings → Products Listing → Customize.

Before you start#

• The store must be on, with at least one Active product. See How to add a product.
• If the E-Commerce group in Elements says E-Commerce Required, click Enable E-Commerce. See How to add a store to an existing project.

Show a list or grid of products#

1. Open the page, for example your home page.
2. On the canvas, select the container that should hold the products. If nothing is selected, TeleportHQ adds the element at the end of the page.
3. In the left sidebar, click Elements.
4. On the Primitives tab, scroll to the E-Commerce group.
5. Click Grid Products (or List Products), or drag the card onto the page.

6. The message "Products grid added successfully" (or "Products list added successfully") appears, and the new list is selected. The right panel shows its settings under Array Mapper Settings.
7. Adjust the options you need (see below).

8. Style the product cards like any other element.

List settings#

• Source: the store's products. Refresh loads the latest products in the editor, and Manage Data opens the products table.
• Start and End: show only part of the list when it isn't paginated. Counting starts at 0, and End is where the list stops, so Start 0 and End 4 show the first four products. Leave End empty to show the rest of the list.
• Paginated and Items/page: split a long list into pages, for example 12 products per page. Preview Page chooses which page you see in the editor. See How to split a long list into pages.
• Enable search: adds a search field to the list. Search works in Preview and on the published site, not on the editing canvas.
• Search debounce: how long, in milliseconds, to wait after the visitor stops typing before searching.
• Sort by and Sort direction: the order of the products, for example by price.
• Caching: Cache results serves the list from a cache instead of asking the database on every page, search or sort.

A list of products has no Currency Display setting in the right panel. A single product (Details Product, below) has one.

Show a single product#

1. In Elements → E-Commerce, click or drag Details Product onto the page.
2. With it selected, in the right panel under Product Settings, open Product and choose a product, for example Rye Sourdough Loaf.
3. Set Currency Display if needed.

Preview the product details page with a real product#

The product details page shows whichever product the shopper opened. In the TeleportHQ editor, you choose which product to preview:

1. Open the product details page from the e-commerce folder in the Pages list (it's in the products folder inside it).
2. At the top left of the canvas, click the product drop-down ("Select a product").
3. Search for a product in Search products... and click it. The page shows that product's name, price, photos and details.
4. Optional: if the product has variants, a small switch over the page's variant picker lists every value, for example Small, Medium and Large. Click one to see the page with that variant picked, for example its price. It changes the canvas preview only ("Preview on the canvas only: the page with a variant picked."): shoppers still start on the product's default variant.

The list only shows the products that open on that page. Products that have a page of their own are previewed on their own page. See How to give a product its own page and design.

Tip: double-click a product's name, price or description on the canvas to open that product's form at that field.

Change the store's products page#

The products page your TeleportHQ store built for you has its own settings for filters, layout and pagination. You don't have to edit the page by hand:

1. In the left sidebar, click E-commerce. At the top right of the E-Commerce panel, click the gear (tooltip E-Commerce Settings).
2. In E-Commerce Setup, find Products Listing ("Filters, layout, grid or list view and pagination of the products page.") and click Customize. View on Canvas at the top of the Products Listing panel, left of its x, shows the products page on the canvas with the settings still open; it is greyed out while the canvas already shows the products page.
3. Change what you need. Changes apply to the products page right away:
   • Layout: Product views (Grid of cards and/or List of rows). With both views on, Default view (Grid or List) is where shoppers land. With the grid on, Card layout picks how the cards are arranged: Grid, Spotlight (the first card twice as large), Bento, Editorial or Masonry, plus how they're coloured: As designed, Featured (the cards the layout sets apart, framed in your brand colour) or Colourful.
   • Toolbar: Search, Sort and Category tabs ("A tab per top category, with the one on show highlighted.").
   • Filters: first where the filters sit, Top bar or Left sidebar; then switch on the filters shoppers can use: Categories, Price range, Rating (needs reviews on), Discounts, Brand, Condition and your variant options such as size. Drag a filter to change its order.
   • Pagination: Products per page and Mode: Numbers, Previous / Next, Load more or Infinite, with a line under the buttons that says what the chosen mode does.

These settings are kept when you regenerate the store pages. If your products page is one TeleportHQ turned into a store page from your own design, Card layout says "This is your own page: its cards keep the layout you gave them."

Other store elements#

The TeleportHQ E-Commerce elements group also has:

• Category Menu, Category Mega Menu and Category Filter: let shoppers browse by category. See How to organize products into categories.
• Cart Button: the cart icon with a live item count; it opens the cart. Add it to a custom header, for example.

Check that it worked#

The element shows your real products on the canvas. After you publish, the page shows the same products, and Add to Cart buttons work.

Troubleshooting#

The list is empty on the canvas Your store has no Active products yet, or the list hasn't loaded. Add a product, then click Refresh in Products List Settings.

The product drop-down says "No products yet" Create your first product. The drop-down then lets you preview it on the page.

The product drop-down says "No products on this page yet" Every product opens on a page of its own, or you're on a custom product page that has no products yet. On a custom page, click Choose products for this page.

Search doesn't work in the editor Enable search works only on the published site. Publish, then test it there.

The Products Listing panel says "This store has no products page yet." The products page was deleted. Regenerate the store pages. See How to regenerate store pages or turn off e-commerce.

Good to know#

• Products are live data. Lists read products from your store's database, so new products show up without redesigning the page.
• The first products come with the page. The products page and your product lists show their first products at once, and search engines can read them. With Load more or Infinite, the products already shown stay on screen while the next ones load. A store published before this change gets it at its next publish.
• Cart and favourites pages look empty in the editor. Use the Cart and Favourites simulators in the canvas toolbar to fill them with sample products while you design. See What shoppers see: cart, favorites and checkout.