# The product page

Chapter 6 of the Altar user guide.

The **Product** section's settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Show breadcrumbs | On | The trail above the product. Off, a small "back" link to the collection shows instead. |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |

**The gallery is a tarot card.** The selected image stands in one large tarot frame, in the **Card shape** of Theme settings › Product cards, with the product's badge in its top cartouche and a caption under it (the image's alt text and "1 of 4"). On computers a column of small tarot-frame thumbnails sits beside it, the current one ringed; clicking a thumbnail brings that image into the frame. On phones the frame swipes, and the thumbnails become a row of small moons under it, the current one full. It handles images, video, YouTube and Vimeo, and 3D models. When a variant has its own image, choosing it brings that image first, which is what makes Pick your piece swap to each stone's own photo (chapter 11).

Under the gallery sit three blocks that every product page has, which you select in the editor's block list under the Product section:

* **Crystal properties**: the panel of intentions, chakras, signs, element and care, with How to use under it (chapter 8).
* **Cleansing and care** and **Shipping and returns**: two collapsible rows with sample text. Rewrite them in the theme editor, or connect a product metafield to **Content** to show each product's own text.

The properties panel shows nothing on a product without the data, so a product with no crystal metafields shows just its gallery and the two rows. On phones these three follow the buy box. The section also has the pre-order settings below. Its buy box is built from blocks you can reorder, remove or add again.

## Buy box blocks

The presets' order is Product metadata, Title, Price, Description, Variant picker, Inventory, Buy buttons, Back-in-stock request, Trust rows, Moon note, Pickup availability and Spec table.

| Block | What it shows | Settings |
| --- | --- | --- |
| **Product metadata** | The line above the title, after a small star: the product type and the product's origin from `custom.origin` ("Crystals · Minas Gerais, Brazil", chapter 7) | **Show vendor in metadata** (off) and **Show SKU** (off), which add the vendor and the selected variant's SKU to the line |
| **Title** | The product title in the heading font, and under it the rating ("4.9 · 86 reviews") after five accent stars | None. The rating needs a reviews app that fills the product's `reviews.rating` and `reviews.rating_count` metafields, and hides when a product has none. |
| **Product vendor** | The vendor, linked to its products | None |
| **Price** | The selected variant's price and compare-at price, the tax note, and the product's **intention chips**, each a link to your finder collection filtered by that intention (chapter 9) | **Show tax note** (on) and **Show intention chips** (on). Up to six chips show. |
| **Description** | The product description | None |
| **Variant picker** | Each option as pills, swatches or a select, and a piece option as a grid of photo cards (below and chapter 11) | **Piece columns on computers** (3 or 4, default 4) and **Show pieces left** (on: "4 of 6 pieces left") |
| **Inventory** | The selected variant's stock ("Only 3 left", "In stock", "Pre-order" or "Sold out"). Counts show only for variants whose inventory Shopify tracks, at or under **Theme settings › Product cards › Low stock threshold**. One-of-a-kind products show no stock line. | None |
| **Buy buttons** | The add button with the price in it ("Add to bag · $86.00"), quantity, subscriptions, accelerated checkout, Shopify's instalments message and the sticky bar | See below |
| **Back-in-stock request** | Under a sold-out variant: an email field and a **Notify me** button. Never on a one-of-a-kind product: a sold stone doesn't come back. | **Heading** ("Notify me when available") and **Text** ("Leave your email and we'll write to you when it's back in stock.") |
| **Pickup availability** | Whether the variant can be picked up from your locations | None |
| **Spec table** | A table of the product's details: SKU, product type, vendor, weight, barcode and the chosen options, plus any **Spec row** blocks you add | **Heading** ("Specifications"), **Spec row position** (Above product details, the default, or Below), **Show SKU**, **Show product type**, **Show vendor in spec table**, **Show weight** and **Show variant options** (all on) and **Show barcode** (off) |
| **Crystal properties** | The properties panel (chapter 8). It can also go in the buy box. | Chapter 8 |
| **Trust rows** | Up to three short lines, each with a gold icon, and the disclaimer under them | **Icon 1** to **Icon 3** (Sparkle, Moon, Delivery, Returns, Leaf, Hand, Gift, Shield, Location or None) and **Line 1** to **Line 3**. Defaults: Sparkle "Ethically sourced from small family mines", Moon "Cleansed with smoke and moonlight before it ships", Delivery "Wrapped by hand in recycled paper". **Show the disclaimer** (on): the line from Theme settings › Crystals and rituals, when it's on there too. State only what your store really offers; a line with no text is skipped. |
| **Moon note** | A small night-band card with tonight's moon and a line for this part of the cycle (chapter 10) | **New moon text**, **Waxing text**, **Full moon text** and **Waning text** |

A **Spec row** block (added inside the Spec table) shows one more row: **Label**, **Product metafield** (its namespace and key, such as `custom.origin` or `custom.element`, from Settings › Custom data › Products; lists, true or false values, measurements and dates are formatted for the shopper's language), **Value** (used when the metafield is empty; a typed value shows on every product that uses this template) and **Unit** (shown after the value, such as g or cm; leave it empty for weight and dimension metafields, which include their unit).

The theme blocks from chapter 5 (such as a **Collapsible row**) and app blocks can go between them. Blocks with nothing to show for a product take no space: a product without reviews shows no stars.

**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 and variant. 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, with the option's name and the chosen value in its label ("Size: Medium"):

* **A piece grid**: an option named in **Theme settings › Crystals and rituals › Piece option names** (Piece, Specimen), as a grid of photo cards, one per stone. Chapter 11.
* **Swatches**: an option whose values carry Shopify swatches (a color or an image), as round swatches.
* **A select menu**: an option with more than eight values and no swatches.
* **Pills**: every other option, as a row of round-ended pills; the chosen one is filled.

Sold-out values stay selectable and are struck through, so shoppers can still see the price; screen readers hear that the value is sold out. (Sold pieces in a piece grid are different: they can't be chosen, chapter 11.) Choosing a value updates the price, stock, images, chips and buy buttons without a reload, and arrow keys move between pills, swatches and pieces. Combined listings (Shopify Plus) work too: a value that belongs to another product loads that product in place.

In the theme editor, a product without a piece option also shows a **sample piece grid** tagged **Sample** under its real options (pieces A to F, two of them sold, and the intuitively chosen card), so you can see and style Pick your piece before your products have a piece option. Shoppers never see it.

## Buy buttons

| Setting | Default | What it does |
| --- | --- | --- |
| Show subscription options | On | Appears when the product has subscription plans, such as a monthly crystal box |
| Show quantity selector | On | A stepper beside the add button. One-of-a-kind products never show it for a piece: each stone is one unit (the Intuitively chosen value shows it like any product). |
| Show accelerated checkout buttons | On | Shop Pay, Apple Pay and so on: customers see the payment methods available on their device |
| Show Shop Pay Installments | On | Shopify's own instalments message under the buttons. It appears only when Shop Pay Installments is enabled on your store (in **Settings › Payments**, where Shopify offers it); there is nothing to set up in the theme. |
| Show sticky add-to-cart bar | On | Product pages only: a bar with the photo, title, price and add button appears when the add button scrolls out of view |
| Returns note | Empty | A line under the add button, such as "Unused pieces can come back within 30 days" |

The add button is a full-width primary pill with the price in it, which follows the chosen options. With **Theme settings › Commerce › Free dispatch over** above 0, "Free shipping over $80." shows under 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

For a restock on its way, or a new deck you're taking orders for. Altar 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 or false product metafield to either to choose per product):

* **Show oversold variants as pre-orders**: for tracked variants that keep selling at zero stock (**Continue selling when out of stock**) with 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 (leave it off for try before you buy).

A pre-order variant shows a **Pre-order** badge on its photo (after Sold out and Sale, the badge that comes first), "Pre-order" in the stock line and on its add button, and its bag line carries a "Pre-order" property. Product cards can't see these opt-ins, so they show the badge only with **Theme settings › Product cards › Show pre-order badge on cards** on. **Pre-order note** adds a line under the button, such as "Ships in March" (give a date or a range), and becomes the property's value; connect a product metafield to set it per product. The Featured product section has the same three settings.

## B2B and wholesale

For customers buying for a company location (a shop restocking tumbles by the kilo, a reader buying decks for a class), the buy box shows their catalog's quantity rules ("Minimum 5", "Multiples of 5", "Maximum 50") and volume pricing (the price per unit at each quantity), and the quantity field follows the rules. Customers without B2B see none of it. Add the **Quick order list** section to a product template for a table of every variant with quantity fields.

> **Note:** Text you type into a block on the product template (the Trust rows, the Moon note, the collapsible rows, a Spec row's **Value**) shows on **every product that uses this template**. Use it for what's true of every product, or on a template you make for a group of products (in the theme editor, **Create template** from the product template and assign it to those products in admin, for example one for decks and one for herbs). For anything that differs per product, use the metafields in chapter 7.