Product page overview
The product page is built around the Product information section. It has three fixed parts: Media (the gallery), Product details (the main column with title, price, options and buy buttons) and Second column (specs, description, delivery and more). You add, remove and reorder blocks inside the two columns. Other sections, such as the spec sheet, compare table, FAQ and recommendations, follow below.
How to set it up
Step 1: Open the product template
- In the theme editor, use the page picker at the top to choose Products > Default product.
- Click Product information in the left sidebar.
- Pick a Layout (1): media beside the details, the second column below the media, three columns, media between the columns, or wide media on top.
- Turn on Keep details in view while scrolling (2) to keep the buy box in view on desktop.
Step 2: Arrange the blocks
- Expand Product details and Second column to see their blocks.
- Drag blocks to reorder them, or move a block from one column to the other.
- Click Add block in a column to add more: variant picker, custom options, add-ons, key specs, compatibility, downloads, stock, delivery, pickup, share and more.
Step 3: Use another template for some products (optional)
- In the page picker, choose Products > Create template, base it on Default product, and change its blocks.
- In Shopify admin, open a product and pick the template under Theme template. Treble ships a custom-options template as an example.
Settings reference
Product information
| Layout | |
|---|---|
| Layout | Blocks in the Second column move according to this layout. Three-column layouts need a screen at least 1200px wide, smaller screens show two columns. Options: Media beside details, Second column below media, Three columns, Media between columns, Wide media on top. |
| Details position | Options: Right, Left. |
| Media width | Options: Small, Medium, Large. |
| Keep details in view while scrolling | Desktop only. |
| Update the page URL when a variant is selected | Turns this on or off. |
Product details
| Style | Options: Plain, Soft panel, Outlined. |
|---|---|
| Space between blocks | Slider. |
Second column
| Style | Options: Plain, Soft panel, Outlined. |
|---|---|
| Space between blocks | Slider. |
Title
| Subtitle | Short line under the title. Connect a product metafield to show a different line for each product. |
|---|---|
| Show vendor | Turns this on or off. |
| Link title to the product page | Useful in the Featured product section. |
| Typography | Options: Display, Heading, Subheading. |
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Font scale on mobile | Slider. |
| Heading tag | Keep H1 on the product page. Use H2 in the Featured product section. Options: H1, H2, H3. |
| Make font bolder | Turns this on or off. |
Price
| Typography | Options: Body, Large body, Heading, Subheading. |
|---|---|
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Font scale on mobile | Slider. |
| Show beside the product title | Place this block right after the Title block. The price sits on the title's line, aligned to the end. |
| Beside the title on mobile too | Turns this on or off. |
| Show savings | Shows the amount saved when the variant has a compare-at price. |
| Show taxes and shipping note | Turns this on or off. |
| Show Shop Pay Installments message | Appears when Shop Pay Installments is available for the price. |
Badges and rating
| Show sale, sold out and new badges | Tag a product "new" to show the New badge. |
|---|---|
| Rating link | Where the stars link to. Defaults to #reviews on the page. |
| Show vendor when there are no ratings | Turns this on or off. |
Description
| Typography | Options: Caption, Body, Large body. |
|---|---|
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Word limit | 0 shows the full description. Useful in the Featured product section. |
| Show in a collapsible row | Turns this on or off. |
| Row heading | Requires collapsible row. Defaults to "Description". |
| Open by default | Turns this on or off. |
Buy buttons
| Show quantity selector | Turns this on or off. |
|---|---|
| Show purchase options | Subscriptions, pre-orders and try before you buy from apps. Turn off if your app adds its own widget. |
| Show dynamic checkout buttons | Lets customers pay with Shop Pay, Apple Pay and other methods you've enabled. |
| Show recipient form for gift cards | Lets customers send a gift card to someone on a chosen date with a message. |
| Show quantity rules and volume pricing | Shows minimums, increments and price breaks set for B2B catalogs. |
| Show a back-in-stock form for sold out variants | Requests arrive as contact form emails tagged back-in-stock. |
Collapsible row
| Heading | |
|---|---|
| Icon | Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube. |
| Custom icon | Replaces the icon. Use a square SVG or PNG. |
| Icon size | Slider. |
| Content | |
| Content from a page | Shown after the content above. |
| Custom Liquid | Add app snippets or other code. |
| Open by default | Turns this on or off. |
Share
| Label | |
|---|---|
| Style | Options: Icons, Icons with names. |
| Share to | |
| Turns this on or off. | |
| X | Turns this on or off. |
| Turns this on or off. | |
| Turns this on or off. | |
| Turns this on or off. | |
| Telegram | Turns this on or off. |
| Turns this on or off. | |
| Threads | Turns this on or off. |
| Copy link | Turns this on or off. |
| Device share menu | Shown on phones and browsers that have a share menu. |
Icon list
| Style | Options: List, Two columns, Boxed. |
|---|
Icon item
| Icon | Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube. |
|---|---|
| Custom icon | Replaces the icon. Use a square SVG or PNG. |
| Icon size | Slider. |
| Text | |
| Link | Where the link goes. |
Free shipping bar
| Message alignment | Options: Same as the cart, Left, Center. |
|---|---|
| Hide once free shipping is unlocked | Turns this on or off. |
Breadcrumbs
| Show the collection | Uses the collection the shopper came from, or the product's first collection. |
|---|
View details
| Label | Empty: View full details |
|---|---|
| Style | Options: Arrow link, Button. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Blocks in the Second column move with the Layout: beside the details, below the media, or as a third column.
- Buy buttons shows the quantity, add to cart, dynamic checkout buttons, purchase options from apps, gift card recipient form, B2B quantity rules and a back-in-stock form for sold out variants.
- Collapsible row can show rich text, a page's content or custom Liquid, for shipping, returns or care information.