Skip to main content

Products

  • Updated
product.jpg

Overview

Default product template controls the features, layout, and settings for the product page. Merchants use the product page (also known as a PDP or product details page) to highlight the features and benefits of each product. Customers use the features on the product page to learn about the product and add their preferred options to the cart.

Guidelines

Customize section

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find chord theme that you want to edit, and then click Customize.
  3. You need to open up any product, from inside the theme editor area, or select the product page from the dropdown at the top.
Note:All settings here will be applied to all products, not just the one you are on. If you are looking to have different sections on different products.

Section settings

By default, product pages have a Product information section, a Product recommendations section and a Recently viewed products section.

Product information section

Default blocks

The Product information section contains the following default blocks:

  • Title
  • Price
  • Variant picker
  • Quantity selector
  • Buy buttons
  • Short Description
  • Description drawer
  • Share

You can also add the following blocks:

  • Breadcrumb
  • Vendor
  • SKU
  • Text
  • Description collapsible
  • Product rating
  • Drawer tab
  • Collapsible tab
  • Trust badges
  • Product list
  • Product recommendations
  • Custom Option
  • Custom liquid
  • @app

The Product information section can contain up to 16 blocks.

Settings

Setting Description
Section width Set the width of the section using the drop-down menu:
  • Grid
  • Full width
Summary background color Sets the background color of the Summary text
MEDIA  
Image ratio The ratio for the media:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • 2:3
  • 3:4
  • 1:1
  • 4:3
  • 16:9
  • 21:9
Image fit container Click the checkbox to make the image fit the container.
Enable zoom Click the checkbox to enable zoom.
Desktop layout How the product media display on desktop.
  • Carousel - If the product has more than one media type, the remaining media will appear as thumbnails in a carousel below the main product media. The customer can click on any thumbnail to load it, or use the carousel navigation arrows to see other media.
  • Stacked - Displays all product media stacked upon each other. Clicking on a stacked media type will open a pop-up window with a larger view of the selected media.
Media centered Visible when the Desktop layout setting is set to Carousel.
Media width Visible when the Desktop layout setting is set to Carousel.
REVIEWS  
Enable Click the checkbox to enable reviews that use the Shopify's free Product Reviews app, you need to install it before enabling the option.
Open reviews tab Sets the default state of the review tab.
Background color Set the background color of the reviews body.

Blocks

The following blocks can be added to the Product information section.

Text block

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

Setting Description
Text Adds information to the product page. Supports text or dynamic sources
Text size Changes the size of the text, choose from the drop-down menu:
  • Small
  • Medium
  • Large

Title block

Setting Description
Title size Changes the size of the text, choose from the drop-down menu:
  • Small
  • Medium
  • Large

Price block

This block displays the product's pricing information, such as price and compare at price.

Setting Description
PRICE  
Size Changes the size of price, choose from the drop-down menu:
  • Small
  • Medium
  • Large
Color Sets the text color of the price.
Sale color Sets the text color of the sale price.
Bold font Checked the checkbox to make the price text bold.
TAXES NOTICE  
Show price taxes notice Check the checkbox to show taxes notice.

Variant picker block

This block displays any variant options for the product.

Setting Description
Picker type Changes how the variants are displayed to customers:
  • Button - Displays the variants as clickable buttons.
  • Dropdown - Displays the variants in an expandable drop-down menu.
  • Color swatch and dropdown - Displays the variants as clickable color buttons and an expandable drop-down menu.
  • color image swatch and dropdown - Displays the variants as clickable color buttons and an expandable drop-down menu.
  • Color swatch and button - Displays the variants as clickable color buttons.
  • Color image swatch and button - Displays the variants as clickable image buttons.

Buy buttons block

This block displays the "Add to cart" button and any in-store pickup information. It can also show any dynamic checkout buttons.

Setting Description
Show dynamic checkout buttons Displays any dynamic checkout options that you have enabled in your Payments settings.
Show local pickup availability Show customers where they can pick up the product.Learn more

Description drawer block

This block uses drawer to display the description of the product.

Setting Description
Heading The text of the drawer tab title for description drawer, default Description

Description collapsible block

This block uses collapsible tab to display the description of the product..

Setting Description
Heading The text of the collapsible tab title for description drawer, default Description
Open collapsible tab Set the default state of the collapsible tab.

Share block

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

Setting Description
Text Text ahead the share icons.

Quantity selector block

Setting Description
Show inventory quantity Make sure that your inventory is tracked. Learn more
Inventory quantity threshold Only show inventory quantity if below threshold. Choose 0 to always show.

Custom liquid block

This block displays custom Liquid or HTML code that you can add to the block

Setting Description
Custom liquid Displays content that you can enter as Liquid or HTML code.

Drawer tab block

This block displays a drawer tab with a title. When a customer clicks the title, the drawer opens to display additional content.

Setting Description
Heading The title of the drawer.
Image Show at top of the drawer.
Drawer content The content of the tab. Displays only when the tab is clicked.
Drawer content from page Displays content from a page in the tab. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Drawer content displays above the page content.

Collapsible tab block

This block displays a collapsible tab with a title. When a customer clicks the title, the collapsible opens to display additional content.

Setting Description
Heading The title of the drawer.
Drawer content The content of the tab. Displays only when the tab is clicked.
Drawer content from page Displays content from a page in the tab. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Drawer content displays above the page content.
Open collapsible tab Sets the default state of the collapsible tab.

Product recommendations section

Settings

Based on the product currently being viewed, this section displays similar products, or products that are frequently bought together with this product.

Setting Description
Section width Set the width of the section using the drop-down menu:
  • Grid
  • Full width
Section spacing Change spacing of the section, choose the drop-down menu:
  • Small
  • Medium
  • Large
Layout Choose between Grid and Carousel
SECTION HEADER  
Heading The title of the section. You can use a dynamic source for the section heading.
Header alignment Choose the alignment of the section heading. Options are Left, Center.
Heading size Set the height of heading using the drop-down menu:
  • Small
  • Medium
  • Large
GRID  
Maximum products to show The number of products from the collection to display. Minimum: 2. Maximum: 24.
Number of columns on desktop Number of columns to display on desktop computers. Minimum: 2. Maximum: 6.
Number of columns on mobile Set a specific column layout for mobile devices When Layout mobile is stacked. Choose between 1 and 2 columns. Visible when the Layout setting is set to Grid.
PRODUCT CARD  
Show product info Displays the product info for each product.
Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews , and metafield definitions for reviews.rating_count and reviews.rating.
Show vendor Displays the vendor for each product.
Show swatch Displays the swatch for each product.

Recently viewed products section

Show the customer recently viewed products.

Settings

Setting Description
Section width Set the width of the section using the drop-down menu:
  • Grid
  • Full width
Section spacing Change spacing of the section, choose the drop-down menu:
  • Small
  • Medium
  • Large
Layout Choose between Grid and Carousel
SECTION HEADER  
Heading The title of the section. You can use a dynamic source for the section heading.
Header alignment Choose the alignment of the section heading. Options are Left, Center.
Heading size Set the height of heading using the drop-down menu:
  • Small
  • Medium
  • Large
GRID  
Maximum products to show The number of products from the collection to display. Minimum: 2. Maximum: 24.
Number of columns on desktop Number of columns to display on desktop computers. Minimum: 2. Maximum: 6.
Number of columns on mobile Set a specific column layout for mobile devices When Layout mobile is stacked. Choose between 1 and 2 columns. Visible when the Layout setting is set to Grid.
PRODUCT CARD  
Show product info Displays the product info for each product.
Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews , and metafield definitions for reviews.rating_count and reviews.rating.
Show vendor Displays the vendor for each product.
Show swatch Displays the swatch for each product.

Related articles