# The product page

Chapter 6 of the Loot user guide.

The **Product** section's settings are **Show breadcrumbs**, **Enable image zoom** (adds a zoom button to each image and opens images full screen) and the pre-order settings below. Its buy box is built from blocks you can reorder, remove or add again.

## The gallery

The active image sits in a big blister card, the **stage**, with the product's badges (sold out, rarity or chase, pre-order, sale, new and exclusive) and its hang tab, beside a rail of thumbnails (a row under the stage on phones). Epic and legendary pieces get a ring in their rarity color; chase pieces get the holographic foil. The gallery handles images, video, YouTube and Vimeo, and 3D models with **View in your space**. When a variant has its own image, choosing it brings that image forward.

## Buy box blocks

| Block | What it shows | Settings |
| --- | --- | --- |
| **Product metadata** | The series chip (`custom.series`, linked to the set's collection when `custom.set_collection` is set) and the edition chip ("No. 045 of 500" or "Limited to 1,500") | **Show the vendor without a series** (off) |
| **Product vendor** | The vendor, linked to its products | None |
| **Title** | The product title | None |
| **Price** | The selected variant's price and compare-at price | **Show tax note** (on) |
| **Graded slab** | For graded items: a slab label with the grade, grade label, grader and cert number | See chapter 8 |
| **Inventory** | At or under the threshold: a scarcity panel with a meter, "Only 3 left" and the purchase limit line. Above it: the in-stock line. Also "Pre-order" with the ships-from date, or "Sold out". Counts show only for variants whose inventory Shopify tracks. | **Low stock threshold** (5, 1 to 40), **In-stock line** ("In stock, ships in 1 to 2 business days") |
| **Drop status** | Before the release date: the countdown and the Remind me form. On pre-orders: the ships-from line | **Heading** ("Drops in"), **Reminder tag** ("drop-alert"), **Show ships-from date on pre-orders** (on); chapter 9 |
| **Variant picker** | One selector per option (below) | None |
| **Buy buttons** | Quantity, the add-to-cart key with the price in it ("Add to cart · $129.00"), subscriptions, accelerated checkout, installments and the sticky bar | See below |
| **Back-in-stock request** | Under a sold-out variant: an email field and **Notify me** | **Heading** ("Notify me if more land"), **Text** |
| **Base game guard** | On an expansion: "You'll need Starfall Harbour to play" with an **Add both** key | See chapter 11 |
| **Game stats** | Players, play time, age and weight tiles | See chapter 11 |
| **Set box** | "Part of Neon Ronin wave 3 · You have 7 of 12" with a progress ring | See chapter 10 |
| **Pickup availability** | Whether the variant can be picked up from your locations | None |
| **Trust row** | One line with an icon, such as "**Shipped boxed**, corners safe". Rows stack with dividers between them. | **Icon** (21 icons or None), **Text** (make the first words bold) |
| **Description** | The product description in a panel that opens and closes | **Heading** ("About this figure"), **Open by default** (off) |
| **Spec table** | A table of product facts (below) | See below |

The theme blocks from chapter 5 (Kicker, Heading, Text, Button, Collapsible row, Custom Liquid) and app blocks can go between them. Blocks with nothing to show for a product take no space: a figure without game stats shows no Game stats panel, an ungraded item no Graded slab, a product outside a set no Set box.

**Back-in-stock requests** are sent to you, not to the shopper: each request reaches your store's sender address as a contact message naming the product, variant, SKU and a link. Nothing is sent to the shopper automatically, and nothing subscribes them to marketing. Reply when the stock is back, or use a back-in-stock app instead.

## The variant picker

Each option shows as the selector that suits it:

* **Condition chips**: options named in Theme settings › Collecting › **Condition option names** ("Condition, Grade" by default). Each value gets one to four pips by its place in the **Condition scale**, and a "Condition guide" link opens the guide panel when it's on the page (chapter 8).
* **Image tiles**: options whose values have their own variant images (two or more), three to a row, each with its price, or "Sold out".
* **Swatch chips**: options whose values carry swatches (set them in the product's options in admin).
* **A select menu**: options with more than eight plain values.
* **Chips**: everything else.

Sold-out values stay selectable and are marked, so shoppers can still see the price and ask to be notified. Choosing a value updates the price, stock, edition number, rarity badge, images and buy buttons without a reload.

## Buy buttons

| Setting | Default | What it does |
| --- | --- | --- |
| Show subscription options | On | Appears when the product has subscription plans from a subscriptions app. Each option shows the price Shopify calculates for that plan. |
| Show quantity selector | On | |
| Show accelerated checkout buttons | On | Shop Pay, Apple Pay and so on: customers see the methods available on their device |
| Show Shop Pay Installments | On | Appears when Shop Pay Installments is enabled on your store |
| Show sticky add-to-cart bar | On | Product pages only: appears when the add-to-cart button scrolls out of view |
| Returns note | Empty | A line under the button, such as "Free returns within 30 days" |
| Hide the buy box until the drop | On | Before the product's `custom.release_date`, a countdown stands in for the buy box (chapter 9) |

**Purchase limits**: a product with `custom.purchase_limit` (chapter 7) caps the quantity field at the limit (the stepper stops there), counts what's already in the cart, and says "Limit 1 per customer, so more people get one". The cart caps the line too. This is a storefront cap: it can't stop a customer placing a second order. For a hard limit per customer, use a Shopify app or checkout rule built for it.

Gift card products show recipient fields (name, email, message and send date), so a gift card can be sent to someone else.

## Pre-orders

Loot labels a variant as a pre-order only from real data, with two opt-ins on the Product section (both off by default; connect a true/false product metafield to either to choose per product):

* **Show oversold variants as pre-orders**: for tracked variants set to **Continue selling when out of stock** that have 0 or fewer in stock.
* **Show single-delivery purchase options as pre-orders**: for products sold only through a pre-order app's purchase options (not try before you buy).

A pre-order variant gets a "Pre-order" badge, a "Pre-order · $129.00" key and, with `custom.ships_from` filled in (such as "Ships from 14 Nov"), the ships-from line on the card, product page and cart line. **Pre-order note** adds a line under the button, such as "Ships in March"; connect a product metafield to set it per product.

## Spec table

The **Spec table** block (in the buy box, or in the **Product details** section under it, where the presets put it as "Box details") lists **Show SKU**, **Show product type**, **Show vendor in spec table**, **Show weight**, **Show barcode** (off) and **Show variant options**. Add **Spec row** blocks for your own facts: **Label** (such as Scale), **Product metafield** (the namespace and key, such as `specs.scale`), a fixed **Value** when there's no metafield, and a **Unit**. **Spec row position** puts your rows above or below the built-in ones. Rows with no value are hidden.

## B2B

For customers buying for a company location, the buy box shows their catalog's quantity rules ("Minimum 10 · Multiples of 5 · Maximum 100 · 3 in cart") and volume pricing chips ("10+ $4.00"), and the quantity field follows the rules. Customers without B2B see none of it. Add the **Quick order list** section to the product template for a table of every variant with quantity fields.