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.
Customize section
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find chord theme that you want to edit, and then click Customize.
- 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:
|
Summary background color | Sets the background color of the Summary text |
MEDIA | |
Image ratio | The ratio for the media:
|
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.
|
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:
|
Title block
Setting | Description |
---|---|
Title size | Changes the size of the text, choose from the drop-down menu:
|
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:
|
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:
|
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:
|
Section spacing | Change spacing of the section, choose the drop-down menu:
|
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:
|
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:
|
Section spacing | Change spacing of the section, choose the drop-down menu:
|
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:
|
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. |