The Product information section is the top of every product page: the product's photos, its title and description, the choices a customer makes, and the Add to cart button. It comes with every product template. If you removed it, open a product template in the editor, click Add section and select Product information. It can't go on other pages.
On a computer, the photos fill the left column, and the right column holds the blocks. That column stays in view while customers scroll past the photos. On screens narrower than 1000 px, the blocks follow under the photos, and with the default Layout of the Media block, the photos become a row that customers swipe through.
Section settings
Show breadcrumbs shows a trail of links above the photos and the title: Home, then the collection the customer came from, then the product. When the customer did not come from a collection, the trail shows the first collection the product is in. It is on by default.
Blocks
Every block below goes in the Product information section. Click Add block in the section to add one, and drag blocks to change their order in the right column. The Media block always sits in the photo column, wherever you drag it.
Checkmate's default product page holds, in this order: Media, Product header, Description, Product metrics, three Variant option blocks, Purchase options, Buy buttons, Pickup availability, Info card and Complementary products. The Lair and Fang styles, the looks you can start Checkmate from, ship their own product page with other blocks. Theme styles compares them.
There is no price block. The price shows under the title, in the Product header block. The quantity box is part of the Buy buttons block.
In the editor sidebar, the blocks are listed under Product information, in the order they have in the right column.
Media
The product's photos, videos and 3D models, in the order they have in the product's Media section in your Shopify admin. A customer clicks a photo to see it full screen, where they can swipe from photo to photo and zoom in. An uploaded video plays in its tile with controls. A YouTube or Vimeo video and a 3D model show a still image with an icon, and load when clicked. On a device that supports it, a 3D model also shows a View in your space button.
Setting
What it does
Media source
Featured media + gallery, the default, shows every item, arranged by Layout. Featured media only shows one photo, and switches it when the customer picks a variant with its own photo. Specific media shows one item at the position you set, whatever the variant.
Layout
How the items are arranged: Stacked, the default, Thumbnails or Carousel. Each one is described under this table. Shows when Media source is Featured media + gallery.
Only the selected variant's media
Shows only the items that belong to the selected variant. Off by default. Shows when Media source is Featured media + gallery.
Media number
The position of the item in the product's media list, from 1 to 12. The block shows nothing for a product with fewer items. Shows when Media source is Specific media.
Image ratio
The shape of each tile. Square is the default. Portrait is 4 by 5 and Landscape is 16 by 9. These three crop the photo to fill the tile. Natural keeps each photo's own shape.
Show wishlist button
Adds a round heart button on the top right corner of the photos, which saves the product to the customer's wishlist. Off by default. Let customers save products to a wishlist explains where the list is kept.
Show share button
Adds a round share button to the left of the heart. It opens the Share section, or the phone's own share menu on a touch screen. Off by default.
The default product page has Show wishlist button and Show share button on.
Choose a gallery layout
Stacked (default)
Thumbnails
Carousel
Screens 1,000px and wider
Every item in a column, the selected variant's item first
One large item, with a column of small photos to its left
One item at a time, with arrows and dots
Smaller screens
A row customers swipe through, with dots
One large item, with the small photos to its left, or in a row under it below 768 px
A row customers swipe through, with dots
With Thumbnails, customers click a small photo to show it large. For a product with only one item, it looks the same as Stacked.
With Carousel, the arrows show when the pointer is over the photo, and the dots sit on the photo in a white pill. On a computer, the photo stays in view while customers scroll the right column. When a customer picks a variant, the carousel moves to that variant's item.
Show each variant's own photos
With Only the selected variant's media on, each variant shows only its own items. A variant gets its own image in the product's Variants section in your Shopify admin. In the product's Media list, that image starts the variant's group, and the items after it, up to the next variant's image, belong to the same variant. Items before the first variant's image show with every variant. Order the media in your Shopify admin to match. The setting changes nothing for a product with fewer than two variant images.
Product header
The product's title, with its vendor in small text above it and the price under it. Show vendor shows or hides the vendor. It shows nothing for a product with no vendor.
A compare-at price shows struck through after the price, with a Save tag that shows the difference. When the selected variant is sold out, a Sold out tag follows the price. A unit price, such as a price per 100 g, shows under the price when the variant has one. The price changes when the customer picks another variant or a subscription plan.
Description
The product's description from its page in your Shopify admin. A product with no description shows nothing here.
Product metrics
Values from the product's metafields, such as how strong a coffee is, in two columns. A rating metafield shows as a bar with its score, such as 4/5, or as a row of dots when Metric style in Theme settings > Product cards is set to Dots. With dots, each metric's label and value sit on one line. A number, a measurement, a price, a yes or no value, or text shows as a label and its value.
In Metrics metafields, enter one metafield per line as its namespace and key, such as custom.body. To change the label, add a vertical bar and the label: custom.body | Body. The default lines are custom.body and custom.acidity. A product with none of these metafields set shows nothing here. Show product ratings as bars or dots explains how to create the metafields.
Variant option
The choices for one option, such as Size or Color. The block shows nothing for a product with only one variant.
Setting
What it does
Option name
The option this block shows, as it is named in the product's Variants section, such as Size. Upper and lower case do not matter. Leave it empty to show every option in this one block.
Show label
Shows the option's name above its choices.
Style
Buttons, the default, shows each value as a button in a row. Dropdown shows a box with the selected value that opens a list. Swatch shows each value as a colored circle, and its name shows when the pointer is over it. Variant image shows each value as a square photo of its variant, and the selected value's name follows the option name.
A block with an Option name shows only that option, so a product whose options have other names shows no choices from it. Checkmate's default product page has blocks for options named grind, color and denominations, the last one for the amounts of a gift card. If your products use other option names, change the Option name in these blocks, or leave one block's name empty. My product page doesn't show size or color choices walks through the fix.
Two or more Variant option blocks placed one after the other sit side by side in one row. To set up colored circles, see Show color swatches for variants.
Purchase options
The choice between a one-time purchase and a subscription. It shows only for a product with subscription plans, which a subscriptions app adds. A One-time purchase choice comes first, unless the product can only be bought as a subscription. Show label shows the heading Purchase options above the choices. Sell subscriptions covers the set-up.
Buy buttons
A quantity box with minus and plus buttons, and the Add to cart button beside it. When the selected variant is sold out, the button reads Sold out and can't be clicked. The quantity can't go above the stock left for a variant that stops selling when it is out of stock, counting what is already in the cart. For a gift card product, this block also shows fields for the recipient's email, name and message. Sell gift cards has the details.
Setting
What it does
Button style
Primary, the default, fills the button with your primary button color. Secondary shows the page background with a thin border. Accent shows no fill and a border in your accent color. Color settings sets these colors.
Button size
S, M or L, the default.
Sticky buy bar
A bar at the bottom of the screen that keeps the buy buttons in view. On mobile and desktop is the default. On mobile shows it only on screens narrower than 1000 px. Off never shows it.
Show dynamic checkout buttons
Shows Shopify's express checkout buttons, such as Shop Pay, under Add to cart. Which buttons show depends on the payment methods your store accepts.
On screens narrower than 1000 px, the sticky buy bar spans the bottom of the screen and stays there. It holds the Add to cart button, and Buy it now when Show dynamic checkout buttons is on, in place of the buttons under the options. Once the product is in the cart, its Add to cart button turns into minus and plus buttons that change the quantity in the cart.
On a computer, the bar sits in the bottom right corner, with the product's photo, title, selected variant, price and a round add button. It slides in once the Add to cart button has scrolled off the top, and it hides while the footer is in view.
On every screen, the bar hides while Shopify's cookie banner is open, so it never covers it. It never shows in quick view.
Under the buttons, the block also shows the line that says tax is included when your prices include tax, and the installments message from Shop Pay when your store offers it. A variant with quantity rules or volume pricing lists them there too.
Pickup availability
A line that says whether the selected variant can be picked up at one of your locations, with the location's name and its usual pickup time. Its Check availability at other stores link opens a panel that lists every pickup location. The block hides when no location offers pickup for the variant. Show local pickup availability covers the set-up in your Shopify admin.
View details link
A link with an arrow that opens the product's own page. It is made for quick view, the popup that opens from the eye button on a product card, where it stays at the bottom of the popup. On the product page itself, it links to the page the customer is already on. Button label sets its text. The default is View full details.
Info card
A Heading and up to four rows of short text, each with an icon. Style sets how they look. Card, the default, shows the heading and the rows in a box with a thin border. List shows the rows alone, in small, lighter text with small icons, and screen readers still read the heading. The default product page uses List.
For each row, choose an icon in Row 1 icon to Row 4 icon and enter its text in Row 1 text to Row 4 text. The icons are Clock, Truck, Cup, Box, Leaf and Heart, or None. A row with no text is hidden. The text is the same for every product that uses the template.
Custom liquid
Liquid code or HTML that you write, shown in the right column. It shows nothing when the field is empty. Add custom code explains what you can put in it.
Complementary products
A row of product cards under a Heading, with products that go well with this one. You choose them for each product in Shopify's Search & Discovery app. Maximum products sets how many show, from 2 to 8. The default heading is Often bought with.
Related products
A row of product cards similar to this one, which Shopify picks for you. Heading and Maximum products work as in Complementary products. The default heading is You may also like.
An app that adds a block, such as a reviews widget, shows in the Add block list of this section. App blocks sit in the right column with the others. Add an app to your store explains where apps can go.
Quick view
Quick view shows a short version of this section in a popup. It is the copy of the Product information section in the template named quick-view, not the one on your product page, so a change to your product page does not change quick view. To change quick view, select that template under Products at the top of the editor.
In quick view, the photos are a row customers swipe through, and there are no breadcrumbs, thumbnails or sticky buy bar. Do not assign the quick-view template to a product. A product page looks like a popup explains what happens if you do. Let customers add to cart from product cards covers when quick view opens.
The Product information section is the top of every product page: the product's photos, its title and description, the choices a customer makes, and the Add to cart button. It comes with every product template. If you removed it, open a product template in the editor, click Add section and select Product information. It can't go on other pages.
On a computer, the photos fill the left column, and the right column holds the blocks. That column stays in view while customers scroll past the photos. On screens narrower than 1000 px, the blocks follow under the photos, and with the default Layout of the Media block, the photos become a row that customers swipe through.
Section settings
Show breadcrumbs shows a trail of links above the photos and the title: Home, then the collection the customer came from, then the product. When the customer did not come from a collection, the trail shows the first collection the product is in. It is on by default.
Blocks
Every block below goes in the Product information section. Click Add block in the section to add one, and drag blocks to change their order in the right column. The Media block always sits in the photo column, wherever you drag it.
Checkmate's default product page holds, in this order: Media, Product header, Description, Product metrics, three Variant option blocks, Purchase options, Buy buttons, Pickup availability, Info card and Complementary products. The Lair and Fang styles, the looks you can start Checkmate from, ship their own product page with other blocks. Theme styles compares them.
There is no price block. The price shows under the title, in the Product header block. The quantity box is part of the Buy buttons block.
In the editor sidebar, the blocks are listed under Product information, in the order they have in the right column.
Media
The product's photos, videos and 3D models, in the order they have in the product's Media section in your Shopify admin. A customer clicks a photo to see it full screen, where they can swipe from photo to photo and zoom in. An uploaded video plays in its tile with controls. A YouTube or Vimeo video and a 3D model show a still image with an icon, and load when clicked. On a device that supports it, a 3D model also shows a View in your space button.
Setting
What it does
Media source
Featured media + gallery, the default, shows every item, arranged by Layout. Featured media only shows one photo, and switches it when the customer picks a variant with its own photo. Specific media shows one item at the position you set, whatever the variant.
Layout
How the items are arranged: Stacked, the default, Thumbnails or Carousel. Each one is described under this table. Shows when Media source is Featured media + gallery.
Only the selected variant's media
Shows only the items that belong to the selected variant. Off by default. Shows when Media source is Featured media + gallery.
Media number
The position of the item in the product's media list, from 1 to 12. The block shows nothing for a product with fewer items. Shows when Media source is Specific media.
Image ratio
The shape of each tile. Square is the default. Portrait is 4 by 5 and Landscape is 16 by 9. These three crop the photo to fill the tile. Natural keeps each photo's own shape.
Show wishlist button
Adds a round heart button on the top right corner of the photos, which saves the product to the customer's wishlist. Off by default. Let customers save products to a wishlist explains where the list is kept.
Show share button
Adds a round share button to the left of the heart. It opens the Share section, or the phone's own share menu on a touch screen. Off by default.
The default product page has Show wishlist button and Show share button on.
Choose a gallery layout
Stacked (default)
Thumbnails
Carousel
Screens 1,000px and wider
Every item in a column, the selected variant's item first
One large item, with a column of small photos to its left
One item at a time, with arrows and dots
Smaller screens
A row customers swipe through, with dots
One large item, with the small photos to its left, or in a row under it below 768 px
A row customers swipe through, with dots
With Thumbnails, customers click a small photo to show it large. For a product with only one item, it looks the same as Stacked.
With Carousel, the arrows show when the pointer is over the photo, and the dots sit on the photo in a white pill. On a computer, the photo stays in view while customers scroll the right column. When a customer picks a variant, the carousel moves to that variant's item.
Show each variant's own photos
With Only the selected variant's media on, each variant shows only its own items. A variant gets its own image in the product's Variants section in your Shopify admin. In the product's Media list, that image starts the variant's group, and the items after it, up to the next variant's image, belong to the same variant. Items before the first variant's image show with every variant. Order the media in your Shopify admin to match. The setting changes nothing for a product with fewer than two variant images.
Product header
The product's title, with its vendor in small text above it and the price under it. Show vendor shows or hides the vendor. It shows nothing for a product with no vendor.
A compare-at price shows struck through after the price, with a Save tag that shows the difference. When the selected variant is sold out, a Sold out tag follows the price. A unit price, such as a price per 100 g, shows under the price when the variant has one. The price changes when the customer picks another variant or a subscription plan.
Description
The product's description from its page in your Shopify admin. A product with no description shows nothing here.
Product metrics
Values from the product's metafields, such as how strong a coffee is, in two columns. A rating metafield shows as a bar with its score, such as 4/5, or as a row of dots when Metric style in Theme settings > Product cards is set to Dots. With dots, each metric's label and value sit on one line. A number, a measurement, a price, a yes or no value, or text shows as a label and its value.
In Metrics metafields, enter one metafield per line as its namespace and key, such as
custom.body. To change the label, add a vertical bar and the label:custom.body | Body. The default lines arecustom.bodyandcustom.acidity. A product with none of these metafields set shows nothing here. Show product ratings as bars or dots explains how to create the metafields.Variant option
The choices for one option, such as Size or Color. The block shows nothing for a product with only one variant.
Setting
What it does
Option name
The option this block shows, as it is named in the product's Variants section, such as
Size. Upper and lower case do not matter. Leave it empty to show every option in this one block.Show label
Shows the option's name above its choices.
Style
Buttons, the default, shows each value as a button in a row. Dropdown shows a box with the selected value that opens a list. Swatch shows each value as a colored circle, and its name shows when the pointer is over it. Variant image shows each value as a square photo of its variant, and the selected value's name follows the option name.
A block with an Option name shows only that option, so a product whose options have other names shows no choices from it. Checkmate's default product page has blocks for options named
grind,coloranddenominations, the last one for the amounts of a gift card. If your products use other option names, change the Option name in these blocks, or leave one block's name empty. My product page doesn't show size or color choices walks through the fix.Two or more Variant option blocks placed one after the other sit side by side in one row. To set up colored circles, see Show color swatches for variants.
Purchase options
The choice between a one-time purchase and a subscription. It shows only for a product with subscription plans, which a subscriptions app adds. A One-time purchase choice comes first, unless the product can only be bought as a subscription. Show label shows the heading Purchase options above the choices. Sell subscriptions covers the set-up.
Buy buttons
A quantity box with minus and plus buttons, and the Add to cart button beside it. When the selected variant is sold out, the button reads Sold out and can't be clicked. The quantity can't go above the stock left for a variant that stops selling when it is out of stock, counting what is already in the cart. For a gift card product, this block also shows fields for the recipient's email, name and message. Sell gift cards has the details.
Setting
What it does
Button style
Primary, the default, fills the button with your primary button color. Secondary shows the page background with a thin border. Accent shows no fill and a border in your accent color. Color settings sets these colors.
Button size
S, M or L, the default.
Sticky buy bar
A bar at the bottom of the screen that keeps the buy buttons in view. On mobile and desktop is the default. On mobile shows it only on screens narrower than 1000 px. Off never shows it.
Show dynamic checkout buttons
Shows Shopify's express checkout buttons, such as Shop Pay, under Add to cart. Which buttons show depends on the payment methods your store accepts.
On screens narrower than 1000 px, the sticky buy bar spans the bottom of the screen and stays there. It holds the Add to cart button, and Buy it now when Show dynamic checkout buttons is on, in place of the buttons under the options. Once the product is in the cart, its Add to cart button turns into minus and plus buttons that change the quantity in the cart.
On a computer, the bar sits in the bottom right corner, with the product's photo, title, selected variant, price and a round add button. It slides in once the Add to cart button has scrolled off the top, and it hides while the footer is in view.
On every screen, the bar hides while Shopify's cookie banner is open, so it never covers it. It never shows in quick view.
Under the buttons, the block also shows the line that says tax is included when your prices include tax, and the installments message from Shop Pay when your store offers it. A variant with quantity rules or volume pricing lists them there too.
Pickup availability
A line that says whether the selected variant can be picked up at one of your locations, with the location's name and its usual pickup time. Its Check availability at other stores link opens a panel that lists every pickup location. The block hides when no location offers pickup for the variant. Show local pickup availability covers the set-up in your Shopify admin.
View details link
A link with an arrow that opens the product's own page. It is made for quick view, the popup that opens from the eye button on a product card, where it stays at the bottom of the popup. On the product page itself, it links to the page the customer is already on. Button label sets its text. The default is View full details.
Info card
A Heading and up to four rows of short text, each with an icon. Style sets how they look. Card, the default, shows the heading and the rows in a box with a thin border. List shows the rows alone, in small, lighter text with small icons, and screen readers still read the heading. The default product page uses List.
For each row, choose an icon in Row 1 icon to Row 4 icon and enter its text in Row 1 text to Row 4 text. The icons are Clock, Truck, Cup, Box, Leaf and Heart, or None. A row with no text is hidden. The text is the same for every product that uses the template.
Custom liquid
Liquid code or HTML that you write, shown in the right column. It shows nothing when the field is empty. Add custom code explains what you can put in it.
Complementary products
A row of product cards under a Heading, with products that go well with this one. You choose them for each product in Shopify's Search & Discovery app. Maximum products sets how many show, from 2 to 8. The default heading is Often bought with.
Related products
A row of product cards similar to this one, which Shopify picks for you. Heading and Maximum products work as in Complementary products. The default heading is You may also like.
When a product has no complementary products, the Complementary products block shows related products instead. Both blocks hide when Shopify has no products to suggest. Recommend other products on the product page covers both. If one stays empty, see Related or complementary products don't show.
App blocks
An app that adds a block, such as a reviews widget, shows in the Add block list of this section. App blocks sit in the right column with the others. Add an app to your store explains where apps can go.
Quick view
Quick view shows a short version of this section in a popup. It is the copy of the Product information section in the template named
quick-view, not the one on your product page, so a change to your product page does not change quick view. To change quick view, select that template under Products at the top of the editor.In quick view, the photos are a row customers swipe through, and there are no breadcrumbs, thumbnails or sticky buy bar. Do not assign the
quick-viewtemplate to a product. A product page looks like a popup explains what happens if you do. Let customers add to cart from product cards covers when quick view opens.More on product pages
The sections under this one, such as Facts and Specifications, can show each product's own details. How each product gets its own content explains which ones do. To give some products a different page, see Use a different layout for some products.