Mandolin Template - Product

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 Mandolin 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
  • Description drawer
  • Share

You can also add the following blocks:

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

The Product information section can contain up to 16 blocks.

Settings

Setting Description
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.
  • Stack images - 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.
  • Stack desktop and Carousel mobile
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
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 Sets 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.

Recently viewed