Product pages
The product page is built from the Product information section and its blocks, followed by two Product recommendations sections and a Recently viewed products section. To edit it, open the theme editor and choose Products from the page menu at the top.
Layout
On desktop, the product's images sit on the left and the buying area on the right. Below the images is the details area: the description, specifications and compatibility. On phones everything stacks: images, buying area, details.
Section settings:
- Media layout: Thumbnails shows one image beside a column of thumbnails; Stacked shows all images one under another.
- Media width on desktop: Small, Medium or Large, the share of the page the images take.
- Enable image zoom: opens images full screen when clicked.
- Loop videos: plays product videos on repeat.
- Keep product information in view while scrolling: the buying area stays on screen while shoppers scroll past the images.
- Show breadcrumbs: the trail above the product. See Theme settings.
Blocks
Each block is one part of the page. Drag them to change their order, or hide the ones you don't need. Blocks always stay in their own area: a Description block shows in the details area wherever it sits in the list.
In the buying area
| Block | What it shows |
|---|---|
| Title | The product's title |
| Part number | The variant's part number, with or without its label (Show label). See Set up your product data. |
| Condition badge | Used, Refurbished, Demo and so on. See Set up your product data. |
| Price | The price, the compare-at price when on sale, and the unit price. When your prices include tax, it says "Taxes included." |
| Stock source | The stock label and dispatch time (Show dispatch time). For sold-out products, a link to ask about them (Show a way to ask about unavailable products). |
| Variant picker | The product's options, as Buttons or a Dropdown (Style), with swatches (Show swatches) |
| Quantity selector | A quantity field with plus and minus buttons. It follows the variant's quantity rules and shows them. |
| Buy buttons | Add to cart, and the options listed below |
| Pickup availability | Whether the product can be picked up, and where. It shows when local pickup is set up in Settings > Shipping and delivery. |
| Payment icons | The payment methods you accept, under a Heading |
| Callout | A highlighted panel, such as a buying guide, with links to up to three blog posts and an optional button. See below. |
| Share | Buttons to share the product on Facebook, X or WhatsApp, or copy its link. On phones, the device's own share button is added where available. |
| Collapsible tab | A heading that opens to show text, such as shipping, warranty or returns information |
| Text | Any text you write |
| Custom Liquid | Your own Liquid or HTML code |
| Apps | Blocks from apps you've installed |
In the details area
| Block | What it shows |
|---|---|
| Description | The product's description. Long sections can fold away; see below. |
| Specifications | A table of specifications from a metafield. See Set up your product data. |
| Compatibility | Compatible models and alternate part numbers, with a model filter for long lists. See Set up your product data. |
Buy buttons
- Add to cart adds the product without leaving the page, then opens the cart drawer, or shows "Added to cart". When a variant is sold out, the button says so and can't be clicked.
- Show dynamic checkout buttons: a button that takes shoppers straight to checkout, such as Buy it now, Shop Pay, Apple Pay or Google Pay, depending on what's set up in Settings > Payments.
- Show Shop Pay Installments: a line telling shoppers they can pay in installments, when Shop Pay Installments is available in your store.
- Show gift card recipient form: on gift card products, lets the buyer send the card to someone else by email, with a name, a message and a send date. While the buyer is sending it to someone, the dynamic checkout button hides, because the recipient details can only be checked when the card is added to the cart.
Subscriptions. Products sold with subscriptions (set up through a subscriptions app) show the purchase options above the buttons, with "One-time purchase" first.
Callout
A colored panel in the buying area. By default it's a buying guide, "Check compatibility before you order".
- Eyebrow and Heading: its title.
- Guides metafield: a product metafield listing up to three blog posts, such as repair or compatibility guides. See Set up your product data.
- Link label and Link: an optional button, the same on every product.
The callout shows when it has a heading and either guides or a link.
Collapsible tabs
The product page comes with three tabs: Shipping, Warranty and Returns. Each has a Heading, an Icon, its Content, and a Page.
Choose a Page to show the same text, like your returns policy, on every product: write it once as a page in Online Store > Pages. A tab with no content and no page stays hidden.
Description
The description shows in the details area, under an optional Heading.
Folding long sections. Product descriptions for parts often include long lists. With Fold long sections on, a section of the description folds away behind its heading when:
- a word in its heading starts with one of the Headings to fold, or the heading contains one that's a phrase. The defaults are "spec" and "in the box", so "Specifications", "Tech specs" and "What's in the box" all fold, and
- it's longer than Fold sections longer than (700 characters by default). Shorter sections stay open.
Use headings (Heading 2 or Heading 3) in your descriptions for this to work.
Product recommendations
Two Product recommendations sections follow the product:
- Pairs well with shows complementary products: ones you choose for each product in the Search and Discovery app.
- Related products shows Shopify's related products, which it picks from your store's sales and product data.
Recommendations sets which kind a section shows. A section with nothing to show stays hidden. Products to show and Columns on desktop set its size.
Gift cards
Gift card products use the same page. Turn on Show gift card recipient form in the Buy buttons block to let buyers send the card to someone else. See Blog and other pages for the gift card page your customers receive.
Featured product
The Featured product section shows one product, with its images and buy buttons, on any page. Choose the Product, then arrange its blocks as on the product page. It has the buying area's blocks, a Description, and a View details link that opens the product's own page.