How shop pages work
Your shop has four pages customers see. Three of them are templates — you design each once, and every product or category uses it.
| Page | What it shows | Built once? |
|---|---|---|
| Your shop page | Everything you sell, to browse | A normal page |
| The product page | One product in detail | Template |
| Category pages | Products in one category | Template |
| Cart & checkout | The basket and paying | Template |
Design the product template once and every product you ever add arrives already laid out. Add a hundred products and you build no pages at all.
Where the templates live
CMS › Project Settings › Shop › Templates, then click the Edit icon next to the one you want.
You can also reach them from CMS › Products › Templates.
The step everyone forgets
Shop templates do not pick up your global header and footer automatically.
If you skip this, your shop pages appear without your navigation and footer, looking like they belong to a different website. It is the single most common complaint about shop pages, and it is one setting.
Open your global header
Edit the global block you use as your header.
Add a display condition
Add a display condition covering your shop templates.
Do the same for the footer
Repeat on your global footer.
Do this once, before building any of the four pages, and all of them inherit it.
See Global blocks and Headers & footers.
Which order to build them
- Header and footer condition — above. Do it first.
- Your shop page — the one customers land on
- The product page — where they decide to buy
- Cart & checkout — where they pay
- Category pages — useful once you have enough products to need grouping
Steps 2 to 4 are the path a customer walks. Build them in that order and you can test the whole journey as you go.