Featured collection #1 - #2 - #3 - #4

STEP 1: Add the section

Add Featured collection section to your desired position.

STEP 2: Add collections

Under Featured collection, you can add up to 3 Collection blocks. Click on the block to set up:

• Select the Collection to be featured.
• Enter a custom Description for the collection if needed. Choose the content height.
• You can toggle Show vendor to display vendor/brand name of the product.

STEP 3:

Repeat STEP 2 to set up other Collection blocks.

STEP 4: Style the section's general elements

Click on the Featured collection section to open the settings panel:

• Enter the Heading for the section. Adjust its size, tag, and alignment.
• At Mobile/Desktop layout, choose the number of rows, number of products per row, block width, spacing, and padding...
• Choose colors for block elements.

STEP 5: Click "Save" when done.

To make the section swipe in a carousel layout, follow this:

STEP 1: Click on Featured collection section to open its settings panel

STEP 2:

Scroll down to the Carousel setting group, then:

• Toggle "Enable carousel on desktop" to display the section in a carousel format on desktop devices.
• Choose the Carousel style between:
  • Horizontal: Products slide left–right.
  • Vertical: Products slide top–bottom.
• Select "Enable swipe on mobile" to allow users to swipe through the carousel on mobile devices for improved navigation.
• Turn on "Show navigation" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile.
• Tick "Auto-play" to automatically rotate through the items in the carousel. Set the "Change bar every" interval to determine how frequently the carousel items will automatically change.

STEP 3: Click "Save" when done.

The title card is used to provide additional information about promotions, sales, or details regarding the selected collection.

To set up:

STEP 1: Click on the Collection block that you want to add the title card.

STEP 2: Enable the title card

Scroll down to Title card settings group:

• Enable title card: Tick to add an image/or video with a title and description beside the product cards.
• Title card position:
  • Desktop: Choose Left or Right alignment.
  • Mobile: Automatically displays above or below the product cards, respectively, depending on the chosen alignment on desktop.
• Title card link: Enter a link that the customer will navigate when clicking on the title card.

(Sticky behavior: When enabled, the title card remains fixed in its position, even when scrolling through product cards or enabling the carousel feature on all devices.)

STEP 3: Add title card content

Still at Title card settings group:

• Card image/Video: Add an image or a video for the title card
• Add other settings used to set up the title card content, such as Heading, Text, Button, etc.
• Enable text overlay: Tick the box to make the text and button appear on top of the image.
• Overlay opacity: Change the opacity of the overlay.
• Image ratio: Change the image ratio of the title card.
• Replace card with featured product: Select a product to replace the whole title card.

STEP 4: Click "Save" when done.

To customize the Product cards' look, configure this:

STEP 1: Click on the Featured collections to open its settings panel, scroll down to Product cards settings group.

STEP 2: Layout & spacing settings

• Adjust the product title size at Title product card.
• Adjust side padding for Desktop and Mobile devices.
• Choose Content alignment.

STEP 3: Image & media settings

• Choose Image ratio and effects when hovering over product images at Image hover effect.
• At Number of additional images, choose how many extra images the card can reference.
• Choose background color for the cards.

STEP 4: Navigation settings

• Enable Next/Previous arrows and choose color for navigation arrows.
• Choose how long each slide automatically swipes.

STEP 5: Click "Save" when done.

Check out demo here.

Check out demo here.

Check out demo here.

Check out demo here.