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.