Product pages

Product pages are where you display information about the products that you sell on your store, and where your customers can buy the products from.

By default, product pages have a Product information section and a Related products section in the theme editor.

Product information section

The Product information section displays the details of your products, such as the title, description, price, and images.

Product information section settings

The settings for the Product information section

Setting	Description
Enable sticky content on desktop	When scrolling down a page, the product information column doesn't begin scrolling until all images have been scrolled through.
Color scheme	A set of colors that you can apply to this section. Learn more about color schemes.
Desktop media width	Set the width of your product media on the product page for desktop computers. Choose from Small, Medium, or Large.
Constrain media to screen height	Selecting this option sets a maximum media height based on the height of the browser window of any device.
Media fit	Select Original to maintain the media's original aspect ratio or Fill to fit the media to its container.
Desktop layout	Set the layout of your product media on desktop computers. Choose from the following options: Stacked - Displays your product media stacked vertically on the page. When you click a stacked media type, you open a pop-up dialog with a larger display of the selected media. 2 columns - Displays your product media as stacked but across two columns. Thumbnails - If a product has more than one image or other media type, then the remaining media are displayed as thumbnails below the main product media. The customer can click any thumbnail to display it as the main product media. Thumbnail carousel - If a product has more than one image or other media type, then the remaining media are displayed as thumbnails in a carousel below the main product media. The customer can click any thumbnail to display it as the main product media, or use the carousel navigation arrows to display other media.
Desktop media position	Select whether to have the product media displayed on the left side of the page or the right side of the page on desktop computers.
Image zoom	Choose how the image zooms on desktop: Open lightbox - The customer can click to display a larger version of the image. This is the default functionality for product media displayed on mobile devices. Click and hover - The customer can click to zoom in on the image, then hover to view different sections zoomed in. Zoom on hover is deactivated when the enlarged image is clicked again or when the cursor leaves the image's container. When this setting is activated and the user is on a mobile device, the image will default to opening in a modal (lightbox) when clicked. No zoom - This option deactivates the zoom on images. It is suitable for images that aren't high resolution and don't display well when zoomed in.
Mobile layout	Set the layout of your product media on mobile devices. Choose from the following options: 2 columns - Displays two product media side by side, with carousel functionality to scroll across and view other product media. Show thumbnails - Displays a single main product media, with thumbnail carousel scrolling below. Hide thumbnails - Displays a single main product media, with carousel scrolling below but the thumbnails aren't displayed.
Hide other variants' media after selecting a variant	When a variant is selected, the images of other variants are hidden from view. The images reappear when a variant is deselected.
Enable video looping	For any videos that you have in your product media, this setting plays the video in a loop so that it replays automatically when it finishes.
Top padding	Set the amount of space at the top of the section.
Bottom padding	Set the amount of space at the bottom of the section.

As well as the Product information section settings, you can also view and customize some of the Theme Settings for product badges, and you can add your own section-specific Custom CSS.

Product information blocks

You can use the following blocks with the Product information section:

• Text
• Title
• Price
• Variant picker
• Quantity selector
• Buy buttons
• Description
• Share
• SKU
• Inventory status
• Custom Liquid
• Collapsible row
• Pop-up
• Product rating
• Complementary products
• Icon with text

Text block

The Text block can be used to display static text, or variable data using dynamic sources. For example, you might add text displaying a marketing message, such as Free shipping for orders over $100 USD, which then displays on each product. You might also add a dynamic source, such as the product's Vendor field, which can change depending on which product is being viewed.

The settings for the Text block in the Product information section

Setting	Description
Text	A text field to add extra information to the product page.
Text style	Change the style of the text. Choose from the following options: Body - Changes the text to paragraph-style text. Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text. Uppercase - Changes the text to be smaller than paragraph-style text, and puts all the text in capital letters.

Title block

The Title block displays the title of the product that's being viewed. This block has no customizable settings.

Price block

The Price block displays the pricing information of the product that's being viewed, such as the price and compare-at price. This block has no customizable settings.

Variant picker block

The Variant picker block displays any variant options for the product that's being viewed. The variant picker displays only for products that have variant options. If you remove this block and you have products with variant options, then your customers can't choose or purchase the variant option that they want.

The settings for the Variant picker block in the Product information section

Setting	Description
Style	Choose how your product variants are displayed to customers. Choose from the following options: Dropdown - Displays the variant options in drop-down menus. These can be displayed as a swatch or text only. Pills - Displays the variant options as buttons that you can select. These can be displayed as a swatch or text only.
Swatch	Choose how your color swatches are displayed to customers. Choose from the following options: Circle - Displays the color swatch as a circle that you can select. Square - Displays the color swatch as a square that you can select. None - No color swatches are displayed.

Quantity selector block

The Quantity selector block displays a clickable and editable number field that customers can use to change how many units of a product they want to purchase. This block has no customizable settings.

Buy buttons block

The Buy buttons block displays the Add to cart button and any pickup in store information. It can also display any dynamic checkout buttons that you have on your store.

The settings for the Buy buttons block in the Product information section

Setting	Description
Show dynamic checkout buttons	Displays any dynamic checkout options that you've activated in your Payments settings.
Show recipient information form for gift cards	Displays an optional checkbox on any gift card products that you have, to let customers send and schedule a gift card to a recipient along with a personal message.

Description block

The Description block displays the description of the product that's being viewed. This block has no customizable settings.

Share block

The Share block displays a clickable link that lets customers share the product on their social media.

The settings for the Share block in the Product information section

Setting	Description
Text	The text that customers click to share the product to their social media.

SKU block

The SKU block displays the Stock Keeping Unit (SKU) associated with the product or variant, when relevant. Learn more about adding SKU numbers to your product variants.

The settings for the SKU block in the Product information section

Setting	Description
Text style	Change the style of the text. Choose from the following options: Body - Changes the text to paragraph-style text. Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text. Uppercase - Changes the text to be smaller than paragraph-style text, and puts all the text in capital letters.

Inventory status block

The Inventory status block displays the inventory status of the product. You can permanently display the inventory status and remaining inventory number, or only display it after the product inventory count reaches a threshold that you set. The inventory status displays only for products that have inventory tracking activated.

The settings for the Inventory status block in the Product information section

Setting	Description
Text style	Change the style of the text. Choose from the following options: Body - Changes the text to paragraph-style text. Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text. Uppercase - Changes the text to be smaller than paragraph-style text, and puts all the text in capital letters.
Low inventory threshold	Use the range slider to set a threshold for when your products are displayed with a Low stock message. Choose a number between 0 and 100. If you set the slider to 0, then In stock displays until the product's completely out of stock.
Show inventory count	Select this option when you want to display the inventory count for your products.

Custom Liquid block

The Custom Liquid block displays custom Liquid or HTML code that you add to the block.

The settings for the Custom Liquid block in the Product information section

Setting	Description
Liquid code	Displays the content that's rendered by the Liquid or HTML code that you enter.

Collapsible row block

The Collapsible row block displays an extendable and collapsible row with a title. When a customer clicks the icon, title, or downward arrow, the row expands to display additional content.

The settings for the Collapsible row block in the Product information section

Setting	Description
Heading	The title of the row, which displays when the row is both collapsed and expanded.
Icon	Select an icon to display with the collapsible row, or select None to display only the title of the row.
Row content	Enter the content for your row using the rich text editor. The content displays only when the row is expanded.
Row content from page	Add content from a page into your row. This displays only the content that you add to a page in the Online Store > Pages section of your Shopify admin. It doesn't display any content that you add in the pages template in the theme editor. Any content that you enter in the Row content field displays above the page content that you add.

Pop-up block

The Pop-up block displays clickable text that opens a pop-up dialog when clicked.

The settings for the Pop-up block in the Product information section

Setting	Description
Link label	The clickable text that customers click to display the pop-up dialog.
Page	Select the page that you want to display content from in the pop-up dialog. This displays only the content that you add to a page in the Online Store > Pages section of your Shopify admin. It doesn't display any content that you add in the pages template in the theme editor.

Product rating block

The Product rating block displays the average product rating in stars with the number of reviews in parentheses, for example: ★★★★★ (8).

To displaying product ratings, you need to use a product reviews app, and metafield definitions for reviews.rating_count and reviews.rating.

This block has no customizable settings.

Complementary products block

The Complementary products block displays complementary products that you set up with the Shopify Search & Discovery app.

Note

Complementary products need to be In stock and set to Active or the Shopify Search & Discovery app will filter them out.

The settings for the Complementary products block in the Product information section

Setting	Description
Heading	The title of the block.
Show as collapsible row	When selected, the content displays as collapsed within a row. When a customer clicks a title, the row expands to display additional content.
Icon	Select an icon to pair with your title when complementary products are displayed within a collapsible row.
Maximum products to show	Select the maximum number of complementary products to display. Choose a number between 1 and 10.
Number of products per page	Select the number of complementary products that you want to display per slider page. Choose a number between 1 and 4.
Pagination style	Set the style of the slider navigation that displays below the products. Choose from Dots, Counter, or Numbers.
Image ratio	Set the aspect ratio of the product card images. Choose from Portrait or Square.
Enable quick add button	If you activate the quick add button, then your customers can add an item to their cart from the product card with one of the following options: Add to cart - For single-variant products. When a customer clicks the button, the product is automatically added to their cart. Choose options - For products with variants. When a customer clicks the button, a pop-up dialog displays for them to make their variant selection and then proceed with the purchase.

Icon with text block

The Icon with text block displays up to 3 icons with accompanying text. Choose from a list of preinstalled icons, or use an image that you upload.

The settings for the Icon with text block in the Product information section

Setting	Description
Layout	Choose between a Horizontal or Vertical layout for the block.
First icon	Select an icon to display in the block, or select None to display only a title.
First image	Choose your own image to use instead of an icon.
First heading	Add a title for your first icon or image.
Second icon	Select an icon to display in the block, or select None to display only a title.
Second image	Choose your own image to use instead of an icon.
Second heading	Add a title for your second icon or image.
Third icon	Select an icon to display in the block, or select None to display only a title.
Third image	Choose your own image to use instead of an icon.
Third heading	Add a title for your third icon or image.

Related products section

Based on the product that's being viewed, the Related products section displays similar products, products with a similar description, or products that are frequently bought together with the product that's being viewed. You can manually add your own products to the Related products section by using the Shopify Search & Discovery app.

To learn more about product recommendations, refer to Understanding product recommendations.

Related products section settings

The settings for the Related products section

Setting	Description
Heading	The title of the section.
Heading size	The size of the title text. Choose from Small, Medium, Large, Extra Large, or Extra extra large.
Maximum products to show	Set the maximum number of related products to display. Choose a number between 2 and 10.
Number of columns on desktop	Set the number of columns for the products to display across on desktop computers. Choose a number between 1 and 6.
Color scheme	A set of colors that you can apply to this section. Learn more about color schemes.
Image ratio	Set the image ratio for the featured images of the related products that are displayed. Choose from the following options: Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped. Portrait - Crops the images to use a 2:3 ratio. Square - Crops the images to use a 1:1 ratio.
Image shape	Choose one of the following image shapes for your related product images: Default - Changes your product image into a rectangle shape. Arch - Curves the top of your product image. Blob - Rounds your product image into one of six random blob shapes that has a unique animation on hover. Chevron left - Changes your product image into a chevron shape that has a sharp bend to the left. Chevron right - Changes your product image into a chevron shape that has a sharp bend to the right. Diamond - Changes your product image into a four-sided diamond shape. Parallelogram - Changes your product image into a shape that has two pairs of parallel lines. Round - Rounds your product image into a circle or oval shape that has a unique animation on hover.
Show second image on hover	When a customer hovers their cursor over product images on a desktop computer, this option displays the second product image if the product has one.
Show vendor	Displays the vendor for each product.
Show product rating	Displays the average product rating in stars with the number of reviews in parentheses, for example: ★★★★★ (8). This also requires a product reviews app, and metafield definitions for reviews.rating_count and reviews.rating.
Number of columns on mobile	Set the number of columns for the products to display across on mobile devices. Choose 1 column or 2 columns.
Top padding	Set the amount of space at the top of the section.
Bottom padding	Set the amount of space at the bottom of the section.