The product page

The product page shows one product in full — images, price, options, delivery — everything a customer needs to decide. It is where the sale happens.

You design it once, as a template. Every product you ever add uses it.

First time here? Read How shop pages work first — it covers the header and footer step.

Opening the template

Go to CMS › Project Settings › Shop › Templates and click the Edit icon next to Product Template.

Building it

Add the Product element

Drag the Product element onto the template. This is the piece that displays the product.

Set Product to Auto

Next to Product in the element, select Auto.

This is the setting that makes the template work for every product rather than showing one product forever. Miss it and all your product pages show the same item.

Choose what to show

Open the Display tab of the Product element and tick the details you want on the page.

Adjusting the images

To change	Do this
Main image width	Click the image, select the cog icon, drag the percentage slider
Gallery alignment	Select the main image, then the alignment icon — left, centre or right
Thumbnails	Click any thumbnail, then the thumbnail icon — style, aspect ratio and more

Styling the details

Every detail inside the Product element can be styled on its own. Click any of them and use the toolbar that appears to set typography, colour and spacing.

To show related products at the bottom of the page, enable the option on the individual product, under its Related Products tab.

Note this is set per product, not on the template — so it is switched on for the products you want it on.

Worth knowing

Test with a real product, not a sample. Sample products have tidy names and full galleries; your own may have a long name or a single photograph, and that is when layout problems show.

Check every product type you sell. A page that looks right for a T-shirt with six options may not for a digital download with none.