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
  • Text Font, Spacing, and Styles

    • Font: Choose from hundreds of fonts. You can also upload your own fonts to Foxify.

    • Weight and Size: Define the font weight and font size of the text.

    • Text case: Click the icons to set the text's capitalization: As typed , Upper case AG, Title case Ag, or Lower case ag.

    • Spacing: Change the spacing between the lines and characters in the text box.

    • Text style: Normal/Italic.

  • Spacing: Adjust the spacing (padding and margin) of the element.

  • Backgrounds: Set background to the theme either with a color or a media. If a color and a media are set as the background of an element at the same time, it will prioritize the media.

  • Borders: Apply a border to the element and define the border radius value.

  • Effects: Enable/ disable the box shadow to make the element stand out

Animations

Animations

Last updated

Was this helpful?