Product pages

This guide describes setting up the Product pages section.

Use the section to set what's displayed on default or two column Product pages.

​

​The previous image shows a Product pages section on a store's default Product page. In the upper left, part of Theme editor's section menu is displayed. In the menu, an Information list block is added to the section. On the right, the block applies a table layout to display information about the product, including the artist's name and country of origin.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up a Product pages section

To set up a Product pages section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page the contains a Product pages section. For example, select Products > Default product.

   Note

   The section is available only on the Products > Default product and Products > Two column pages.

2. From the side menu, select Product pages.

3. Select a setting described in the following table.

Setting name	Description
Desktop media width	Use the Desktop media width options to specify a width for the section's media area. The options are One third, One half, Three fifths, and Two thirds. This option applies to desktop display devices.
Desktop media position	Use the Desktop media position option to position the section's media area on the Left or Right. This option applies to desktop display devices.
Enable two media per row on desktop	Use the Enable two media per row on desktop option to turn "Two media per row" mode on or off. With this option enabled, two product media items are displayed in each row inside the section's media area. For a product with an odd number of media items, the section displays the product's first media item at full width. This option applies to desktop display devices.
Full width first media on desktop	Use the Full width first media on desktop option to turn "Full width first media" mode on or off. With this option enabled, the section displays a product's first media item at full width. This option applies to desktop display devices. To use this option, enable the Enable two media per row on desktop option.
Product variants > Select the first available variant	Set the Select the first available variant option to on or off. With this option enabled, the first available product variant is selected automatically when customers view the product. With this option off, adding to the cart is not possible until each product option has a selection. With this option off and the Theme settings > Products > Availability display mode option set to Adjacent, sold-out styling is not applied until selections for all options have been made.
Product variants > Variant media change behavior on desktop	Use the Variant media change behavior on desktop option to specify a behavior for the section's media area. The behavior applies when a store visitor selects a product variant inside the section. This option applies to desktop display devices. With the Swap with first media option, the section's media area displays product media items for all variants - arranged in a column layout. The item displayed at the top of the column is the first product media item that's associated with the currently selected product variant. When a store visitor selects a different product variant, the item displayed at the top of the column changes to match the newly selected variant. With the Scroll to media option, the section's media area displays product media items for all variants - arranged in a column layout. The item displayed at the top of the column is the first product media item that's associated with the currently selected product variant. When a store visitor selects a different product variant, a scroll animation effect moves to display the first media item that's associated with the newly selected variant.
Product variants > Always show product featured media first	Set the Always show product featured media first option to on or off. With this option enabled, the section always displays a product's featured media first. To use this option, enable the Select the first available variant option.
Product variants > Single variant mode	Set the Single variant mode option to on or off. With this option enabled, the section's media area displays a single product media item only. The displayed item is the first product media item associated with the currently selected product variant. When a store visitor selects a different product variant, the displayed item changes to match the newly selected variant. By default, Single variant mode applies to products with no variants. Enabling this option overrides the section's Variant media change behavior on desktop option. Due to a hard limitation on the Shopify platform, variant media features do not work if a product has more than 250 variants. For products with more than 250 variants, instead of using variant media, set up a separate product for each product variant, add your required media to each product, and then link sibling products using our Product groups feature. Refer to Link related products with Product groups.
Product variants > Enable multiple variant media	Use the Enable multiple variant media option to show or hide multiple media inside the section for products with variants. Due to a hard limitation on the Shopify platform, variant media features do not work if a product has more than 250 variants. For products with more than 250 variants, instead of using variant media, set up a separate product for each product variant, add your required media to each product, and then link sibling products using our Product groups feature. Refer to Link related products with Product groups.
Media > Enable image zoom	Use the Enable image zoom option to show or hide a panel that contains product images. The panel opens when a product's image is selected inside the section. The panel provides zoom in and out for images, arrow icons for navigating between images, and an X icon to close the panel.
Media > Enable video looping	Use the Enable video looping option to turn continuous replay on or off for videos inside the section. With this option off, the video plays once. Refer to Shopify help: Product media.
Media > Enable video autoplay	Use the Enable video autoplay option to turn automatic playback on or off for videos inside the section. Videos are muted during automatic playback. This option does not apply to videos hosted on YouTube or Vimeo.
Product form area > Max width of content	Use the Max width of content option to apply a Full, Wide or Narrow width to content inside the section's product form area.
App blocks > Space above	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the section's app content area. Note that this option is disabled if app content is positioned at the top of the column.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Color > Use this color scheme for header and footer	Select the Use this color scheme for header and footer option to turn "header and footer color" mode on or off. With this option enabled, the color scheme you choose for the section is also applied to the product page’s header and footer. This option applies only to the product template.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.

Configure a block within a Product pages section

A default Product pages section contains six product blocks. To configure a block inside the section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page the contains a Product pages section. For example, select Products > Default product.

2. From the side menu, expand the Product pages section menu.

3. To configure an existing block, select the block from the side menu.

   To add a new block, select Add block, choose a block to add, and then select the block you added.

   Note

   Inside the section, you can add, remove, show/hide, or move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.

4. Apply a block setting described in the Table: Product pages blocks.

Table: Product pages blocks

The following table describes the blocks inside the Product pages section, and their corresponding settings.

Some blocks have No customizable settings available. The blocks indicated with an asterisk * are contained in a default Product pages section. To configure a block, refer to Configure a block within a Product pages section.

Block name	Block description	Block setting(s)
Title *	Displays a product's title inside the section.	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Price *	Displays a product's price inside the section.	Use the Font and text size option to apply the Body, Standard heading, Feature heading, or Secondary heading font and text size to the block's price text. Set the Show discount tag option to on or off. With this option enabled, a discount tag is displayed on products with a sale price. Use the Type option to display a Percentage or Fixed-amount inside discount tags. To use this setting, enable the Show discount tag option. Set the Use accent color option to on or off. With this option enabled, the accent color from the section's current color scheme is applied to discount tag text. To use this option, enable the Show discount tag option. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Variant picker *	Displays product options or a "variant" picker for choosing variations of a product, inside the section.	Use the Options style setting to apply a Button, Text with underline, Radio, or Drop-down style to the product options picker inside the block. Use the Full width buttons option to turn "full width" mode on or off. With this option enabled, buttons occupy the full width of the block. To use this option, set Options style to Button. Use the Spread options setting to turn "spread" mode on or off. With this option enabled the list of options are spread out to occupy the width of the block. To use this option, set Options style to Text with underline. Set the Hide option labels option to on or off. With this option off, labels are displayed for product options inside the block. Use the Hide sold out or unavailable variants option to show or hide variant options inside the block, for product variants that are currently out of stock or not available for purchase. Enabling this option and setting the Theme settings > Products > Availability display mode option to Adjacent may result in some product option combinations being unreachable. Please consider turning one or the other off. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Quantity selector *	Displays a quantity selector, inside the section, for choosing the number of products to purchase.	Use the Style option to apply a Border or Underline style to the block's quantity picker. Set the Fill column width option to on or off. With this option enabled, the quantity picker occupies the full width of the block. To use this option, set the Style option to Border. Set the Hide label option to show or hide a text label for the block's quantity picker. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Buy buttons *	Displays the Add to cart and Buy it now buttons inside the section.	Use the Show installments option to show or hide Shopify's Shop Pay installments options inside the block. Refer to Shopify help: Shop Pay installments. Set the Show dynamic checkout button option to show or hide a button with the customer's preferred payment method, beside the block's Add to cart button. Refer to Shopify help: Dynamic checkout buttons. Set the Fill column width option to on or off. With this option enabled, the block's Add to cart and Buy it now buttons occupy the full width of the block. Full width buttons are visible when the column is wider than the button’s minimum width. Set the Show total price option to on or off. With this option enabled, the product's total price is displayed inside the block's Add to cart button. Note that showing the price inside the button hides the button's default right arrow icon. Use the Character option to select ·, •, ↑, →, ↓, and more. The character you choose is displayed as a separator between the block's Add to cart button's label text and price. Adjust the Repeat character slider between 1x and 3x to specify how many separator characters to display between the block's Add to cart button's label text and price. Use the Show pickup availability option to show or hide indicators, inside the block, for products that can be collected from your store's pickup locations. Refer to Shopify help: Show pickup availability to your customers. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block's pickup availability area. To use this option, enable the Show pickup availability option. Use the Show recipient information form for gift card products option to show or hide the block's recipient information form. With this setting enabled, visitors who purchase a gift card from your store can use the form to send the gift card by providing the recipient's email address. Visitors can also enter a personal message, and send the message to the gift card's recipient. Refer to Add recipient fields to your gift card product. Use the Show quantity selector option to show or hide a quantity selector inside the block. If you enable this option, do not add a separate Quantity selector block to the product section. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Description *	Displays a text area to contain a product's description text inside the section.	Set the Truncate description option to on or off. With this setting enabled, a Read more button is displayed inside the block. Selecting the button opens an expanded text area that contains a product's description text. This setting is useful for products with variant images and longer descriptions. Adjust the Maximum words before truncation slider between 10 and 100. This setting controls how many words are shown before product description text is truncated. To use this setting, enable the Truncate description option. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Product group	Displays a customizable product picker inside the section for selecting sibling products from within a product group.	In the Product group metafield key field, enter a namespace and key for a product group metafield. For example, enter custom.product_group. Refer to Link related products with Product groups. In the Product display title metafield key field, enter a namespace and key for a product display title metafield. The values from the metafield are displayed instead of the product title inside the block. Refer to Link related products with Product groups. Use the Options style setting to choose a style for the product picker inside the block. The options include Button, Swatches, Thumbnails, and more. Use the Hide label option to show or hide a text label for the block's picker. Use the Full width buttons option to turn "full width" mode on or off. With this option enabled, buttons occupy the full width of the block. Note that for Swatches and Thumbnails option styles, the Full width buttons option applies only when the Show value option is enabled. Use the Show value option to show or hide corresponding values inside the block. To use this option, set Options style to Swatches or Thumbnails. Use the Spread options setting to turn "spread" mode on or off. With this option enabled the list of options are spread out to occupy the width of the block. To use this option, set Options style to Text with underline. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Vendor	Displays the name of a product's vendor inside the section.	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Complementary products	When a customer selects a product from your store, the block displays related products inside the section. To set up complementary products, install the Shopify search & discovery app, and refer to Shopify developer help: Product recommendations.	In the Heading field, enter a single line of text to display as a title inside the block. Use the Heading text style options to apply the Heading or Body text style to the block's heading. Use the Product tile type option to select Standard or Text overlay. This setting specifies the type of product tile to display inside the block. With Standard product tiles, product details, like product title and price, are displayed below the block's product images. With Text overlay product tiles, product details overlay the block's product images. Adjust the Maximum products to show slider between 1 and 10. This option sets the maximum number of complementary product suggestions to display inside the block. Use the Products per row on desktop options to show 2 or 3 products in each row, within the block, on desktop displays. Use the Products per row on mobile options to show 1 or 2 products in each row, within the block, on mobile displays. Use the Enable quick buy option to show or hide a Choose options button on product tiles inside the block. A store visitor uses the button to choose product options, like variants, to add to their cart. To use this option, set the Product tile type to Standard. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Inventory status	Displays a text indicator of a product's availability, inside the section.	Adjust the Low inventory threshold slider between 0 and 100. When the in-stock quantity of a product is greater than the slider value, the text Ready to ship is displayed inside the block. Otherwise, the block displays the text "Only n in stock". n is the in-stock quantity of the product. Use the Show low inventory count option to show or hide a count of remaining stock inside the block when stock is at or below the threshold. With this option enabled, the block displays the text "Only n in stock". n is the in-stock quantity of the product. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Location inventory status	Displays the quantity of a product that's available in each of your store's inventory locations, inside the section.	Use the Locations to show options to select All locations or In stock locations only. This option specifies the inventory locations to use for displaying the quantity of available product. Refer to Shopify help: Assigning inventory to locations. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Text	Displays a text area to contain additional product information, inside the section.	In the Text field, enter a single line of text to display inside the block. Use the Font options to apply the Body, Subheading, or Heading font to the block's text. Use the Text size options to set the block's text to use the Body, Subheading, Standard heading, or Secondary heading text size. Use the Symbol option to select None, Icon, or Subheading. This setting lets you choose whether the block shows no symbol, an icon, or subheading-styled text. Use the Icon option to select the type of icon to display inside the block. Icon options include Box, Chat bubble, Check mark, Coat hanger, and more. Alternatively, to hide the icon, select None. To use this option, set the Symbol option to Icon. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Rich text	Displays an area with formatted text and links inside the section.	In the Text field, enter text to display inside the block. Use the inline text editor to format the text and add links as needed. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Information list	Displays additional product information inside the section, using a table or list layout.	In the Text field, enter text to display inside the block. Use the inline text editor to format the text and add links. For a list layout, add each list item on a new line. For a table layout, add each row item on a new line. To specify data for your table's headers and rows, use the format Label: Content in your text. Use the Font option to apply the Heading or Body font to the block's text. Use the Text size options to apply the Body, Standard heading, or Secondary heading text size to the block's text. Use the Style options to apply a Table, Table with gridlines, or List style to the block's text content. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Collapsible tab	Displays a text area with expandable tabs, to contain additional product information, inside the section.	In the Heading field, enter a single line of text to display as the block's title. Use the Heading text style options to apply the Heading or Body text style to the block's title. In the Tab content field, enter text to display inside the block's tab area. Use the inline text editor to format the text and add links as needed. Use the Tab content from page picker to choose a store page as a source of text for the block's tab area. Use the Icon option to select None, Box, Chat bubble, Check mark, Coat hanger, and more. This setting lets you choose an icon to appear alongside the block's heading text. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Icon list	Displays a list of items with icons, inside the section.	In the Heading field, enter a single line of text to display as the block's title. Use the Text color option to set the block's text to use the section color scheme's Text or Secondary color. For items 1 to 5, in the Item # > Text field, enter a single line of text to display beside the item inside the block. For items 1 to 5, use the Item # > Icon options to choose a graphical icon to display beside the item's text, inside the block. For example, select the Box, Check mark, Map pin, Price tag, and more. For no icon, select None. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Popup	Displays a popup overlay to contain additional product information, inside the section.	Use the Icon options to choose a graphical icon to display inside the block. For example, select the Box, Check mark, Map pin, Price tag, and more. For no icon, select None (default). In the Link label field, enter a single line of text to display as a label for the block's link. Use the Page picker to choose a store page as a source of text for the block's popup overlay area. Use the Text color option to set the block's text to use the section color scheme's Text or Secondary color. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Share	Displays an area, inside the section, with buttons for sharing links to your store's products via social media. Refer to Social media.	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Separator	Displays a separator between the current block and the previous block inside the section.	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Custom liquid	Displays advanced customizations from Liquid code, like app snippets, inside the section.	In the Custom Liquid field, enter Liquid template language code. Refer to Learning Liquid: A guide to Shopify theme development. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.