The product page

The Product section's settings:

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.

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

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.