> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/collection-showcase.md).

# Collection showcase

A guide to set up a collection showcase.

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&amp;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FFT3ey6d2u73Ez3kooApN%2Fimage.png?alt=media&amp;token=0d07e4cf-ee56-4f18-a008-617a6268f1b9" alt=""><figcaption></figcaption></figure>

Collection showcase directs visitors' attention toward a unique collection with the provided unique layout and smooth effect, promoting a collection using the collection showcase can effectively convey the type of content, and encourage customers to explore further.&#x20;

{% hint style="success" %}
**Steps:**

1. In the theme editor (**Customize**) > click **Add section**
2. Select **Collection showcase.**
3. **Save.**
   {% endhint %}

## Section settings

### **General**

Adjust the **Container type** (Default/Full width/ Use container box), **Color scheme** for this section, and **Color scheme tabs** for the blocks.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F5n7BVNEOohVfr2muk5aX%2Fimage.png?alt=media&amp;token=6d7a56b5-6701-4f41-be81-d59faeec89a8" alt=""><figcaption></figcaption></figure>

### **Layout**

Adjust the **Desktop image position** (Left/Right). On mobile, the image position will be optimized automatically.

You can also change the number of shown products - **Product to show** (between 3 and 12).&#x20;

* If the number of products is above 3, the layout will automatically switch to a slider.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FPVNym20UmkpdXpXxdEAl%2Fimage.png?alt=media&amp;token=d38f3832-7907-461e-a5e0-32d77dad1792" alt=""><figcaption></figcaption></figure>

### **Product card settings**

Choose the **Image aspect ratio** you prefer:

* Original aspect ratio
* 1:1
* 3:4
* 4:3
* 16:9

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FGgRJ5LV9OEnqpaNQJ3gX%2Fimage.png?alt=media&amp;token=e081ae81-b9d2-4a89-a7f7-7fcf21ad5c71" alt=""><figcaption></figcaption></figure>

## Block settings

Add a preferable or unique **Collection** that you want to showcase and give this collection an **Alias.**&#x20;

* If you want to use the collection name, leave the **Alias to collection** field blan&#x6B;**.**

You can choose the background **image** for the container having aliases/ collection names.

Leave the **image** field blank if you want to use the background color of the **Color scheme tabs** in **Section settings**.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fj98Vzc4DAj2Uc42XwQSF%2Fimage.png?alt=media&amp;token=42e780c9-9486-4299-8857-606a213d1eea" alt=""><figcaption></figcaption></figure>

Insert the content you want in the **Heading** and **Subheading** for the collection list in the showcase to grab customers' attention&#x20;

* Leavee them blank if you do not want to display them.&#x20;

You can also change the **Heading size** to Medium/ Large to make the content more visible on your website.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FYqvmsInut708kwBQhsfC%2Fimage.png?alt=media&amp;token=450cd224-f11e-4d8a-9bf9-ec4d84106ae6" alt=""><figcaption></figcaption></figure>

The call-to-action button will direct customers to the collection pages.

Give the button a **label** (leave the label blank to hide the button)**,** a specific **Button style**&#x20;

* Primary button
* Secondary button
* Underline button
* White button

and the **Button size**&#x20;

* Button small
* Button medium
* Button large

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FJ0s8yTywottj3Vww1kVo%2Fimage.png?alt=media&amp;token=0a9ddc02-cda1-49f7-8c51-341b6b95bd4c" alt=""><figcaption></figcaption></figure>
