Featured product

Add the "Featured Product" section to place the brand new product, best-selling, and more on pages.

Tip: The product information will be displayed for a product with the configured settings in your Shopify admin -> Products. Read more details on how to configure products in your admin here.

Featured product

Connect a desired product with the section using the "Product" selector. If you need to create a new product, hit the "Create product" button to navigate to your Shopify admin -> Products.

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:

"Only first image". Use this option to display only the first image of the related product variant regardless of the settings applied in your admin.

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:

"Only first image". Use this option to display only the first image of the related product variant regardless of the settings applied in your admin.

"2 columns". 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.
"Thumbnails". To show the image gallery below the main image, select the provided option.

View the example of the layout on the DEMO.

"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.

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

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

If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".

On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

Theme Blocks

Tip: Use dynamic blocks to display only the selected product information. Change the position of each block by dragging it up or down to the desired place in the product information section.

The "Featured product" 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", 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 if you need to add a product subtitle, paragraphs, promotion text, and more. The "Text" field, allows you to paste any text line or to choose a Metafield that will be displayed as text. Press on the 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.

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 how the block might be displayed in the section:

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 the corresponding 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 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

This block allows you to add a price and place it in the desired position in a section. 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 products 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 Thursday before 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";
on Thursday after 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".

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 Thursday before 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";
on Thursday after 2 pm, the delivery time will be displayed as "Order in the next x hours x minutes to get it by Wednesday 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 following 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 display a dividing line in front of the block, enable this option.

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

In the following examples, you can view how the block might be displayed in the section:

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 in the "Featured product" section.

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 skip the process of adding products to the cart and navigate directly to the checkout page. Read more about the checkout method displayed on the button in the initial documentation.

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

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. 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.

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

This block shows a product description from your admin.

To display information about the product in the closed tab, activate the "Show as accordion" option. This option can be practical for product pages with a long description.

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

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 provided block.

The button's title can be changed in the "Text" field.

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

Custom liquid

This is an advanced option that requires additional developer skills. More about Liquid you can read here.

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 the 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. Detailed instructions on how to create a page can be found here.

The "Page" option provides the ability to add content using Metafields. Press on the 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:

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.

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.