# The product page

Chapter 6 of the Atelier user guide.

The **Product** section holds the gallery on the left and the buy box on the right. From 990px the buy box stays in view under the header while the gallery scrolls; on phones the gallery becomes a swipe strip above the buy box.

## The gallery

| Setting | Default | What it does |
| --- | --- | --- |
| Show breadcrumbs | On | Off shows a single "back" link to the collection instead |
| Gallery layout | Captioned grid | **Captioned grid**: every image in a stone well with its caption under it, in a gallery rhythm of wide and paired images. **Stacked**: one image after another. **One image and thumbnails**: a main image with thumbnails under it. |
| Show captions | On | Captions come from each image's alt text: the first sentence is set in bold, the rest muted, like a wall label ("Arc lounge chair. Natural oak and bouclé ivory, shown in the Fitzroy studio."). Captioned grid and Stacked only. |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |

Videos and 3D models play in the gallery like images.

## Buy box blocks

The buy box is built from blocks; drag them into any order. The presets use this order:

| Block | What it shows | Settings |
| --- | --- | --- |
| **Designer** | "Maren Holt · Arc collection" above the title, linked to the designer's page or collection (chapter 7) | **Collection name** (shown when the product has no `custom.collection_name`), **Show the vendor when there is no designer** (on) |
| **Title** | The product title | None |
| **Product vendor** | The vendor, linked to its products | None |
| **Product metadata** | The product type, vendor and SKU in a muted line ("Lounge chairs / Lintel / AR-01") | **Show vendor in metadata** (off) |
| **Price** | The price, compare-at price and unit price | **Show Shop Pay Installments** (on; when enabled on your store), **Show tax note** (off) |
| **Description** | An excerpt or the full description | **Show**: **Excerpt** (the `custom.short_description` metafield, or the first 220 characters of the description) or **Full description** |
| **Variant picker** | The options, as material chips, swatches, pills or a list | **Show the material close-up** (on), **Show the free sample action** (on), **Family tabs from** (8, 4 to 20). See below and chapter 8. |
| **Inventory** | "Only 3 left" | **Low stock threshold** (10, 1 to 40), **Show every stock state** (off: only low stock shows here, because the Delivery block already says in stock or made to order) |
| **Delivery** | The lead-time status, the delivery timeline and the delivery note | Chapter 11 |
| **Buy buttons** | Quantity, Add to cart, accelerated checkout, sample and quote links | See below |
| **Assurance** | Three short rows with icons | **Row 1 to 3 icon** (Guarantee, Returns, Showroom, Delivery, Lead time, Samples, Dimensions or None) and **text**. The defaults promise a 25-year guarantee, 30-day returns and a showroom: rewrite them to your own terms. |
| **Back-in-stock request** | An email field under a sold-out variant | **Heading**, **Text**. Each request emails your store with the product, variant and SKU; nothing is sent to the shopper, so reply when the stock is back. |
| **Pickup availability** | Whether the variant can be picked up at your locations, with a list of stores | Shows when local pickup is set up in **Settings › Shipping and delivery** |
| **Spec table** | A table of product details and metafields | Chapter 5 |
| **Collapsible row** | Delivery, care, returns | Chapter 5. The presets use three: one with **Material care** as its source. |

## The variant picker

Each option renders in the form that suits its values:

* **Material chips**: an option whose name is in **Theme settings › Materials and samples › Material option names** (Material, Finish, Frame, Fabric, Upholstery, Timber, Stone, Leather, Shade, Colour, Color) shows round chips with a close-up and the free sample action, as long as its values have a swatch or a Material entry (chapter 8).
* **Swatches**: any other option whose values have swatches (set in admin on the product's option values) shows chips without the close-up.
* **Pills**: everything else shows as square pills, with the price difference a value makes ("+$890") beside it. More than eight values without swatches show as a list.

The legend names the chosen value ("Upholstery: Bouclé ivory"), values that can't be bought are marked, and the page's address, price, images, stock, delivery timeline and dimensions follow the variant. Products with more than 250 variants and Shopify's combined listings work.

## Buy buttons

**Show subscription options** (plans from a subscriptions or pre-order app), **Show quantity selector**, **Show accelerated checkout buttons** and **Show Shop Pay Installments** are on by default. The Atelier settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Show order free samples | On | A link that jumps to the close-up's sample action, or to your samples page. Needs samples on in Theme settings (chapter 8). |
| Show request a trade quote | On | A link to your trade page that names this product, the variant and the quantity (chapter 12). Needs a trade page in Theme settings › Trade. |
| Show sticky add-to-cart bar | On | Product pages only. A bar with a thumbnail, the title, the chosen options, the price and Add to cart docks to the bottom of the screen once the main button scrolls out of view. |
| Returns note | Empty | A short line under the add-to-cart button, such as "Free returns within 30 days on ready-to-ship pieces". Empty hides it. |

The button reads **Add to cart · $2,450**, then **Sold out**, **Unavailable** (no variant has that combination, or a plan is required and none covers it) or **Pre-order**.

## Pre-orders

The Product and Featured product sections have three settings under **Pre-orders**; both opt-ins are off by default:

* **Show oversold variants as pre-orders**: for tracked variants set to **Continue selling when out of stock** that have reached zero. The button reads **Pre-order** and the Delivery block shows "**Pre-order.**" with your note.
* **Show single-delivery purchase options as pre-orders**: for products sold only through a pre-order app's purchase options. Leave it off for "try before you buy".
* **Pre-order note**: shown under the button, such as "Ships in March". Give a date or a range.

Each can be connected to a product metafield (the editor's dynamic source button) to set it per product. Without a note, the theme uses the product's `custom.preorder_date` metafield (a date) as "Ships from March 2027". Pre-order lines carry a "Pre-order" note in the cart.

> **Note:** a made-to-order piece is not a pre-order. Use pre-orders for a batch that isn't in stock yet; use made to order (chapter 11) for pieces you build after the order.

## B2B, gift cards and more

* **B2B**: for company customers on Shopify B2B, the buy box respects quantity rules (minimum, maximum and increments) and shows volume pricing tables. The **Trade order** section (chapter 4) lists every variant with a quantity field for large orders.
* **Gift cards**: gift card products show Shopify's recipient form (email, name, message and send date).
* **Quick view and quick add**: with Theme settings › Product cards › **Show quick view button**, cards open the media, options and buy buttons in a drawer, including the material close-up and sample action. **Show quick add button** adds products without options straight to the cart and opens quick view for the rest.
* **Apps**: app blocks can go in the buy box (reviews, wishlists, financing).