Featured Product
The Featured Product block is used to display a single product with all its key details and interactive elements.
It allows store owners to highlight a product on a page, combining essential product information, promotional elements, and conversion tools in one block. This section is highly flexible and supports multiple optional components to enhance customer engagement and improve sales.
Elements inside Featured Product
Animated badge
The Animated badge block is used to display a small, visually appealing label over a product (for example, “Featured,” “New,” or “Best Seller”). It helps draw customer attention to specific product highlights through animation and customizable styling options.
Option
Description
Text
Defines the label that appears inside the badge (e.g., “Featured,” “New,” “Limited”).
Icon width
Adjusts the size of the icon displayed with the badge. The width is set in pixels.
Colors
A group of styling options that define the badge’s visual appearance.
Background
Sets the outer background color of the badge.
Inner background
Defines the inner layer color, used to create depth or animation contrast.
Text
Determines the color of the badge text.
Icon
Sets the color of the icon within the badge.
Blurb
The Blurb block is designed to display short and visually engaging text items accompanied by optional icons or images. It’s typically used to emphasize product benefits, service highlights, or special features within the Featured Product section.
Option
Description
Text align
Aligns the content horizontally. Options: Left or Center.
Heading size
Sets the size of the heading text inside the blurb.
Available options: Medium, Small, Extra small.
Icon width
Adjusts the width (in pixels) of the icon displayed beside or above the text.
Show icon box
Toggles a background box around the icon for enhanced visual contrast.
Icon box roundness
Controls how rounded the corners of the icon box appear. A higher value makes the box more circular.
Underline on hover
Enables or disables underlining of link text when the user hovers over it.
#1-#3
Show icon
Allows choosing how the icon appears — either a Preset icon or a Custom image.
Image
Lets you upload or select an image to use instead of a preset icon (recommended size: 200×200 px).
Preset icon name
Selects a built-in icon from the theme’s icon library (e.g., check, heart, truck).
Heading
The title text for the blurb, used to describe a feature or product benefit.
Text
The main description area for the blurb — suitable for short, descriptive content about the feature.
Link name
The text label for the clickable button or link (e.g., “Learn more,” “Shop now”).
Link
The destination URL that opens when the user clicks the link or button.
Colors options for the Blurb element:
Option
Explanation
Base
Sets the main color used for the overall text and background elements of the blurb.
Accent
Defines the highlight color used for accents or emphasized elements within the blurb.
Lines
Controls the color of divider or outline lines separating parts of the blurb.
Blurb
Sets the background color of the blurb container.
Heading
Changes the text color of the blurb heading.
Heading link hover
Defines the color of the heading when it contains a link and is hovered over.
Description
Sets the color of the description text in the blurb.
Icon
Adjusts the color of the blurb’s icon.
Icon box
Sets the background color of the icon’s surrounding box or area.
Link
Determines the color of the link text in the blurb.
Link icon
Defines the color of the icon displayed next to a link.
Link hover
Sets the color of the link text when hovered over.
Link icon hover
Changes the color of the link icon when hovered over.
Text box
Controls the background color of the text container to improve readability.
Buy buttons
Includes “Add to Cart” and potentially other purchase buttons.
Option Group
Options and Explanation
Enable quantity
Displays a quantity selector that lets customers choose the number of items before adding to cart.
Button "Add to cart"
Main purchase button. Option “Show only text” hides icon and displays text only.
Show dynamic checkout buttons
Displays quick payment buttons (PayPal, Apple Pay, etc.) using the payment methods available in your store.
Show recipient information form for gift cards
Enables buyers to send gift cards with a scheduled delivery date and a personal message.
Show wishlist
Adds a wishlist button allowing customers to save products for later.
Show compare
Adds a compare button for product feature comparison.
INPUT
Background – Sets background color of input fields (e.g., quantity selector).
Border – Defines the border color of input fields.
Text – Sets the color of text inside input fields.
Icon – Adjusts icon color within input elements.
Background hover – Controls background color of inputs when hovered.
Border hover – Sets border color of inputs on hover.
Outline hover – Defines outline color when hovering over an input field.
Text hover – Sets text color of input fields on hover.
Icon hover – Changes icon color inside input fields on hover.
ADD TO CART BUTTON
Show background – Toggles background visibility for the “Add to cart” button.
Background – Sets the main background color.
Background gradient – Applies gradient background to the button.
Text – Sets text color.
Icon – Adjusts icon color.
Show background on hover – Enables background color change on hover.
Background hover – Defines hover background color.
Background gradient hover – Sets gradient background color for hover state.
Text hover – Defines hover text color.
Icon hover – Changes icon color when hovered.
Enable shadow – Adds a drop shadow to the button.
DYNAMIC CHECKOUT BUTTONS
Background – Sets background color for dynamic checkout buttons (PayPal, Apple Pay, etc.).
Text – Defines text color.
Background hover – Sets hover background color.
Text hover – Changes text color on hover.
WISHLIST BUTTON
Show background – Toggles background visibility.
Background – Sets background color.
Background gradient – Applies gradient background.Icon – Sets icon color.
Show background on hover – Enables background color change on hover.
Background hover – Defines hover background color.
Background gradient hover – Applies gradient color on hover.
Icon hover – Changes icon color on hover.
Enable shadow – Adds drop shadow.
COMPARE BUTTON
Show background – Toggles background visibility.
Background – Sets background color.
Background gradient – Applies gradient background.Icon – Sets icon color.
Show background on hover – Enables background change on hover.
Background hover – Defines hover background color.
Background gradient hover – Applies gradient background on hover.
Icon hover – Defines hover icon color.
Enable shadow – Adds a drop shadow.
CHECKBOX
Background – Sets background color of checkboxes.
Border – Defines border color of checkboxes.
Text – Sets label text color.
Focused background – Specifies background color when focused.
Border hover – Defines border color on hover.
Text hover – Changes label text color on hover.
Focused icon – Sets icon color when focused.
Countdown
Displays a countdown timer to create urgency for sales or promotions.
Option Group
Options and Explanation
Heading size
Medium, Small – Sets the visual size of the countdown heading text. Larger size (Medium) provides emphasis, while Small creates a more compact design.
Heading
Defines the main title text displayed above or beside the countdown timer. Used to introduce or describe the purpose of the countdown.
Colors
Base – Sets the main text color used across the countdown section.Lines – Defines the color of divider lines or borders within the countdown area.
Countdown
Icon – Sets the color or style of the countdown icon (if displayed).
Counter text – Defines the color of the numbers or labels showing time values (days, hours, minutes, seconds).
Counter box – Adjusts the background or border color of each time unit box.
Background – Sets the general background color for the entire countdown component.
Custom liquid
Allows adding custom Liquid code for advanced content or dynamic elements.
Allows you to add custom HTML, CSS, or Liquid code directly into the section or block. This element provides full flexibility to display custom content, widgets, or dynamic elements that are not available through standard theme settings. You can use it to insert third-party integrations, custom formatting, or special functionality.
Description
Shows the product’s full or short description to provide details to the customer.
Option
Explanation
Heading
Sets the heading text for the description block.
Description
Include a heading that explains the content.
Icon
Adds an icon to visually represent the content.
Heading size
Sets the size of the heading. Options: Medium, Small.
Type
Defines the content type: Text, Tab, Tab opened. The accordion will work with adjacent tabs of the selected type.
Open tab in customize theme
Opens the tab automatically in the theme editor for easier content editing (works only in admin panel).
Fake cart counter
Shows a simulated cart activity counter to create urgency or social proof.
This block displays a random number of items added to the cart by other users. The minimum value must be less than the maximum.
In this element you can set the options: Minimal - 1-100, Maximum - 1-100 (if the minimal option is 1), Delay - 5-60
The text of the block can be found in this path: Edit default theme content > Sections > Product page
Fake people counter
Displays a simulated number of people viewing or purchasing the product to enhance trust and urgency.
This block shows a random number of visitors to the product page. The minimum value must be less than the maximum.
Option
Explanation
Minimal
Sets the minimum number displayed in the counter. Value range: 1–100.
Maximum
Sets the maximum number displayed in the counter. Value range: 1–100.
Delay
Defines the time interval between counter updates. Value range: 5–60 seconds.
The text of the block can be found in this path: Edit default theme content > Sections > Product page
Free shipping
Displays a badge or message indicating that the product qualifies for free shipping, helping to incentivize purchase.
Option
Description
Colors
A group of settings used to define the visual appearance of the progress bar.
Progress bar
Sets the base color of the progress bar background, representing the unfilled portion.
Progress bar full
Defines the color of the filled portion of the progress bar, showing progress toward the free shipping goal.
Progress bar text
Sets the color of the text displayed on or near the progress bar, indicating progress or messages like “You’re $10 away from free shipping.”
Guaranteed Safe Checkout
Displays a badge or note assuring customers that the checkout process is secure.
Option
Explanation
Heading size
Sets the size of the heading. Options: Medium, Small.
Heading
Text displayed as the heading of the block.
Show heading
Toggles the visibility of the heading. If not checked, the heading appears only in the accordion tab on mobile.
Number of columns
Defines how many columns the items will be displayed in. Value range: 1–12.
Image ratio
Sets the aspect ratio of images. Options: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9).
Image fit
Determines how the image fits inside its container. Options: Cover, Contain.
Roundness of the image
Sets corner roundness. Options: Default, Custom, Custom roundness.
Subelement Options (#1–#18)
Option
Explanation
Image
Upload or select the image for each subelement (#1–#18).
Tooltip
Add a tooltip text for the image.
Link
Add a clickable link for the image.
Information
Displays additional product information, specifications, or details.
Option
Explanation
Show sku
Toggles the display of the product SKU (Stock Keeping Unit) on the product page.
Show barcode
Enables the display of the product barcode.
Show vendor
Shows the product’s vendor or brand name.
Show type
Displays the product type/category.
Inventory status
Indicates the stock level or availability of the product.
Option
Explanation
Hurry buy left
Displays a low-stock warning to create urgency for customers. This typically shows a message like “Only X left” when inventory is running low, encouraging faster purchases.
Link
Provides a link to additional product details or pages.
Option
Explanation
Icon
Sets the icon for the link.
Link label
Text displayed for the link.
More Information
Optional additional text for the link.
Link
URL or target of the link.
Colors
Show background – Toggles background visibility for the link.
Border – Sets the border color.
Text – Defines the text color.
Icon – Sets the icon color.
Show background on hover – Enables background color change on hover.
Background hover – Sets background color when hovered.
Background gradient hover – Applies gradient background on hover.
Border hover – Sets border color on hover.
Text hover – Changes text color on hover.
Icon hover – Changes icon color on hover.
Enable shadow – Adds a drop shadow effect.
Message
Lets customers send a direct question about the product.
Option
Explanation
Show icon
Toggles the display of an icon in the message block.
Text
Sets the main text content of the message.
Ask a Question
Enables a feature for users to ask a question related to the message.
Colors
Show background – Toggles background visibility for the message.
Border – Sets the border color.
Text – Defines the text color.Icon – Sets the icon color.
Show background on hover – Enables background color change on hover.
Background hover – Sets background color when hovered.
Background gradient hover – Applies gradient background on hover.
Border hover – Sets border color on hover.
Text hover – Changes text color on hover.
Icon hover – Changes icon color on hover.
Enable shadow – Adds a drop shadow effect.
Pop-up
Adds a link that triggers a pop-up, which can display promotions, product info, or marketing messages.
Option
Explanation
Icon
Sets the icon for the pop-up link.
Link label
Text displayed for the pop-up link.
Pop-up Link Text
Text that appears on the clickable pop-up link.
Content heading
Heading text shown inside the pop-up.
Content
Main content displayed in the pop-up.
Content from page
Option to pull content directly from a page in the store.
Colors
Show background – Toggles background visibility for the pop-up.
Border – Sets the border color.
Text – Defines the text color.Icon – Sets the icon color.
Show background on hover – Enables background color change on hover.
Background hover – Sets background color when hovered.
Background gradient hover – Applies gradient background on hover.
Border hover – Sets border color on hover.
Text hover – Changes text color on hover.
Icon hover – Changes icon color on hover.
Enable shadow – Adds a drop shadow effect.
Price
Shows the product price, including sale or discounted price if applicable.
Option
Explanation
Show badge "Sale"
Toggles the display of a "Sale" badge when the product is discounted.
Show tax
Displays tax information for the product price.
Show shipping
Shows shipping information alongside the price.
Price size
Sets the size of the price text. Options: Extra Large, Large, Medium, Small, Extra Small.
Colors
Regular Price – Sets the color of the regular price.
Sale Price – Sets the color of the sale price.
Old price – Sets the color of the original price when a discount is applied.
Review stars
Displays customer review ratings as stars to provide social proof.
Displays reviews from product. An app is required for product ratings. Learn more
By default, the theme does not have product ratings. Rating stars will start working with the installed rating app.
If the app is installed, you need to enable review stars in the theme settings under the Product review stars tab.
You can enable/disable here the option: Review count
Share
Provides buttons for customers to share the product on social media or via other channels.
Option
Explanation
Show icon
Toggles the display of an icon in the share block.
Text
Sets the main text for the share block. If a link is included in social media posts, the page’s featured image will be shown as the preview image. A store title and description are included with the preview image.
Colors
Show background – Toggles background visibility for the share block.
Border – Sets the border color.
Text – Defines the text color.
Icon – Sets the icon color.
Show background on hover – Enables background color change on hover.
Background hover – Sets background color when hovered.
Background gradient hover – Applies gradient background on hover.
Border hover – Sets border color on hover.
Text hover – Changes text color on hover.
Icon hover – Changes icon color on hover.
Enable shadow – Adds a drop shadow effect.
Text
Additional customizable text for any other messages or details.
Option
Explanation
Icon width
Sets the width of the icon in pixels (20–100 px).
Align text relative to icon
Adjusts the position of text in relation to the icon (top or center).
#1–#5
Represents subelements where you can set individual content and icons.
Icon
Upload or select an icon for each text item.
Content
Add text or HTML content for each subelement.
Colors
Heading – Sets the heading color. H1–H6 styles can be created using the content field.
Text – Defines the main text color.
Link – Sets the color of links (created through the content field).
Icon – Sets the color of the icon.
Lines – Defines the color of decorative or divider lines.
Text box – Sets the background color or styling for the text box.
Title
Displays the product’s name prominently.
Option
Explanation
Heading size
Sets the size or HTML tag of the title text. Options: H1, Extra Large, Large, Medium, Small, Extra Small.
Colors
Text – Defines the title text color.
Text hover – Sets the title text color when hovered.
Variant picker
Allows customers to select product variants, such as size or color.
Option Group
Options and Explanation
Type – Selects how product variants are displayed: Dropdown or Pills.
Heading size – Sets the size of the variant heading (Medium or Small).
Buttons in row – Defines how many variant buttons appear in one row. Options: Auto or 2–12.
Colors in row – Sets the number of color swatches displayed per row. Options: Auto or 8–24.
Images in row – Determines how many variant images appear in one row. Options: Auto or 4–12.
Info popup next to option name
Type option name to link content – You may set text, dynamic source, or page.
#1–#6 – Subelements for each variant option.
Option name – Name of the variant (e.g., Color, Size).
Popup content – Content displayed in the popup.
Popup content from page – Pulls content directly from a page.
VARIANTS IMAGE BORDER
Active border – Sets the border style or color for the active variant image.
VARIANTS BUTTONS
Background – Sets button background color.
Border – Sets button border color.
Text – Defines button text color.
Background hover – Sets button background color on hover.
Border hover – Sets button border color on hover.
Text hover – Sets button text color on hover.
Background sold out – Background color for sold-out buttons.
Border sold out – Border color for sold-out buttons.
Text sold out – Text color for sold-out buttons.
DROPDOWN SWATCHES
Background – Sets the background color of swatches.
Border – Sets border color of swatches.
Text – Sets text color for swatches.
Icon – Sets icon color for swatches.
Background hover – Background color on hover.
Border hover – Border color on hover.
Outline hover – Outline color on hover.
Text hover – Text color on hover.
Icon hover – Icon color on hover.
Location: Sections -> Templates -> Products: Featured Product
Featured Product – Options Overview
Option
Brief Explanation
Product
Selects the product to feature in this section.
Layout
Controls the general layout structure of the featured product section.
Top spacing – None / Small / Medium / Normal
Sets the vertical spacing above the section.
Width – Default / Boxed / Wide
Defines the section width. The Wide option is optimized for screens 1440px and wider.
Section desktop internal width
Adjusts the maximum internal width of the section on desktop devices.
Content width
Controls how wide the content area (text and buttons) appears within the section.
Desktop padding
Adds inner spacing (padding) around section content for balanced design.
Desktop gallery position – Left / Right
Determines whether the product image gallery appears on the left or right side of the content.
Blocks top spacing
Product sidebar content, 10-100px
Blocks mobile top spacing
Product content, 10-60px
Media
Manages product images, videos, and 3D models used in the section.
Learn more about media types.
Link or help text that explains supported media file types and formats.
Desktop content position – Top / Sticky / Center
Sets how the content is positioned vertically next to the product gallery on desktop.
Desktop layout – Slider without thumbnails / Thumbnails vertical / Thumbnails horizontal / 1 column / 2 columns / Stacked
Chooses the gallery layout style for desktop displays.
Mobile layout – Slider without thumbnails / Thumbnails / Dots
Sets how the media gallery is displayed on mobile devices.
Image ratio – Auto / Portrait (3:4) / Landscape (4:3) / Square (1:1) / Social story (9:16) / Widescreen (16:9)
Defines the aspect ratio for product images in the gallery.
Dividing line
Show
Toggles the visibility of a horizontal divider above the section.
Background
Background – Hide / Color / Gradient / Image
Sets the background style of the section.
Colors
Base
Defines the main text color of the section.
Accent
Sets the highlight color for interactive elements.
Lines
Controls the color of dividers and border lines.
Media button
Adjusts the color of buttons related to media interactions (e.g., zoom or play).
Background (Slider, zoom buttons)
Sets the background color for slider or zoom buttons.
Icon (Slider, zoom buttons)
Controls the icon color of slider or zoom buttons.
Background hover
Defines the background color of media buttons when hovered.
Icon hover
Sets the hover color of media icons.
Gallery thumbnails
Controls the color of image thumbnails in the product gallery.
Thumbnails border
Defines the border color or style around gallery thumbnails.
Mobile thumbnails dots
Sets the color or appearance of navigation dots under mobile thumbnails.
Example of the section:
Last updated