# Collection showcase
The **Collection showcase element** lets customers browse several categories without leaving the page. Each collection gets its own image and product cards, and customers can switch between collections with one click.
## When to use Collection showcase
Use Collection showcase when you want to:
* **Showcase multiple product categories in one section** — let customers switch between collections instead of scrolling through separate sections.
* **Combine lifestyle imagery with products** — use a visual banner to introduce each collection while showing its products alongside it.
* **Help customers explore related categories** — group collections such as *New arrivals*, *Best sellers*, and *Accessories* in one interactive section.
## How is this different from other collection elements?
| Option | What it does | Best for |
| ----------------------- | :---------------------------------------------------------------------- | -------------------------------------------------------------------- |
| **Collection showcase** | Highlight a collection with a large image alongside its products. | Giving a collection more visual emphasis while showing its products. |
| **Collection tabs** | Displays collections and their images in tabs. | Showing several collections in a compact, switchable layout. |
| **Collection list** | Show multiple collections at the same time using image cards in a grid. | Helping customers browse several product categories at once. |
## How to add a Collection showcase element
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.
## How to edit Collection showcase
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-side **Inspector** panel.
### General settings
#### **Manage collections**
| Option | What it does |
| ---------------------- | -------------------------------------------------------------------------------------- |
| **Add collections** | Add a new collection to the Collection showcase element.
(Maximum: 10 collections) |
| **Manage collections** | Remove, duplicate, or reorder collections directly within the collection showcase. |
#### **Customize collections**
| Option | What it does |
| --------------------- | ------------------------------------------------------------------------- |
| **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**
| Setting | Description | Options |
| ---------------------- | ----------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Behavior** | Choose how customers switch between tabs. | Use **Click** for a more deliberate interaction.
Use **Hover** when you want customers to switch collections quickly on desktop. |
| **Banner image ratio** | Control how banner images are displayed. | **Adapt to first image, Square (1:1), Portrait (3:4), Landscape (4:3)**
Use **Adapt to first image** when your collection images have different proportions. Choose a fixed ratio when you want a more consistent layout. |
| **Image position** | Select the layout position for the image. | **Left** or **Right**
Choose the side that best balances the image and product grid in your layout. |
| **Card style** | Choose styling for your product cards. | **Use global, Style 1-6**
Use **Use global** to inherit the product card style from Theme settings > Product cards. Choose Style 1–6 when you want this element to use a different product card style. |
Apply the product card styles defined in **Theme settings > Product cards**, ensuring consistent design across your store.
Learn more: [Product Cards in Theme settings](https://docs.foxecom.com/foxify-app/foxstudio/page-customization/theme-settings#product-cards)
| Setting | Description | Options |
| ----------------------- | ---------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Product image ratio** | Defines the ratio of product images. | **Use global, Adapt to image, Square (1:1), Portrait (3:4), Landscape (4:3)**
Use **Adapt to image** when your products have different image proportions. Use a fixed ratio when you want all product cards to have a consistent appearance. |
| **Columns** | Sets the number of product columns displayed. | **1, 2, 3 column(s)**
Use **2** for most layouts. Use **1** to give a single product more focus, or **3** if your product images are small and simple. |
| **Text align** | Controls the alignment of text within the Collection showcase element. | **Left-aligned, Centered, Right-aligned**
Use **Left-aligned** for easier scanning, especially when product titles or supporting text are longer. |
### Design settings
#### **Size & constraints settings**
Use these controls to define the element’s dimensions and positioning behavior across devices.
Constraints
#### Design attributes
| Option | What it does |
| --------------- | ---------------------------------------------------------------------------------------------------- |
| **Color fill** | Set the color and background color of the tabs. |
| **Spacing** | Adjust the spacing of the element:
**Padding/ Gap** |
| **Backgrounds** | Sets the background using a solid color or media.
*Media takes priority if both are selected.* |
| **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. |
| Option | What it does |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Font** | Choose from hundreds of integrated fonts/
[Upload your custom fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-add-custom-font) |
| **Weight and Size** | Adjust the font weight and size of the button label. |
| **Text case** | Set text capitalization:
**As typed/ UPPERCASE/ Title Case/ lowercase** |
| **Spacing** | Adjust the line and character spacing in the text box:
**Line height/ Letter spacing** |
| **Text style** | **Normal/ *Italic*** |
### Animations
Animations
## FAQs
#### Can I add multiple collections to a Collection showcase?
Yes. You can add up to **10 collections** to a Collection showcase.
#### Can I use a different image for each collection?
Yes. Select a collection and upload or choose an image to represent it.
## Related articles
Collection tabs