Product information

The "Product information" section provides options to change the layout of a product page.

Tip: Drag and drop the section to the desired position on a product page.

Product information

The theme displays the full-width sticky "Add to cart" button if you activate the "Enable sticky product "Add to cart" option. The sticky button will be shown at the top of a page on desktop and at the very bottom on mobile. Thus, customers can add a product to the cart while scrolling down a page or up to the "Add to cart" button in the product information section.

Use the "Enable sticky product information on large screens" option to fix the product details while scrolling down the page to the bottom of the product gallery.

The product information (like title, price, SKU, product type, collection, inventory status, stock and question popup, share, and popup) can be aligned to the left or center on mobile view by selecting the required option in the "Mobile text alignment" picker.

Media

Tip: Due to the wide range of options to contribute to each other, investigate the media settings to achieve the best look of a product page.

The screen width filled with a product media/image gallery can be set in the "Desktop media width" picker. Hit the "Small", "Medium", or "Large" options to change the gallery size. This functionality determines the size of the image gallery in relation to product information. The area allocated for product information will be reduced when selecting "Medium" or "Large" options. These settings work on large screen sizes only.

If you use the "Medium" or "Large" options in the prior picker, you can limit a main product image size to fit the screen by checking the "Constrain media to screen height".

Activating the "Constrain media to screen height" feature, you can further control the populated area to display a main product image in the original size or fill in the entire media width. Operate an image appearance in the "Media fit" to "Original" or "Fill".

In the "Desktop layout" drop-down, select the type of an image gallery:

Note! The following options can be applied to host the image gallery. Using one of these options initiates a view of product images assigned to product variants in the admin. The first image will be changed to the corresponding one when clicking the color variant. The product variants can not be changed by hitting an image in the gallery.

"Stacked". The following layout displays the main product variant image across the media width with two additional images in each row underneath.

View the example of the layout on the DEMO.

"2 columns". This layout portrays two images in each row.

The "Two columns" option can be viewed on the DEMO.

"Thumbnails". Show the image gallery below the main variant image by activating the current option.

"Thumbnail carousel". To place an image carousel instead of a thumbnail list underneath the product image, select the option.

Swap the image gallery to the left or right in the "Desktop media position" picker. These options work on desktop view.

The full-width image gallery can be used if the "Enable lightbox" has been enabled. The zooming logo will be placed in the bottom right corner of product images on all screen sizes. To view the zooming logo on the desktop view, hover over each image. The zoom-in icon is designed to appear on mobile without the mouse hover.

To change the image zoom on the desktop view, use the "Gallery zoom scale coefficient on large screens" scale from 1 to 5 in increments of 0.1 to 0.9 points. If you leave the default value equal to 1, image scaling will be disabled.

In the "Mobile layout" drop-down, change the image gallery appearance on mobile view. Select one of the options that works the best for your store design:

"Bullets". The current option implements navigation through the product images using markers. The number of markers-rectangles indicates each available product image.

Note! This option is a good solution for product galleries with a limited amount of product images for displaying the rectangular markers in a line.

The "Bullets" option can be viewed on the DEMO.

"Thumbnails". To show the image gallery below the main image, select the provided option.

View the example of the layout on the DEMO.

"Arrows". The product image navigation can be illustrated as arrows with the number of available product images located centrally.

"2 columns and bullets". The product images will be placed next to each other, two items per row, and rotate by two at a time when pressing an arrow below. In this case, the image navigation consists of rectangular markers and indicates the number of pages to view.

Note! This option is a good solution for product galleries with a limited amount of product images for displaying the rectangular markers in a line.

"2 columns and arrows". The last option shows the image gallery with two items in a row. Image navigation works by changing images one by one in a pagination style based on the number of images available in the gallery.

The "Action after selecting a variant" contains options for grouping images by the selected product variant. To deactivate this functionality, select the "No" option.

Note! If you use one of the options described below, in the first instance, group images by product variants in your Shopify admin -> Products. Read the detailed instructions on the following help page.

"Hide other variants' media". This option is relevant if each color variant includes a single image in your admin. To hide images of unwanted color variants, select the current setting from the drop-down. Otherwise, all product images will be displayed in the gallery. The product variant images can be replaced with the appropriate ones when you select other variants.

"Group gallery by options". Group product images by the selected color variant. The images related to another color variant will be hidden. Initially, all product images will be displayed in the gallery when landing a product page. This functionality is triggered by pressing the color swatch.

View the example of the functionality on the DEMO.

"Group with tag 'group-gallery'". This option works the same as the "Group gallery by options" in the storefront, with one exception: you can specify products in your admin to use the functionality. Activate the option for a particular product using the tag 'group-gallery' in your Shopify admin -> Products. This option is unavailable for products with a missing custom tag.

If you filled in the product information with the video content in your admin, enable the option "Enable video looping" to display a video continuously.

Layout

Use the "Dividing line" drop-down to specify whether to add the line separator on the top or bottom of the "Product information" section. If you need to use the line, select its position as "Top" or "Bottom". To hide the dividing line, use the "None" option.

The "Top spacing" option controls the space between the breadcrumbs/Header (if the breadcrumbs are disabled) and the "Product information" section. Use the scale from 0 to 100 pixels to set the desired parameter.

Handle the parameters on the "Bottom spacing" scale from 0 to 100 pixels to add or remove the space at the bottom of the "Product information" section.

The following examples show how the product page might display on desktop and mobile:

Theme Blocks

Tip: To add a block, press "Add block" in the "Product information" section and select the one from the list.

The "Product information" section can be added with the dynamic content blocks, such as: "Text", "Title", "SKU", "Collection", "Product type", "Price", "Time countdown", "Free shipping", "Delivery countdown", "Inventory status", "Quantity selector", "Variant picker", "Buy buttons", "Stock and question popup", "Description", "Icon with text", "Share", "Custom liquid", "Collapsible tab", "Pop-up", "Personalized fields" and "Complementary products". Each block can be moved to the needed position in the product information section.

You can add the following blocks more than once: "Text", "Icon with text", "Custom liquid", "Collapsible tab", and "Pop-up".

Text

Use the block to add a product subtitle, paragraphs, promotion text, and more.

The "Text" field allows you to paste any text line or choose a Metafield that will be displayed as text. Press on a dynamic source icon to add a meta field. In order to create a meta field, go to Shopify admin -> Settings -> Custom data -> Products. How to build metafields, you can read in the following article.

Title

Add this block if you need to display a title in the product information section.

In the "Mobile text alignment" picker, set one of the options "Use section setting" or "Center". If you hit the "Use section setting" option, the mobile alignment will be used from the section settings. To center the title position regardless of the section settings, use the "Center" option.

In the following example, you can view the described settings:

SKU

Use the following block to place the Stock Keeping Unit in the product information section:

Be aware of adding the necessary information in your admin for each product.

Collection

To display a link to a collection with specified products, add the current block. You can assign each product to the required collection in your Shopify admin -> Products -> Collections. Read more details in the initial documentation.

In the following example, you can view how the block might appear in the section:

Product type

To place the product type, add the corresponding block.

Here is how the block appears in the product information section:

Be aware of adding the necessary information in your admin for each product. Read more details in the initial documentation.

Price

Add the block in order to display a price on product pages. Make sure that each product includes price settings in the admin. How to add and edit products, you can read in the following article.

Time countdown

If you need to display the Sale countdown on product pages, the theme allows adding the "Time countdown" block to the product information section.

Note! The Time countdown is the custom feature that requires additional settings to be set up in your Shopify admin -> Settings -> Custom data -> Products. To display the sale countdown for an individual product page, use the functionality of Metafield that is described in the following help page.

Free shipping

To show the Free shipping progress bar in the product information section, two steps should be completed:

activate the option in Theme settings -> Cart;
add the current block.

Show top dividing line

To show a separator line before the block, enable the option.

Show bottom dividing line

To show a separator line below the block, tick the checkbox.

Check the example of how the block might be displayed in the section:

Delivery countdown

Use the following block to display the calculated delivery date of the item purchased in your store.

In the "Hours of the day to reset delivery countdown" slider from 0 to 23 hours, decide the particular time of a day to reset the countdown.

Example:

So, if you move the value on a slider to 14, it indicates that the delivery will be shifted one day later at 2 p.m. every next day at the same time.

The "Average delivery time of delivery countdown (days)" slider allows one to set how many days will pass before the delivery date. The scale range can be set from 1 to 30 days.

Example:

Let's say you set the reset time to 2 p.m. and the delivery time to 3 days.

The delivery date depends on the daytime the customer purchases the item from your store. If the purchase time is:

on Wednesday before 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Saturday xx/xx/xxxx";
on Wednesday after 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Sunday xx/xx/xxxx".

In the "Format of delivery countdown date", you can decide on the date format. The supported date formats and date orders are:

Day DD/MM/YYYY
Day MM/DD/YY
YY/MM/DD

Use the "Exclude days of the week" input field in order to paste the days of the week that should be skipped for delivery. For example, the weekends or holidays.

Example:

Let's say you set the reset time to 2 p.m. and the delivery time to 3 days. And then added the excluded days: Saturday and Sunday. So, if a customer purchased an item:

on Wednesday before 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Monday xx/xx/xxxx";
on Wednesday after 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Tuesday xx/xx/xxxx".

Show top dividing line

To show a separator line before the block, enable the option.

Show bottom dividing line

To show a separator line below the block, tick the checkbox.

Here is how this feature might be displayed in the product information section:

Inventory status

The "Inventory status" portrays the number of products in stock with the green or red color point depending on the limit set in the block.

Add the block to place the information with the stock status and the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your Shopify admin -> Products.

Use the "Low inventory threshold" slider to set the minimum value for when the products display low inventory. The boundary value can be set from 1 to 100 items, which determines how to display the stock status of the product variant: "X in stock" or "Low stock".

X in stock. This information will be added to the product information section when the threshold is less than the in-stock products. The products will be displayed as always available until they are completely out of stock if you set the value to 0.
Low stock. It will only be shown for products whose stock status is equal to or less than the boundary value you set on the slider.

Hit the "Show inventory count" checkbox to add the product count to the stock status.

Quantity selector

Use the "Quantity selector" block to add the quantity input box where visitors can type in the number of products that should be added to the cart. Or use the plus and minus symbols to increase or decrease the number of product items.

Note! Using the "Show quantity selector" in the "Buy buttons" block hides the display of the quantity selector input box in a separate area.

Check the example of how the block might be displayed in the section:

Variant picker

This block is valuable if you want to showcase the product variants for the products that have multiple options, for example, color, size, material, etc.

Show dividing line

To show a separator line before the block, enable the option.

Choose the "Type" of product variants in the selector. It is presented as "Dropdown" or "Button":

The theme provides numerous options to change the design of the color variants. Find more information on the following help page.

Buy buttons

The "Buy buttons" block allows displaying the "Add to cart" button and dynamic checkout buttons on a product page.

If you hit the "Show quantity selector" checkbox, the quantity input box will be placed next to the "Add to cart" button.

The dynamic checkout buttons help to skip the process of adding products to the cart and navigate directly to the checkout page. More about the checkout method used by the button you can find in the initial documentation.

Add the block to display buttons in the product information section on product pages. The "Add to cart" button will be displayed after adding the block. The dynamic checkout buttons will be shown with the enabled option "Show dynamic checkout buttons".

Here is how the block might be displayed in the section:

Enable the "Show recipient information form for gift card products" option to add the recipient form of the Gift card to the product information section. The recipient form can be displayed if accepting the "I want to send this as a gift" checkbox. For how to set up a gift card in your Shopify admin -> Products -> Gift card, read the initial documentation.

To add the recipient fields to the gift card form, follow the steps from the help page.

If you need to display the dividing lines at the top and bottom of the card form to separate the recipient information from all other blocks, check the "Show dividing lines" option.

Use the given block if you need to showcase the inventory status of product variants, and add the contact form popup for clarifications:

Stock

The "Stock" option shows the product inventory status below the limit set in the block.

Enable the "Show stock" checkbox to place the information line with the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your Shopify admin -> Products.

Use the "Minimum stock count" slider to set the minimum value of available product variants in a store to display information about the number of remaining products in stock. The boundary value can be set from 1 to 10, which determines whether to display the stock status of the product variant. It will only be shown for those variants whose stock status will be equal to or less than the boundary value you set on the slider.

For example, if you set the value to 10 on the slider, then "Low stock - X items left" will only be shown for product variants that have an inventory number equal to or less than 10:

Question popup

For quick and easy customer contact with the owner, display a popup feedback form in the product information section. To use the popup, turn on the "Show question popup" option. It will be displayed on the right side of the screen after hitting the "ASK A QUESTION" button next to stock availability:

Description

If you add this block, the product description from the admin will be shown on product pages. How to add and edit products in your admin, you can find here.

Enable or disable the option "Show as accordion" to decide whether to display the description in the tab, or as an open paragraph.

In the following examples, you can view available configurations:

Icon with text

If you need to place the list of icons with the text strings, use the "Icon with text" block.

Decide on the layout of the block by selecting one of the options "Horizontal" or "Vertical" in the "Layout" picker.

To display a dividing line in front of the block, enable the "Show dividing line" option.

Content

First section - Sixth section

In the "Icon SVG", paste the icon name. Read more about icons here.

To display an image instead of an icon, use the image picker. Press the "Select image" in the "Icon image".

The descriptive paragraph can be added to the "Text" input field. This field can be used to add content using Metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to Shopify admin -> Settings -> Custom data -> Products. How to create metafields, you can read in the following article.

To display a share button in the section, use the following block.

In the "Text" field, you can place the button's title for the popup.

Custom liquid

This is an advanced option to render dynamic content for output objects and their properties that can be customized by designers and developers only. Learn more in the following article.

Collapsible tab

Add this block, if you need to display collapsible tabs in the product information section. If you want to showcase an accordion, add several content blocks.

This block allows you to paste texts into the input field, connect a page with the product details or additional information, and add content via Metafields.

Enable or disable the option "Show as accordion" to decide whether to display the information in the tab, or as an open paragraph.

In the "Heading", put the tab's title. The paragraph inside the tab will be displayed if you edit the "Tab content" field. This field can be used to add content using Metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to Shopify admin -> Settings -> Custom date -> Products. How to create metafields, you can read in the following article.

To connect "Tab content from page", press "Select page". Detailed instructions on how to create a page can be found here.

Pop-up

This block allows displaying a whole page as content in the side-out drawer.

Add the title to the "Link label" field. Then, select a page. The detailed instructions on how to create a page you can read here.

The "Page" option provides the ability to add content using Metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to Shopify admin -> Settings -> Custom data -> Products. How to build metafields, you can read in the following article.

Here is how the text drawer might be displayed on product pages:

Personalized fields

This block provides customers with personalized fields to fill out and add special details to the order. It can be formed as a particular service for individual products. For example, engraving jewelry, printing on clothes or cups, and so on. The information will be added to the order as product options.

Here is how the feature might be displayed in a store:

Tick the "Show as accordion" option to display fields in the collapsible tab.

In the "Heading", type the block title.

This block provides settings to activate up to three fields and customize each individually.

First field - Third field

Check the "Show field" box to activate the field.

Use the "Label" field to give the field's name.

In the "Placeholder", type any string to display inside the field before the customer enters some information.

If this field is mandatory to purchase a product, enable the "Required" option.

On the "Maximum number of characters" scale, set the character limit from 1 to 100. A set value of 100 means an unlimited number of characters to type in the field.

Change the field appearance using the "Type" picker. Use the "Input" or "Textarea" options.

The example of the described options can be viewed below:

Complementary products

Note! This block requires using the Shopify Search & Discovery app in your Shopify admin -> Online Store -> Navigation -> Collection and search filters. Learn more about Complementary Products here.

Add this block to display the desired products in the product information section on product pages.

To display a title for the block, insert the text into the "Heading" field. If there is no need to title the block, leave the field empty.

The block can be displayed as a collapsible tab if you activate the "Show as accordion" option.

Here you can control the number of products displayed for the block using the "Maximum products to show" scale. It can be changed from 1 to 10 items.

In the "Number of products per page", arrange the number of products that should be placed in the column on the first viewing page. If the number of complementary products exceeds the quantity you set on the scale, the products will be displayed in a carousel. The value can be set from 1 to 4.

Use the settings from the "Pagination style" to display pagination as "Counter", "Numbers", or "Bullets".

PRODUCT CARD

Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape" or ''Circle". Each image ratio you can check here.

Enable quick add button

The "Add to cart" button will be shown next to each product if you enable the "Enable quick add button" option.

Show vendor

Display the product vendor above the product title by simply enabling the checkbox.

Tip: To display the complementary products in the section, go to your admin and apply the settings described below:

Step 1

In your Shopify admin -> Apps, select the Shopify Search & Discovery app:

Step 2

Then, you can press "Recommendations" item in the side menu to navigate to the needed chapter:

Step 3

Here you can select or search for the desired product to edit recommendations:

Select a product.