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
Steps:
In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
In Quick add, select Collection tabs.
Drag the Collection tabs onto your canvas.
How to edit Collection tabs
Steps:
Select the relevant Collection tabs element in the editor.
Use the tools bar above the selected Collection tabs element to quickly edit it.
All the formatting tools below can be found in the right-hand sided Inspector panel.
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
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.
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.
Color Fill: Set the color and background color of the element.
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.
Borders: Apply a border to the element and define the border radius value.
Color Fill: Set the color and background color of the element.
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.
Borders: Apply a border to the element and define the border radius value.
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.
Animations
Animations
Last updated
Was this helpful?