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.
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 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 |
| Collapsible row | Shipping, returns, care — anything that does not belong in the description |
| 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 |
Any app block your apps provide can go here too, in any position.
Variants
The picker reads your product options directly. Two things are worth setting up in your Shopify admin:
- Swatches. Add color or image swatches to an option value and Craftly shows them automatically, on the product page and on product cards.
- Variant images. Assign an image to a variant and the gallery moves to it when that variant is chosen.
Unavailable variants can be dimmed or hidden. Dimming 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.
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.