Featured Products

Highlight a single product with detailed information and imagery, alternatively select from product collections to display a tab based section. The Featured Products section is used to highlight selected products in a grid or slider layout.

How to Activate

1. Go to Theme Editor
   • Navigate to Online Store > Themes > Customize.
   • Click Add section and select Featured Products.
2. Select a Collection
   • Choose the collection to showcase products.
   • Add supporting text, pricing, and call-to-action buttons.
3. Customize Layout
   • Adjust spacing, background colors, and button styles.
4. Save Your Changes
   • Click Save to apply changes.

Customize

It is possible to customize the appearance of the tabs, including the text on the tab or the collection of products that will be displayed.

How to Customize

1. Go to Theme Editor
   • Navigate to Online Store > Themes > Customize.
   • Click  Featured Products.
   • Modify the heading, description, button text or links
   • Custom CSS can also be inserted here

To modify the tab data or collection of products:

1. Go to Theme Editor
   • Navigate to Online Store > Themes > Customize.
   • Locate  Featured Products
   • Under the Featured Products section, click on Collection Group

• Now, update the title, select which collection of products would show up, whether to display product variants
• By default, we enable Lazy load images to optimize page loading, this can be disabled if required

• Adding multiple collection group sections will display these in tabs on the page

Best Practices

• Use this section for promotions or new arrivals.
• Include high-quality product images.
• Keep descriptions concise and impactful.

The section supports two different block types:

• Collection – Displays products from a selected collection
• Custom Product – Displays individually selected products

This structure allows you to mix curated products with collection-based listings in a single section.

General settings

Section spacing

Top padding

Adds spacing above the Featured Products section.

Bottom padding

Adds spacing below the Featured Products section.

Section content

Heading

Main heading displayed above the product list.

Heading size

Controls the size of the heading text.

Text

Optional supporting text displayed below the heading.

Text size

Controls the size of the supporting text.

Layout

Controls the alignment of the heading and text:

• In-line
• Center
• Left

Button text

Label for the optional call-to-action button (for example: View all).

Button link

Destination link for the call-to-action button.

Layout settings

Desktop layout

Controls how products are displayed on desktop:

• Grid
• Slider

Products per row

Sets the number of products per row when desktop layout is set to Grid.

Number of rows

Controls how many rows of products are displayed when using the grid layout.

Mobile layout

Controls how products are displayed on mobile:

• 1 item per row
• 2 items per row
• Slider

Product cards

Product card style

Chooses the visual style of product cards:

• Shadow
• (Other styles if available in the theme)

Show product title and price

Toggles visibility of product titles and prices.

Show product swatch variants

Displays color or variant swatches on product cards.

Keep product titles on single line

Limits product titles to a single line with ellipsis overflow.

Card content background

Background color for product card content areas.

Product title & price color

Text color for product titles and prices across all cards.

Sale badges

Display sale badges

Shows sale badges on products with compare-at prices.

Sale badges enable;

Sale badges disable ;

Sale badge position

Controls where the sale badge appears on the product card:

• Top left
• Top right
• Bottom left
• Bottom right

Sale badge style

Controls the visual style of the sale badge (for example: Box).

Custom CSS

Custom CSS

Allows adding custom styles that apply only to this Featured Products section.

Collection (Block)

The Collection block displays products from a selected collection within the Featured Products section.

It also supports an optional featured image, overlay styling, and a call-to-action button.

Collection settings

Heading

Optional heading displayed above the collection block.

Collection

Selects the collection whose products will be displayed.

Lazy load images

Delays loading product images until they enter the viewport.

Recommended when the section appears below the fold.

Featured image

Image

Selects an optional featured image for the collection block.

Show image

Shows or hides the featured image.

Align with product images

Aligns the featured image height with the product card images for a consistent layout.

Image content

Title

Text displayed over the featured image.

Title color

Controls the color of the image title text.

Overlay opacity

Controls the opacity of the overlay applied on top of the featured image.

Overlay color

Sets the color of the overlay used to improve text contrast on the image.

Call to action button

Button text

Label displayed on the call-to-action button (for example: Shop now).

Button link

Destination URL for the button.

Button color

Controls the button color:

• White
• Black

Button size

Controls the size of the button:

• Small
• Medium
• Large

Button style

Controls the visual style of the button:

• Solid
• Outline
• Text

Enable quick add (Add to cart button)

Displays an Add to Cart button on product cards inside this collection block.

Behavior

• Products are pulled dynamically from the selected collection
• Featured image and CTA button are optional
• Overlay and text options improve readability on image backgrounds
• Block layout adapts automatically to grid or slider layouts defined in section settings

Custom Product (Block)

The Custom Product block allows you to highlight a single, specific product inside the Featured Products section.

It’s ideal for promoting a featured item, new release, or priority product independently from collections.

Product settings

Product

Selects the product to be displayed.

Show product card

Shows or hides the standard product card layout for the selected product.

Layout

Controls how the product content and image are arranged:

• Product left, image right

• Product right, image left

  (Available options depend on the theme layout configuration.)

Background image

Background image (Desktop)

Selects a background image displayed behind the product content on desktop devices.

Recommended size: 2000 × 1400 px for best visual quality.

Actions

Enable quick add (Add to cart button)

Displays an Add to Cart button directly on the product card for faster purchasing.

Behavior

• Displays a single, manually selected product
• Can be mixed with Collection blocks in the same Featured Products section
• Layout adapts automatically to the section’s grid or slider settings
• Quick add improves conversion by reducing navigation steps

Notes

• Use Custom Product blocks to highlight priority or promotional items
• Combine with Collection blocks to balance curated and dynamic product listings
• Background images work best with sufficient contrast for readability