# 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
{% hint style="success" %}
**Steps:**
1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Quick add**, select **Collection tabs.**
3. Drag the **Collection tabs** onto your canvas.
{% endhint %}
## How to edit Collection tabs
{% hint style="success" %}
**Steps:**
1. **Select** the relevant Collection tabs element in the editor.
2. 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.
{% endhint %}
### 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.
{% tabs %}
{% tab title="Adapt to first image" %}
{% endtab %}
{% tab title="Square (1:1)" %}
{% endtab %}
{% tab title="Portrait (3:4)" %}
{% endtab %}
{% tab title="Landscape (4:3)" %}
{% endtab %}
{% endtabs %}
* **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
{% tabs %}
{% tab title="Content Top" %}
{% endtab %}
{% tab title="Content Middle" %}
{% endtab %}
{% tab title="Content Bottom" %}
{% endtab %}
{% endtabs %}
* **Image position:** Choose Left/Right
{% tabs %}
{% tab title="Image Left" %}
{% endtab %}
{% tab title="Image Right" %}
{% endtab %}
{% endtabs %}
* **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.
{% content-ref url="../layout-and-styling/constraints" %}
[constraints](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints)
{% endcontent-ref %}
{% tabs %}
{% tab title="Element container" %}
* **Text Font, Spacing, and Styles**
* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **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
{% endtab %}
{% tab title="Collection items" %}
* **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.
{% endtab %}
{% tab title="Colletion content" %}
* **Text Font, Spacing, and Styles**
* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **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.
{% endtab %}
{% tab title="Collection titles: Normal state" %}
* **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](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **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.
{% endtab %}
{% tab title="Collection titles: Active state" %}
* **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](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **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.
{% endtab %}
{% tab title="Ordered number" %}
* **Text Font, Spacing, and Styles**
* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **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*.
{% endtab %}
{% endtabs %}
### Animations
{% content-ref url="../layout-and-styling/animations" %}
[animations](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/animations)
{% endcontent-ref %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/collection-tabs.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
