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.

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.