Featured product

Featured product

Featured product displays details for a product and lets customers add the product/variant to their shopping cart. Product details are added as blocks and include the product title, price, description, quantity selector, variant selectors, SKU, availability and media.

Section settings for featured product are listed in the table below.

SettingDescription
ProductAdd a product to be shown in the section.
Desktop layoutUse this setting to select the product gallery layout on desktop devices.

"Thumbnails" will display the featured product media in a single media gallery, with remaining product media displayed as thumbnails. Clicking on a thumbnail will display the selected media in the single media gallery. The full screen gallery modal can be opened by clicking on the single media gallery. This is the default layout.

"Tiles" will display all product media as tiles. The featured product media will be displayed as a full width tile, while remaining product media will be displayed as either half width or full width tiles depending on the media type. Clicking on product image tiles will open the full screen gallery.
Enable thumbnail scrollUse this setting to enable horizontal thumbnail scrolling for the thumbnail layout.
Icon size
Select the icon size for collapsible rows.
Section widthSelect the section width.
Color schemeSelect the color scheme for the section.
Popup gallery color scheme
Select the color scheme for the pop-up/full screen gallery.
Section padding
Top paddingSelect the top padding for the section.
Bottom paddingSelect the bottom padding for the section.

Blocks available for featured product are set out in the table below.

SettingDescription
TitleDisplays the product title.
PriceDisplays the product/variant price and badges (e.g. sale badges).
SKUDisplays the product/variant SKU.
Product ratingDisplays the product/variant rating.
DescriptionDisplays the product description.
Variant picker
Allows customers to change the product variant before adding to cart.
Quantity selectorAllows customers to change the product quantity before adding to cart.
Buy buttonsDisplays the add to cart button and dynamic checkout buttons (if applicable).
Inventory statusDisplays the inventory status for the product/variant.
Collapsible row
Displays a collapsible row that expands to show text when clicked.
Contact form
Allows customers to make an enquiry regarding the product/variant.
ShareAllows customers to share the product/variant on their social media channels.
Pickup availability
Displays the pickup availability for the product/variant.
Pop-upDisplays a text link that opens a pop-up when clicked.
Complementary productsDisplays products that are complementary to the product.
Custom imageDisplays a custom image.
TextDisplays text.
Collapsible contact formDisplays a collapsible row that expands to show a contact form when clicked.
Icon with textDisplays an icon with text below.
Custom liquid
Allows you to add custom HTML or Liquid code.

    • Related Articles

    • Featured collection

      Featured collection displays one or more products in a collection, with each product shown as a product card. The appearance of product cards can be customized through the theme settings. Section settings for featured collection are listed in the ...

    • Product page

      The product page displays details for a product and lets customers add the product/variant to their shopping cart. Product details are added as blocks and include the product title, price, description, quantity selector, variant selectors, SKU, ...

    • Product card settings

      Product card settings are used to customize the appearance of product cards displayed in the collection page and featured collection sections. Product card settings are listed below and are accessed through the theme settings. Setting Description ...

    • Featured blocks

      Featured blocks is a versatile section that displays up to two image-central call to action blocks. Each block can contain an image displayed with a cutout style, heading, text, button and corner ribbon. The maximum number of blocks is 2. Section ...

    • How do I set up custom product badges?

      To set up a custom product badge, add a tag to the product that you wish to add the custom badge to, using the following format: "custom_badge_1-Name". The parts of the tag that should be changed are bold and italicised. The number represents the ...