Products
The product page puts media on the left and product information on the right, in a panel that stays with the shopper as they scroll the photography.
Choosing a product template
Atelier ships four product templates. Assign one per product in the Shopify admin, under Theme template on the product page.
| Template | Layout | Suits |
|---|---|---|
product | Media stacked on the left, information sticky on the right | Most products |
product.gallery | Media in a two column grid, narrow information column | Photography-led pieces with many images |
product.editorial | First image full width, information on the left, then a story section and a styled look | A campaign piece that deserves a page of its own |
product.minimal | Media in a carousel, a short information column | Simple products that need no explaining |
You can also create your own. In the theme editor, open the template picker at the top of the screen and choose Create template. Every layout choice below is a setting on the Product information section, so a new template can combine them however you like.
| Setting | Options |
|---|---|
| Media layout on desktop | Use theme setting, stacked, two column grid, carousel, first image full width |
| Media position on desktop | Left, right |
| Product information width | Narrow, standard, wide |
| Keep product information visible while scrolling | Use theme setting, yes, no |
Anything left on Use theme setting follows Theme settings > Product page, so setting it once still works for a store that wants one look everywhere.
Product information blocks
Every element of the information panel is a block. Add, remove, and reorder them to suit your catalog.
| Block | Notes |
|---|---|
| Vendor | Can link to all products by that vendor |
| Heading | The product title, at three sizes |
| Price | Includes compare-at price, unit price, and tax messaging |
| Shop Pay Installments | Appears when your store is eligible |
| Variant picker | Swatches, buttons, or a dropdown |
| Buy buttons | Quantity, add to cart, and accelerated checkout |
| Availability | In stock, backorder, or out of stock |
| Pickup availability | Shows your nearest store and its collection time |
| SKU | The selected variant's SKU |
| Description | Your product description |
| Text | A short fixed note, the same on every product |
| Icon row | Up to three lines with an icon, for delivery and returns |
| Collapsible row | Details, materials, care. Can read from a page or a metafield |
| Size guide | Opens a dialog. See below |
| Share | Uses the visitor's own share sheet, or copies the link |
| Custom Liquid | For app snippets and custom code |
| App blocks | Reviews, subscriptions, and anything else you have installed |
Media
All product images are shown. Choose the desktop layout in Theme settings > Product page:
- Stacked shows every image in one column.
- Two column grid puts the first image full width and pairs the rest.
- Carousel shows one image at a time with thumbnails.
Videos, YouTube and Vimeo links, and 3D models are all supported and appear in the same gallery.
Variant images. Assign an image to a variant in the Shopify admin and the gallery moves to that image when a shopper selects the variant.
Mixed image shapes do not break the layout. Each image sits in a frame that absorbs the difference.
Variants and swatches
Set Style on the variant picker block:
- Choose automatically uses swatches for options that have them and buttons for the rest.
- Buttons and Dropdown force one style everywhere.
Swatches come from Shopify. Set them up in Settings > Products > Swatches in your admin, where you can give each option value a color or an image.
Combinations that do not exist are marked as unavailable but stay selectable, so a shopper can always reach a variant that exists. Choose how they are marked in Theme settings > Product page > Unavailable variants.
Size guide
The size guide is part of the theme. No app is needed.
- Add a Size guide block to the product information panel.
- Write your measurements in Body text, or point Content from page at a page containing a table.
- Add an image if a diagram helps.
The size guide opens in a dialog that can be closed with the Escape key.
Product cards
Card settings live in Theme settings > Product cards and apply everywhere a product appears.
- Image shape. Adapt to image, portrait, square, or landscape.
- Show color swatches. Set Swatch option name to match your option name exactly, usually
Color. Swatches on a card are an indicator, not a control: making them clickable would add several keyboard stops to every product in a grid. - Show quick add. On a desktop this appears when a shopper hovers over the card. On a phone it is a small button in the corner of the image, so it never covers the photography.
Quick add adds single-variant products straight to the cart. Anything that needs a choice opens a small dialog with the real variant picker in it.
Recommendations
Two recommendation sections are included on the product template:
- Complete the look shows the complementary products you pair in the Shopify Search & Discovery app.
- You may also like shows related products chosen by Shopify.
Both load as the shopper approaches them, and remove themselves if there is nothing to show.