Your shop page
The shop page is where customers browse what you sell. It is the main window of your store.
Unlike the other shop pages, this is a normal page — not a template. Your homepage can be your shop page, or any page under CMS › Pages.
First time here? Read How shop pages work first — it covers the header and footer step that applies to all shop pages.
Adding your products
Drag the Products element onto the page. It fetches your catalogue and displays it.
By default each product card shows the main image and the product name. Everything else you add yourself.
Adding more detail to each card
Extra details go on with the Text element, set to pull its content automatically.
Drag a Text element onto a product card, then in the first dropdown choose Auto and in the second choose the value you want:
| To show | Choose this value |
|---|---|
| Price | Default Displayed Price Formatted |
| The old, crossed-out price | Compared To Price Formatted |
| Discount percentage | Compared to Price Discount Percentage Formatted |
| A short description | SEO Description |
For the old price, also click the strikethrough icon so it appears crossed out. Without it customers see two prices and no indication which is which.
The discount percentage works itself out from the price and the compare-to price. You do not type it, and it stays correct when you change either.
The short description comes from the SEO description field, set under the SEO tab of each product.
Linking cards to product pages
A card that cannot be clicked is a dead end.
Link each product to its own page using the Product URL dynamic link. One setting covers every product, now and in future.
Showing categories
To let customers browse by category, drag the Categories element onto the page.
Link each one to its category page using the Category URL dynamic link, the same way you linked the products.
See Category pages.
Worth knowing
Keep the cards short. The shop page exists to make people click into a product, not to tell them everything. Image, name, price, and a discount if there is one.
Check it on a phone. Most shopping happens there. See Mobile & tablet.