Collection tabs

Collection tabs element is an interactive navigation tool that allows you to display multiple product collections within a single section.

Each tab can showcase an image and description for its collection, providing a visually engaging and informative browsing experience in a clean, organized layout.

#How to add a Collection tabs element

#How to edit Collection tabs

#General settings

Manage collections:

• Add collections to add a new collection. You can add up to 10 collections within the Collection tabs element.
• You can also remove/duplicate/reorder a collection within the collection tabs.

Customize your collections:

• Select collection: Choose a collection that you want to display.
• Image: Upload or select an image to visually represent the collection.
• Title: Set a custom name for the tab.
• Description: Add supporting text to highlight features, promotions, or details about the collection.
• Button label: Define the call-to-action text for the button
• Button style: Apply a style to the button for visual consistency with your page design.

General:

• Behavior: Choose how users switch between tabs (Click/Hover)
• Image ratio: Control how product images are displayed.

• Show title action: Toggle the display of a clickable title for each collection.

• Show ordered number: Display a number for each tab in sequence.

• Open link in new tab: When enabled, collection links open in a new browser tab.
• Autoplay: Automatically cycle through collections.
• Change slide every: Set the interval (in seconds) for autoplay transitions.

Desktop layout:

• Content alignment: Choose Top/Middle/Bottom

• Image position: Choose Left/Right

• Image width: Adjust the percentage of the section width allocated to the image.

#Design settings

Size & Constraints Settings: Use these controls to define the element’s dimensions and positioning behavior across devices.

Constraints

#Animations

Animations