Appearance

Product pages ​

This guide describes setting up a Product pages section on your store's default product page. Use the section to set what's displayed when a visitor selects a product from your store. In addition to setting the contents of a product page, you can adjust the page's layout.

The following video shows a product pages section on a store's default product page. During the video, the option is set to Enable two images per row... inside the section. With an uneven number of product images, the first image displays at the full width of the image area because the checkbox Full width first image... is also enabled.

For general guidance with modifying sections, refer to Sections overview.

Set up a product pages section ​

To set up a product pages section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select Products > Default product.

    Note

    The product pages section is available only on default product pages.

    To add Content sections into the current page, select Add section, from the side menu, and then choose a section to add. Refer to Shopify help: Add a section.

  2. From the side menu, select Product pages.

    The product pages section menu in theme editor

  3. Select a section setting described in the following table.

    To configure a block inside the section, refer to Configure a block within a product pages section.

Section setting nameDescription
Desktop image widthSelect the dropdown Desktop image width to set a width for the image inside the section. This setting applies to desktop displays, and the dropdown options are: One third, One half, Three fifths, and Two thirds. The image and text tiles are resized accordingly.
Desktop image positionSelect the dropdown Desktop image position to position the image to the Left or Right, inside the section. This setting applies to desktop displays.
Enable two images per row on desktopSelect the checkbox Enable two images per row on desktop to turn on/ off displaying two product images per row on desktop devices, in the image area inside the section. If there are an uneven number of images, the first image is displayed at the full width of the image area.
Full width first image on desktopSelect the checkbox Full width first image on desktop to turn on/ off displaying the first product image at the full width of the image area inside the section. This setting applies only if the option to display two images per row is enabled.
Variant image change behaviourUse the dropdown Variant image change behaviour to set how images behave inside the section when a product variant is selected. When a variant is selected:
  • to replace the current image with the variant's image, choose Swap with first image.
  • to move from the current image to the variant's image, choose Scroll to image.
Media > Enable image zoomSelect the checkbox Enable image zoom to show/ hide a panel that contains images of a product. The panel opens when a product's image is selected inside the section. The panel provides zoom in/out for images, arrow icons for navigating between images, and an X icon to close the panel.
Media > Enable video loopingSelect the checkbox Enable video looping to turn on/ off continuous replay for videos inside the section. If this setting is set to off, the video plays once. Refer to Shopify help: Product media.
Color > Color schemeUse the Color scheme dropdown to set the color scheme for the section to Primary, Secondary or Tertiary. Refer to Customize color schemes.
Use this color scheme for header and footerSelect the checkbox Use this color scheme for header and footer to turn on/ off applying the section's color scheme to the header and footer. This setting applies only to the product template/ default product page.
Theme settingsSelect Theme Settings to access additional settings for the section. Refer to Section theme settings menu.

Configure a block within a product pages section ​

To configure a block within a product pages section:

  1. In Customize theme, at the top of the page, use the dropdown to select Products > Default product.

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

  3. From the Product pages menu, select a block, and then apply the corresponding settings described in the Table: Product pages blocks.

    To add a block into the product pages section, from the Product pages menu, select Add block, and then choose a block to add.

    The block options for the product pages section in theme editor

    Note

    Inside a product pages section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and 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, and blocks indicated with an asterisk * are contained in a standard product pages section. To configure a block, refer to Configure a block within a product pages section.

Block nameBlock descriptionBlock setting(s)
Title*Displays a product's title, inside the section.No customizable settings available.
Price*Displays a product's price, inside the section.No customizable settings available.
Variant picker*Displays a variant picker for choosing variations of a product, inside the section.
  • Select the Options style dropdown to set a style for the product variant selector, inside the section. The options are Text with underline, Radio, Button, and Dropdown.

  • Select the Hide option labels checkbox to show/ hide the name of the currently selected product variant, inside the section.
Quantity selector*Displays a quantity selector, inside the section, for choosing the number of products to purchase.No customizable settings available.
Buy buttons*Displays the Add to cart and Buy it now buttons, inside the section.
Description*Displays a text area to contain additional product information, inside the section.
  • Select the checkbox Enable collapsible tabs to show/ hide tabs, inside the section, for accessing expanded text areas that contain additional product information. Refer to Create collapsible tabs.

  • Select the Truncate description checkbox to show/ hide a Read more button, inside the section, for accessing an expanded text area that contains additional product information. Enable this setting for products with variant images and longer descriptions. To enable this setting, set collapsible tabs to off.
VendorDisplays the name of a product's vendor, inside the section.No customizable settings available.
Share buttonsDisplays an area with buttons for sharing links to your store's products via social media.No customizable settings available.
TextDisplays a text area to contain additional product information, inside the section.
  • Use the Text box to enter additional text to display inside the section. To display a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Select the Font dropdown to set additional text, inside the section, to use the same font as Heading or Body text.

  • Select the Text size dropdown to set a size for the additional text, inside the section. The options are: S = small, M = medium, M/ desktop L = medium on smaller displays and large on desktop displays, M/ desktop XL = medium on smaller displays and extra large on desktop displays, and M/ desktop 2XL = medium on smaller displays and extra large x 2 on desktop displays.

  • Select the Icon dropdown to choose a graphical icon to display beside the additional text, inside the section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).
Rich textDisplays a formatted text area to contain additional product information, inside the section.
  • Use the Text box to enter additional text to display inside the section. Format the text using the text editor pane. To display a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
Collapsible tabDisplays a text area with expandable tabs, to contain additional product information, inside the section.
  • Use the Heading box to enter title text for the collapsible tab block, inside the section. Refer to Create collapsible tabs. To display a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Select the dropdown Heading text style to set a text style for titles in the collapsible tab block, inside the section. Set titles to use the same font as Heading or Body text.

  • Use the Tab content box to enter additional text to display in the collapsible tab block, inside the section. Format the text using the text editor pane. To display content from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Tab content box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Use the selector Tab content from page > Select page to add content from another store page into the collapsible tab block, inside the section. To display content from a dynamic source, select the Connect dynamic source icon, beside the selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields.

  • Select the Icon dropdown to choose a graphical icon to display beside the collapsible tab's title text, inside the section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).
Icon listDisplays a list of items with icons, inside the section.
  • Use the Heading box to enter title text for the icon list block, inside the section. To display content from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Select the Text color dropdown to set a color for text in the icon list block, inside the section, to Text or Secondary.

  • For list items 1 to 5, use the Item # > Text box to enter text to display beside the item, in the icon list block, inside the section. To display content from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • For list items 1 to 5, select the dropdown Item # > Icon to choose a graphical icon to display beside the item's text, in the icon list block, inside the section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).
Pop-upDisplays a pop-up overlay to contain additional product information, inside the section.
  • Select the Icon dropdown to choose a graphical icon to display beside the text, in the pop-up link text block, inside the section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).

  • Use the Link label box to enter label text for the link in the pop-up link text block, inside the section. When the link is selected, a pop-up overlay is displayed. To use text from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Link label box, and then choose a metafield to add. Refer to Shopify help: Metafields

  • Use the selector Page > Select page to add content from another store page into the pop-up block, inside the section. To display content from a dynamic source, select the Connect dynamic source icon, beside the Page selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields.

  • Select the Text color dropdown to set a color for text in the pop-up block, inside the section. The options are Text and Secondary.