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

Gallery zoom scale coefficient on large screens

To change the image zoom on the desktop view, use the 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.

Enable sticky product "Add to cart"

Tick the option to display the cart popup when scrolling down or up a page. The sticky "Add to cart" popup will be shown at the top of a page on desktop and at the very bottom on mobile:

Enable sticky product information on large screens

If you enable this option, the product information will be displayed when you scroll down the page to the bottom of the image gallery section.

Media

Hide other variants media after selecting a variant

Enable the option to show only those product images that match the selected product variant.

Enable video looping

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.

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", "Delivery countdown", "Quantity selector", "Variant picker", "Buy buttons", "Stock and question popup", "Description", "List item", "Share", "Custom liquid", "Collapsible tab", "Pop-up", "Product rating", and "Complementary products". Each block can be moved to the needed position in the product information section.

Tip: You can add the following blocks more than once: "Text", "List item", "Custom liquid", "Collapsible tab", or "Pop up".

Text

Use the block if you need 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 create meta fields, you can read in the following article.

The "Text style" option allows you to change the text's appearance. Use one of the options from the drop-down: "Body", "Subtitle", or "Uppercase":

Title

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

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

SKU

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

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

The "SKU style" option allows you to change the text's appearance. Use one of the options from the drop-down: "Body", "Subtitle", or "Uppercase".

Collection

To display a link to a collection with a specified product, 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.

The "Collection style" option allows you to change the text's appearance. Use one of the options from the drop-down: "Body", "Subtitle", or "Uppercase".

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. The style of the text can be changed to "Body", "Subtitle", or "Uppercase" by selecting one of the options in the "Product type style" drop-down.

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! This feature requires additional settings to be set up in your Shopify admin -> Settings -> Custom data -> Products because the "Time countdown" can be displayed on the page only via Metafields. For how to customize metafields, read the following help page.

Image

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 certain time of day to reset the countdown.

Example:

So, if you move the value on a slider to 14, it means that the delivery will be shifted one day later at 2 pm 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 pm and the delivery time to 3 days.

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

on Wednesday before 2 pm, 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 pm, 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 pm 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 pm, 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 pm, 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 display in the product information section:

Quantity selector

Once you add this block, the quantity input box will be displayed on product pages before the "Add to cart" button. Here 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! The quantity selector will be hidden if you remove the "Buy buttons" block.

Check the example of how the block might display 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 a "Button" or "Dropdown":

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.

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 that is displayed on 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 display in the section:

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

Stock

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:

List item

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

Show dividing line

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

Line #1 - #5

In the "Icon SVG" field, paste the icon name. The pre-built list of icons, you can view here.

To display the image instead of an icon, use the image picker. Press the "Select image" in the "Icon image" to choose the one from the library or upload it from your computer.

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 meta field. In order to create a meta field, go to Shopify admin -> Settings -> Custom data -> Products. How to create metafields, you can read in the following article.

Here is how the block might display in the section:

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". The detailed instructions on how to create a page you can find 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 find 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 create metafields, you can read in the following article.

Here is how the popup might display on product pages:

Product rating

To display product reviews with ratings on product pages, add the current block. This option requires installing a third-party app. We use the free Product Reviews app by Shopify on our demo. Choose any app from the Shopify App Store.

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.

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.

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.

Show product rating

To display the product star rating for products, enable the option. This feature requires an app installment. Search for an app in the Shopify App Store. We use a free Products Reviews app by Shopify in our demo.

In the following example, you can view how the section can be shown in the product information section:

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

Step 1

In your Shopify admin -> Online Store -> Navigation, scroll down to the "Collection and search filters" and open the Shopify Search & Discovery app: