> 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/collections-and-products/collection-page/collection-banner.md).

# Collection banner

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" 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>

{% tabs %}
{% tab title="With banner image" %}
![](/files/lkHNXaeTtuy0AyHNOcDO)
{% endtab %}

{% tab title="Without banner image " %}
![](/files/sw1Mvdpg7BvKShc1YBBO)
{% endtab %}
{% endtabs %}

Display a banner or background with the highlighted features or offers in the particular collection page can boost your sales.

## How to add the Collection banner section to your Shopify store <a href="#how-to-add-an-image-gallery-section-to-your-shopify-store" id="how-to-add-an-image-gallery-section-to-your-shopify-store"></a>

{% hint style="info" %}
Steps

1. In the theme editor (**Customize**), open the template selector
2. Select **Collections**, then **Default collection.**
3. On the left-side bar, add **Collection banner.**
4. Make necessary changes.
5. **Save** the settings.
   {% endhint %}

## How to edit a Collection banner section

### Section settings

#### General

You can choose your **Container type** for the Collection banner as:

* Default;
* Full width;
* Use container box.

Select the **Color scheme** for the section.&#x20;

{% hint style="info" %}
Set up your Color schemes anytime in the Theme settings > [Colors](/minimog-theme/theme-settings/colors-and-color-schemes.md).
{% endhint %}

<figure><img src="/files/xmSPKqvbC378Gms56jio" alt=""><figcaption></figcaption></figure>

#### Breadcrumb

<figure><img src="/files/626JON9klIJ8WkMeMc84" alt=""><figcaption></figcaption></figure>

Control how breadcrumbs are displayed on the collection page:

* **Breadcrumb inside** - Breadcrumb appears inside the banner.
* **Breadcrumb outside** - Breadcrumb appears outside the banner.
* **Breadcrumb outside no border** - Breadcrumb outside without a divider.
* **Without breadcrumb** - Hides breadcrumbs completely.

{% tabs %}
{% tab title="Breadcrumb inside" %}

<figure><img src="/files/8oXsaZRcxFQBDl03JSRK" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Breadcrumb outside" %}

<figure><img src="/files/wRzwIdJUpauMb8bT3bLb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Breadcrumb outside no border" %}

<figure><img src="/files/YIItWwiiAKF8JyAZ0gcw" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Without breadcrumb" %}

<figure><img src="/files/LEmmxUAZnzMWrWX3Orcj" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Settings

These options control how the image is displayed inside the Collection Banner.

**Image**

<figure><img src="/files/7EvBuIv43iZgzAebFGmp" alt=""><figcaption></figcaption></figure>

Select the image used in the banner.

**Image position**

<figure><img src="/files/7gPsJXk1yMhvvgrULoWr" alt=""><figcaption></figcaption></figure>

Controls where the image appears in relation to the banner content.

Available options:

* **Top**
* **Right**
* **Bottom**
* **Left**
* **Use image as background**

{% tabs %}
{% tab title="Top" %}

<figure><img src="/files/0bdUUp8zgGdzzkzELAUK" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="/files/7oOLFvaZGjt79q5v9t4u" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom" %}

<figure><img src="/files/k2FNMAOn00rVI8kmui1k" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Left" %}

<figure><img src="/files/IW71ttzI6uDtpRU4hjaW" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Use image as background" %}

<figure><img src="/files/DP78gnIvAmpFFw8Qq11e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Enable parallax effect**

<figure><img src="/files/LapGG23fNjZO8LPKI36c" alt=""><figcaption></figcaption></figure>

Adds a subtle scrolling animation to the banner image.

{% hint style="warning" %}
This option works **only when** **Image position** is set to **Use image as background**.
{% endhint %}

**Parallax direction**

<figure><img src="/files/1Kv8Zl0BuJRwZNPm1l7q" alt=""><figcaption></figcaption></figure>

Controls how the image moves when scrolling:

* **Vertical** - Image moves up and down
* **Horizontal** - Image moves left and right
* **Zoom** - Image gently zooms in/out

#### Content settings

<figure><img src="/files/ownbpyEgzqESRJiu0TBL" alt=""><figcaption></figcaption></figure>

**Content alignment:** Defines how the banner text is aligned within the banner area.

* **Left**
* **Center**
* **Right**

**Text color:** Controls the color of the banner text.

* **Dark**
* **Light**
* **Inherit** (uses color scheme default)

**Uppercase title:** Forces the collection title to display in uppercase letters.

#### Description

**Show description**

<figure><img src="/files/8jmkLudWL5WbFtZHBvqH" alt=""><figcaption></figcaption></figure>

Toggles the visibility of the collection description.

* When enabled, the description is pulled from:\
  **Products → Collections → Description**
* When disabled, no description text is displayed in the banner.

**Show view more button**

<figure><img src="/files/QAgclsoJY05Ziy23s18Z" alt=""><figcaption></figcaption></figure>

Adds a **Show more / Show less** button when the description is longer than the visible area.

* Helps keep the banner compact
* Recommended for longer descriptions

<figure><img src="/files/LpZkxhM7BY3hdguDzlWF" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This option works only when **Show description** is enabled.
{% endhint %}

**Text line limit**

<figure><img src="/files/WJBOZu9TKN1k6Dcsv9kQ" alt=""><figcaption></figcaption></figure>

Sets how many lines of text are visible before the description is collapsed.

Available options:

* **1 line**
* **2 lines**
* **3 lines**
* **4 lines**

If the description exceeds the selected limit, it will be hidden behind the **Show more** button.

<figure><img src="/files/egFXrjbqvSO9BM3Qsilj" alt=""><figcaption></figcaption></figure>

**Button style**

<figure><img src="/files/h4dn0AV3VDyKvH12rmKb" alt=""><figcaption></figcaption></figure>

Controls the appearance of the **Show more / Show less** button.

Available styles:

* **Primary button**&#x20;
* **Secondary button**
* **White button**
* **Underline button**

Choose a style that matches your banner design and background.

**Button size**

<figure><img src="/files/pF6KnPOZIbvmq9CJHJWM" alt=""><figcaption></figcaption></figure>

Sets the size of the **Show more / Show less** button:

* **Small**
* **Medium**
* **Large**

**Description for all products**

<figure><img src="/files/EdQL2DKQFKuzVtyybrpw" alt=""><figcaption></figcaption></figure>

Use this field to add a **custom description that appears only on the “All products” page**.

* Only affects the **All products** collection
* Does not change other collections
* Replaces the default description on the All products page

<figure><img src="/files/5T9XU5XwziZoGfbv4G3w" alt=""><figcaption></figcaption></figure>

### Block settings

You can add multiple **Custom banner** blocks to the **Collection banner** section.

<figure><img src="/files/ZVq8cYscbfUYAtf07k1M" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If a Custom banner matches the current collection, it will override the default banner image set in the section settings.
{% endhint %}

#### Collection

<figure><img src="/files/T5MREYLW630Kn1870YbM" alt=""><figcaption></figcaption></figure>

Select the collection where this Custom banner should appear.

> This setting is required.\
> The banner will not display unless a collection is selected.

#### Image

<figure><img src="/files/yz4QQeke8T0ZnBOvvvuF" alt=""><figcaption></figcaption></figure>

Upload or select the image used for desktop devices.

* Overrides the default banner image

<figure><img src="/files/YhTb8wNPLOFxdOM3HxYH" alt=""><figcaption></figcaption></figure>

#### Image mobile

<figure><img src="/files/JvH6JtzUYIBeWPiorbMQ" alt=""><figcaption></figcaption></figure>

Optional image displayed on mobile devices.

* Helps ensure proper cropping and performance on smaller screens
* If not set, the desktop image will be used

<figure><img src="/files/tSAnvHD1pC17rL9cL4hg" alt=""><figcaption></figcaption></figure>