# Collection showcase
The **Collection showcase element** is designed to highlight product categories in a visually engaging split-layout format. It combines lifestyle imagery with product display to capture attention and drive conversions.
## How to add a Collection showcase 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 showcase.**
3. Drag the **Collection showcase** onto your canvas.
{% endhint %}
## How to edit Collection showcase
{% hint style="success" %}
**Steps:**
1. **Select** the relevant Collection showcase element in the editor.
2. Use the tools bar above the selected Collection showcase 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.
* **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)
* **Banner image ratio:** Control how banner 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 %}
* **Image position:** Choose Left/Right.
{% tabs %}
{% tab title="Left" %}
{% endtab %}
{% tab title="Right" %}
{% endtab %}
{% endtabs %}
* **Card style:** Choose styling for your product cards.
{% tabs %}
{% tab title="Use global" %}
* Apply the product card styles defined in **Theme settings > Product cards**, ensuring consistent design across your store.
{% hint style="info" %}
Learn more: [Product Cards in Theme settings](https://docs.foxecom.com/foxify-app/page-management/theme-settings#product-cards)
{% endhint %}
{% endtab %}
{% tab title="Style 1" %}
{% endtab %}
{% tab title="Style 2" %}
{% endtab %}
{% tab title="Style 3" %}
{% endtab %}
{% tab title="Style 4" %}
{% endtab %}
{% tab title="Style 5" %}
{% endtab %}
{% tab title="Style 6" %}
{% endtab %}
{% endtabs %}
* **Product image ratio:** Defines the ratio of product images.
{% tabs %}
{% tab title="Use global" %}
* Apply the Image ratio defined in **Theme settings > Product cards**, ensuring consistent design across your store.
{% hint style="info" %}
Learn more: [Product Cards in Theme settings](https://docs.foxecom.com/foxify-app/page-management/theme-settings#product-cards)
{% endhint %}
{% endtab %}
{% tab title="Adapt to image" %}
{% endtab %}
{% tab title="Square (1:1)" %}
{% endtab %}
{% tab title="Portrait (3:4)" %}
{% endtab %}
{% tab title="Landscape (4:3)" %}
{% endtab %}
{% endtabs %}
* **Columns:** Sets the number of product columns displayed.
{% tabs %}
{% tab title="1 column" %}
{% endtab %}
{% tab title="2 columns" %}
{% endtab %}
{% tab title="3 columns" %}
{% endtab %}
{% endtabs %}
* **Text align:** Controls the alignment of text within the Collection showcase element.
{% tabs %}
{% tab title="Left-aligned" %}
{% endtab %}
{% tab title="Centered" %}
{% endtab %}
{% tab title="Right-aligned" %}
{% endtab %}
{% endtabs %}
### 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).
* **Size**: Define the 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 gap) 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="Element wrapper" %}
* **Spacing**: Adjust the gap of the element.
{% endtab %}
{% tab title="Products grid" %}
* **Spacing**: Adjust the gap of the product card.
{% endtab %}
{% tab title="Tabs" %}
* **Color Fill:** Set the color and background color of the tabs.
* **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).
* **Size**: Define the 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 padding of the element.
* **Borders**: Apply a border to the element and define the border radius value.
{% endtab %}
{% tab title="Tab active" %}
* **Color Fill:** Set the color and background color of the tab.
* **Spacing**: Adjust the padding of the element.
* **Borders**: Apply a border to the element and define the border radius value.
{% endtab %}
{% tab title="Content title" %}
* **Text Font, Spacing, and Styles**
* **Color:** Choose the color of the title.
* **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).
* **Size**: Define the font size of the text.
* **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-showcase.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.
