Moving StoresChecked against the product on
The product page in Gallery and Studio
In the Gallery and Studio designs the product page is built around its pictures: on wide screens every picture shows full width, one under another, with the details in a column beside them and the price in the Add button.
On this page
Before you start
- A store whose business type is Shop, in the Gallery or Studio design. To change the design, see choose a design or start from a template.
In the first five designs the product page shows, on wide screens, one large picture with a rail of thumbnails beside it, and the details below. Gallery and Studio, drawn for creative brands, build the page around your pictures instead. There is nothing to switch on: the page follows the design, and goes back to its usual layout if you apply another design.
What changes on the page
- From 1024 pixels wide, every picture of the product shows full width, one under another, with no thumbnail rail. Each picture still zooms as the pointer moves over it, and opens in a full-screen viewer when clicked.
- On narrower screens the pictures stay a strip the shopper swipes, as in every design.
- On wide screens the buy column stays in view beside the pictures as you scroll them: the name, price, options and Add button, then Description and Details as sections that fold open and shut, with the description open to start.
- The Add button carries the price: Add to bag followed by the price of the chosen option for the chosen quantity.
- Choosing an option that has its own picture, such as a colour or a glaze, scrolls the page to that picture.
Why your photographs matter more here
In these two designs your photographs are the page: every picture you add to a product shows full width, in the product’s order, so a shopper notices any change of light or background from one to the next. Each picture sits in the Product image shape frame, upright (4:5) in Gallery and square in Studio, and a picture that doesn’t match the frame is cropped to fill it.
- Shoot your pieces on one background, in the same light.
- Crop the pictures to the design’s shape before you upload them: square for Studio, upright (4:5) for Gallery.
- Order a product’s pictures the way you want shoppers to see them, top to bottom.
- If a colour or a glaze has its own picture, pick it for that variant in the variants table, so the page reaches it when a shopper chooses it.
Preview the page before you apply it
Step 1: Open Online store › Designs.
Step 2: Click Preview on the Gallery or Studio card.
Step 3: Choose Product under Page, and Desktop under Screen size.
You see the pictures one under another with the buy column beside them, in sample content that sends nothing.
Does my restaurant’s dish page change?
No. A restaurant’s dish page keeps its own layout in every design; the editorial page is for shops only.
Can I use this page with another design?
No, it is part of Gallery and Studio. Changing their colours, fonts and corners in Branding doesn’t change it, though.
Why does the price on the button differ from the product’s price?
Because the button shows the price of the option the shopper chose, multiplied by the quantity they chose.