# 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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;token=0a9ddc02-cda1-49f7-8c51-341b6b95bd4c" alt=""><figcaption></figcaption></figure>


---

# 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/minimog-theme/theme-sections/collection-showcase.md?ask=<question>
```

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.
