Customising · Product page
Product page
The product page is built out of blocks. Open a product in the theme editor, choose the Product information section, and add, remove or drag blocks into the order you want.
The template ships as four sections: the product itself, a Spec table, an Index of things worth knowing before buying, and Related products. The last three are ordinary sections — delete them, reorder them, or add them to other templates.
Blocks
| Block | What it shows |
|---|---|
| Title, Vendor, Price, Description | The basics |
| Variant picker | Options as pills or swatches |
| Quantity | With any quantity rules and volume pricing you have set |
| Buy buttons | Add to cart, accelerated checkout, Shop Pay Installments |
| Inventory status | In stock, low stock with a count, or sold out |
| Pickup availability | Local pickup for the chosen variant |
| SKU | SKU or barcode |
| Rating | From your review app's standard metafield |
| Share | Native share sheet, or copies the link |
| Badges | Sale, sold out and new, on their own rather than over the photograph |
| Collapsible row | Shipping, returns, care — anything that does not belong in the description |
| Spec row | One line of a specification, if you would rather have the facts in the column than in the Spec section below |
| Complementary products | From the Search & Discovery app |
| Gift card recipient | Only appears on gift card products |
| Custom Liquid | Code from an app or a developer |
Every other theme block — text, headings, images, buttons, groups, hanging tags, seals, dividers — can go here too, and so can any app block your apps provide, in any position.
Buy buttons has a setting worth knowing: Keep the button in reach on phones is on by default, which pins Add to cart to the bottom of the screen once a shopper has scrolled past it. On a long product page that is the difference between a sale and a scroll back up.
Variants
The picker reads your product options directly. Two things are worth setting up in your Shopify admin:
- Swatches. In Settings → Custom data → Products, or on the option itself when you edit the product, give a color option value a color or an image. Craftly then shows swatches on the product page, on product cards, in the filter panel, and as the fill of a shade card cell. This is the single setting that most changes how Craftly looks, because the shade card is built on it.
- Variant images. Assign an image to a variant and the gallery moves to it when that variant is chosen.
Unavailable variants can be disabled or hidden. Disabling is usually better: a shopper can see the size existed and is out of stock, rather than wondering whether they missed it.
When a shopper picks a variant, the price, availability and buy buttons are re-rendered by Shopify rather than rewritten in the browser. That means your currency formatting, tax notes and installment banner stay correct in every market.
Media
The gallery handles images, video, YouTube, Vimeo and 3D models. Add them in your Shopify admin; Craftly works out what each one is.
The first image loads at high priority because it is the largest thing on the page. The rest load as they are needed. Adding twenty images to a product will not slow the page down.
Gallery layout puts thumbnails below or to the left, or stacks the images. Media position puts the whole gallery on the left or the right of the column of blocks.
The spec table
Craftly's product page is built on the idea that the facts belong on the page rather than in an email. The Spec section is where they go: a term on the left, its value on the right, one Spec row block per fact.
Because the section sits on the template, every product shows the same rows until you connect them to data. To vary it product by product:
- In your Shopify admin, go to Settings → Custom data → Products and add a metafield for each fact — fiber, weight, length, gauge, needle size, care, dye lot, or whatever your trade writes down.
- Fill those in on your products.
- In the theme editor, open a Spec row and click the dynamic-source icon beside Value. Pick the metafield.
The Term stays typed, because it is the same word on every product. Only the value changes.
A row whose metafield is empty on a given product prints an empty value rather than disappearing, so fill the fields in or leave the row out.
Gift cards
On a gift card product a Gift card recipient block lets a shopper send the card straight to someone else with a message and a delivery date. Add the block to your gift card product's template.