Product pages and metafields
The product page is a spread: the gallery on one page and the product information on the other. Every part of the information is a block you can add, remove and reorder.
| Block | Shows |
|---|---|
| Vendor, Title, Price | The basics; price shows sale prices, unit prices and tax notes. |
| Variant picker | Buttons, a dropdown or swatches. Sold out values stay selectable and are struck through. |
| Quantity, Buy buttons | Quantity rules, add to cart and accelerated checkout. |
| Description, Collapsible row | Text, a page, or any metafield. |
| Inventory | A real low stock message from your inventory. |
| Pickup, Installments | Store pickup availability and Shop Pay installments. |
| Spec sheet | Up to eight rows of label and value, each value connectable to a metafield. |
| Size chart | A link that opens a page in a dialog. |
| Volume pricing | Quantity price breaks for B2B customers. |
| Back in stock | A request form on sold out variants. |
| Complementary products | Products from Shopify Search and Discovery recommendations. |
| Key specs | Up to eight icon, value and label chips, for example battery life or weight. |
| Add-ons | Accessory products with checkboxes, added to the cart together with the product. |
| Help drawer | A "Need help?" row that opens a side drawer with your phone, email, a messaging link, opening hours and a page. |
Building a long product page
For products with a lot to tell, add these sections under the product:
- Section navigation right under the product. It lists every section below it that has a heading and stays at the top of the screen as customers scroll, marking the section they are reading.
- Scroll statements: three or four short sentences that take turns over one video or image. Customers who reduce motion see them as a plain list, and the video never plays for them.
- Tech specs: groups of spec rows that open and close, beside an "In the box" panel. Connect rows to metafields; empty rows and groups are left out, and without "In the box" items the specs take the full width.
- Scrolling text: short phrases such as your store promises, in large type. It always has a pause button.
To give one product its own page, create a new product template in the theme editor (Templates > Product > Create template), build it, and assign it to the product in Products > Theme template.
Gallery layouts
Stacked, Large first then two columns, Two columns, Mosaic (one large and two small, repeated), Carousel, or Carousel with thumbnails. On mobile the gallery is always a swipe row.
Connecting metafields
- Settings > Custom data > Products: add a definition, for example
Material(single line text). - Fill it in on each product.
- In the theme editor, select a spec sheet row or collapsible row, and use the Connect dynamic source button next to the value to pick the metafield.
Product cards show ratings from the standard reviews.rating metafield that review apps write.