Product information

The Product information section contains the following default blocks:

• Text (default displays the vendor attribute)

• Title

• Text (default displays the product subtitle attribute)

• Price

• Variant picker

• Quantity selector

• Buy buttons

• Description

You can also add the following blocks:

• Text

• Custom liquid

• Collapsible tab

• Countdown timer

• Icon with text

• Pop-up

• Complementary products

• Inventory

• SKU

• Sticky cart

The Product information section can contain up to 15 blocks.

Product information section settings

Setting	Description
Enable sticky content on desktop	When scrolling down a page, the product information column doesn't begin scrolling until all images have been scrolled through.
Desktop media width	Choose between small, medium, or large media width. This setting only applies for users accessing the page on a desktop computer, because the media position is automatically optimized for mobile devices.
Constrain media to screen height	Selecting this option sets a maximum media height based on the height of the browser window of any device.
Desktop layout	How the product media display on desktop. Stacked - Displays all product media stacked upon each other. Clicking a stacked media type opens a pop-up window with a larger view of the selected media. 2 Columns: If the product has more than one media type, all product media are displayed in a 2-column grid view. Thumbnail carousel - If the product has more than one media type, then the remaining media are displayed as thumbnails in a carousel below the main product media. The customer can click any thumbnail to load it, or use the carousel navigation arrows to display other media. Thumbnails - If the product has more than one media type, then the remaining media are displayed as thumbnails below the main product media. The customer can click any thumbnail to load it.
Desktop media position	Select whether to have the featured product media on the left or right. This setting only applies for users accessing the page on a desktop computer.
Image zoom	Choose how the image zooms on desktop: Open lightbox - Opens the large image. Default for mobile. No zoom - Deactivates the zoom on images. Recommended for images that aren't high resolution. Click and hover - Click to zoom in on the image, then hover to view different sections zoomed in. Zoom on hover is disabled when the enlarged images is clicked again or when the mouse leaves the image's container. When this setting is enabled and the user is on a mobile device, the image will default to opening in a modal (lightbox).
Mobile layout	Choose to hide or show thumbnail images or display as a 2 columns on mobile.
Hide other variants’ media after selecting a variant	When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.
Enable video looping	Sets the video to play on a loop, so that the video will replay automatically when it finishes.

Product information section padding settings

Setting	Description
Top padding	Add spacing to the top of Product Information section. Use the range slider to add between 0px and 150px of space above the Product Information.
Bottom padding	Add spacing to the bottom of Product Information section. Use the range slider to add between 0px and 150px of space below the Product Information.

Product information 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 style	Changes the style of the text: Body - Changes the text to paragraph-style text. Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text. Uppercase - Changes the text to be smaller than paragraph-style text, and puts all characters in caps.

Title block

This block displays the product's title. It has no adjustable settings.

Price block

This block displays the product's pricing information, such as price and compare-at price. It has no adjustable settings.

Variant picker block

This block displays any variant options for the product. The variant picker displays only for products that have variant options. If you remove this block and you have products with variant options, then your customers can't choose the variant option they want and can't purchase the product.

Setting	Description
Type	Changes how the variants are displayed to customers: Pills - Displays the variants as clickable buttons. These can be displayed as a swatch or text only. Dropdown - Displays the variants in an expandable drop-down menu. These can be displayed as a swatch or text only.

Color swatches

If you wish to use 'Color swatches', then the Variant picker type must be set to 'Pills'.

Setting	Description
Color selector type	Displays the color variants in swatches: Text swatch Color swatch Variant image and color swatch

Size chart

Products must have a 'Size' option to be eligible for size chart function.

Setting	Description
Icon	Displays the icon before the 'Size Chart' text.
Size chart page	The page you want to display size chart content from in the pop-up window.

Learn more about how to enable the size chart.

Buy buttons block

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

Buy buttons settings

Setting	Description
Show dynamic checkout buttons	Displays any dynamic checkout options that you have enabled in your Payments settings.
Show recipient information form for gift card products	Displays an optional checkbox on the gift card products that lets customers send and schedule a gift card to a recipient along with a personal message.

Add to cart button

Setting	Description
Color scheme	A set of colors that you can apply to this button. Learn more about color schemes.

Share

Setting	Description
Show share	Select this checkbox to show/hide the share function on the product page.

Description block

This block displays the product's description. It has no adjustable settings.

Complementary products block

This block displays complementary products which need to be set up with the Shopify Search and Discovery app.

Complementary products need to be In stock and set to Active or the Shopify Search and Discovery app will filter them out.

Setting	Description
Heading	The title of the block.
Show as collapsible row	Select an icon to pair with your heading when complementary products are displayed as a collapsible row.
Icon	Select an icon to pair with your heading when complementary products are displayed as a collapsible row.
Maximum products to show	Select the maximum number of complementary products to display. You can select a minimum of 1, and a maximum of 10.
Number of products per page	The number of complementary products that you want to display per slider page. Select a value between 1-4.
Pagination style	The style of the slider navigation that displays below the images. Dots Counter (default) Numbers
Image ratio	Determines the aspect ratio of the product card images. Portrait Square (default)
Show vendor	Select to show or hide the vendor.
Display quick add button	The quick add button allows customers to add an item to their cart from the product card. If the product has variants, then the button displays Choose options and the relevant product details in a pop-up. Customers can select variants to add to cart, check out immediately with the Buy it now option, or else click to view an item's full details. The Buy it now option needs to be set up separately from the product page to display in the quick add options. When the Buy it now option isn't set up, customers can still add the item to their cart.

SKU block

This block displays the Stock Keeping Unit (SKU) associated with the product, when relevant.

Setting	Description
Text style	Changes the style of the text: Body - Changes the text to paragraph-style text. Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text. Uppercase - Changes the text to be smaller than paragraph-style text, and puts all characters in caps.

Icon with text block

This block displays up to three icons with text. You can choose between standard logos or choose your own logo image.

Setting	Description
Layout	Choose between a horizontal or vertical layout for this section.
First icon	Choose a standard icon.
First image	Choose an image for your first icon. Choosing an image overrides any icons that you selected in the first icon setting. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt text	Add a brief image description to improve SEO and to describe the image for customers using screen readers.
First heading	Add a heading for the first icon.
Second icon	Choose a standard icon.
Second image	Choose an image for your second icon. Choosing an image overrides any icons that you selected in the second icon setting. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt text	Add a brief image description to improve SEO and to describe the image for customers using screen readers.
Second heading	Add a heading for the second icon.
Third icon	Choose a standard icon.
Third image	Choose an image for your third icon. Choosing an image overrides any icons that you selected in the third icon setting. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt text	Add a brief image description to improve SEO and to describe the image for customers using screen readers.
Third heading	Add a heading for the third icon.

Inventory status block

This block displays the inventory status of the product. You can display the remaining inventory or display the remaining inventory after the product inventory count reaches the threshold that you set. The inventory status displays only for products that have inventory tracking activated.

Setting	Description
Text style	Select the style for the text. Choose between Body, Subtitle, or Uppercase.
Low inventory threshold	Use the slider to set the threshold for when the products displays low inventory from 0 to 100. If you set the slider to zero, then the stock displays as always available until it's completely out of stock.
Show inventory count	Select this option when you want to display the in stock inventory count for your products.

Quantity selector block

This block displays a quantity selector that customers can use to change how many units of the product that they want to purchase. It has no adjustable settings. The default quantity is 1.

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.

Collapsible tab block

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

Setting	Description
Heading	The title of the tab. Displays when collapsed and expanded.
Tab content	The content of the tab. Displays only when the tab is expanded.
Tab 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 Tab content displays above the page content.

Pop-up block

This block displays clickable text that opens a pop-up window when clicked. This pop-up displays content from one of your pages.

Setting	Description
Link label	The clickable text that customers click to display the pop-up window.
Page	The page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template.

Countdown timer block

Ideal for limited-time offers or flash sales, it enhances the shopping experience and can boost sales.

Learn more about how to set up a countdown timer for specific products using metafields.

Setting	Description
End date	End date of countdown timer. Using format: MM/DD/YYYY HH:MM:SS. Example: 12/31/2024 11:59:00 Note: If the format is incorrect, the entire countdown timer will be hidden.
End of timer message	Display a notification message when the countdown timer ends.
Hide block after end of timer	This option will completely hide the countdown timer block when the countdown timer ends.
Icon	Display a icon before the text.
Icon size	The size of the icon.
Text	Text describing the flash sale.
Text size	Determines the font size of the text.
Color scheme	Set the color for the countdown timer.
Customize gradient colors	If the settings below are left blank, they will default to the colors from the Color scheme setting. Should select both the first color and the second color for the linear gradient to work correctly.
Icon
First color	Sets the first color to create a the linear gradient for the icon.
Second color	Sets the second color to create a the linear gradient for the icon.
Digit border
First color	Sets the first color to create a the linear gradient for the border of the digit.
Second color	Sets the second color to create a the linear gradient for the border of the digit.
Block padding
Top padding	Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).
Bottom padding	Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 2px (pixel).

Sticky cart block

To enhance the user experience, a sticky cart block is displayed, allowing customers to easily add the product to their cart regardless of their scroll position on the page

Setting	Description
Color scheme	Set the color for the block.