The product page
Chapter 6 of the Clasp user guide.
The Product section's settings:
| Setting | Default | What it does |
|---|---|---|
| Show breadcrumbs | On | The trail above the product |
| Gallery layout | Thumbnails beside the photo | Thumbnails beside the photo (a column of small oval thumbnails beside a large square photo, with the next two images in a row under it) or Grid (every image square, two to a row, the first across both). Phones always show a swipeable carousel of square images with a "1 / 5" counter and the oval thumbnails in a row under it. |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
The gallery handles images, video, YouTube and Vimeo, and 3D models, with the product's badges on the first image. When a variant has its own image, choosing it (by its metal chip, say) brings that image first. The buy box stays beside the photos as shoppers scroll down them. 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, Rating, Price, Material badges, Description, Variant picker, Engraving, Buy buttons, Inventory, Back-in-stock request, Pickup availability, three Trust rows and three Collapsible rows (Details, Materials and care, Shipping, returns and repairs).
| Block | What it shows | Settings |
|---|---|---|
| Product metadata | The kicker above the title, with a small facet: the product's type, or its first collection when it has no type | Show vendor in metadata (off) adds the vendor |
| Title | The product title | None |
| Product vendor | The vendor, linked to its products | None |
| Rating | Five small stars and "4.9 · 212 reviews" | None. It needs a reviews app that fills the product's reviews.rating and reviews.rating_count metafields, and hides when a product has none. |
| Price | The selected variant's price and compare-at price, with "Tax included." (and "Free shipping over $80." with a threshold set, chapter 2) beside it | Show tax note (on) |
| Material badges | "14k gold fill", "Nickel free", "Hypoallergenic" as small badges under the price | See chapter 8 |
| Description | The product description | Show only the first paragraph (off; the presets turn it on, so the buy box stays short). The rest of the description then shows under the product, in The details, with the Product details section's Show the rest of the description. |
| Variant picker | Metal chips, size tiles and selects (below) | None |
| Engraving | The engraving option with its live preview | See chapter 10 |
| Buy buttons | The add button with the price in it ("Add to bag · $58.00"), quantity, subscriptions, accelerated checkout, installments and the sticky bar | See below |
| Inventory | The selected variant's stock: "Only 3 left" at or under the threshold, otherwise "In stock"; "Pre-order" or "Sold out". Counts show only for variants whose inventory Shopify tracks. | Low stock threshold (3, 1 to 40). This is separate from Theme settings › Product cards › Low stock threshold, which sets the card badge. |
| Back-in-stock request | Under a sold-out variant: an email field and a Notify me button | Heading ("Notify me when it's back") 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 |
| Trust row | One short line with an icon, such as "Free gift box and a handwritten note". Rows stack into a list. | Icon (Gift, Repair, Truck, Return, Ring or Shield) and Text (bold the lead words: bold text shows in the darker ink) |
| Spec table | A list of the product's facts (SKU, type, vendor, weight, barcode, variant options) and Spec row blocks for your own metafields | Heading ("Specifications"), Spec row position (Above or Below product details) and Show SKU, Show product type, Show vendor in spec table, Show weight, Show barcode and Show variant options. Each Spec row: Label ("Band width"), Product metafield (namespace.key, such as specs.band_width), Value (used when the metafield is empty; a typed value shows on every product that uses the template) and Unit. The presets put the Spec table in the Product details section under the product ("The details"). |
The theme blocks from chapter 5 (such as the presets' Collapsible rows) 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, one without materials shows no badges.
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 ("Metal: Rose gold", "Ring size: 6½"):
- Metal chips: an option named in Theme settings › Jewelry › Metal option names (Metal, Finish, Stone, Colour or Color by default), or any option whose values carry Shopify swatches, as small round polished chips. Hovering a chip shows its name. A value with no color of its own shows as a small text tile in the same row (chapter 8).
- Size tiles: a ring size option (chapter 9) or an option named in Size option names (Size, Length by default), as a row of small rectangles; the chosen size is filled. An option named in Ring size option names ("Ring size" by default) is a ring size option when at least one of its values reads as a ring size (US 3 to 13, or a UK/AU letter); it also gets the Find your ring size link beside its label, and half sizes stored as "6.5" show as "6½". An option with more than 14 values shows as a select menu instead.
- A select menu: every other option.
Sold-out values stay selectable and are struck through, so shoppers can still see the price and ask to be told when it's back; screen readers hear "Rose gold, sold out". Choosing a value updates the price, stock, images and buy buttons without a reload, and arrow keys move between chips and tiles. Combined listings (Shopify Plus) work too: a value that belongs to another product loads that product in place.
Buy buttons
| Setting | Default | What it does |
|---|---|---|
| Show subscription options | On | Appears when the product has subscription plans |
| Show quantity selector | Off | A stepper beside the add button |
| 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 | Appears when Shop Pay Installments is enabled on your store |
| 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 "Free returns within 30 days" |
The add button is a full-width framed button with the price in it. With engraving ticked, the price includes the engraving fee ("Add to bag · $68.00", chapter 10). Gift card products show recipient fields (name, email, message and send date), so a gift card can be sent to someone else.
Pre-orders
Clasp 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 "Pre-order" in the stock line and on its add button, and its cart line carries a "Pre-order" property. 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. The Pre-order badge on cards and on the product photo comes from a product tag instead: tag the product pre-order (or preorder).
B2B and wholesale
For customers buying for a company location, the buy box shows their catalog's quantity rules (minimum, multiples and maximum) 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 the product template for a table of every variant with quantity fields: handy for stockists who buy by the dozen.