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
Layout
The layout settings change the look and feel of the section.
Swap the image to the left or right in the "Layout" drop-down. These options work on desktop view.
Here is how the content might display in the section:
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.
Content
Use the "Product" selector to connect a product with the section. If you need to create a new product, hit the button "Create product" to navigate to your Shopify admin -> Products.
Media
Enable the "Hide unselected variants’ media on desktop" option to show only those product images that match the selected product variant.
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.
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.
Use the "Enable sticky product information on large screens" option to fix the product details while scrolling down the page.
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: "Combo info block", "Text", "Title", "Description", "List item", "Price", "Time countdown", "Delivery countdown", "Quantity selector", "Variant picker", "Buy buttons", "Share", "Custom liquid", and "Product rating".
You can add the following blocks more than once: "Combo info block", "Text", "List item", and "Custom liquid".
Combo info block
Add the block to display the combination of product name, price, and subtitle:
To add a subtitle, edit the "Text" field. The text will be shown above the product name. If you reject to display of the subtitle, leave the field empty.
The "Text" 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.
The "Text style" option allows you to change the subtitle appearance. Use one of the options from the drop-down: "Body", "Subtitle", or "Uppercase":
Tip: If you need to add each product information individually, disable the current block and use the following blocks:
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 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.
The "Text style" option allows you to change the text appearance. Use one of the options from the drop-down: "Body", "Subtitle", or "Uppercase".
Title
Add this block if you need to display a title in the product information section.
In the following example, you can view how the block might display in the section:
Description
This block allows displaying a product description. Use the "Text" field to paste informative paragraphs about your product. 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.
Check the following example of how the block might display in the section:
List item
If you need to place the list of icons with the text string, use the "List item" block.
Line #1 - #5
In "Icon SVG", paste the icon name. The pre-built list of icons, you can view 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.
Here is how the block might display in the section:
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! 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
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! The quantity selector will automatically pull up before the "Add to cart" button once you add the block. Removing the "Buy buttons" block disables displaying of the quantity selector input box.
Check the following 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.
Here you can choose the "Type" of displaying the product variants. It can be set as "Dropdown" or "Button".
In the following examples, you can view how the block might display 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 for a featured product.
The dynamic checkout buttons help skip the process of adding products to the cart and navigate directly to the checkout page. More about the checkout method which is displayed on the button, you can find 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 option "Show dynamic checkout buttons".
Here is how the block might display in the section:
Share
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 display in the section:
Custom liquid
This is an advanced option that requires additional developer skills. More about Liquid you can read here.
Product rating
Add the current block to display product reviews with ratings for a product. 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.
"View full product details" button
If you need to edit texts for the "View full product details" button, press the dotted [...] menu next to the theme name to open the "Edit default theme content" chapter in your Shopify admin:
Here you can press the tab "Products":
Then, scroll down and edit the text under the "View full details" field:
Last updated