{% tabs %}
{% tab title="With banner image" %}
{% endtab %}
{% tab title="Without banner image " %}
{% 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
{% 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.
{% hint style="info" %}
Set up your Color schemes anytime in the Theme settings > [Colors](/minimog-theme/theme-settings/colors-and-color-schemes.md).
{% endhint %}
#### Breadcrumb
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" %}
{% endtab %}
{% tab title="Breadcrumb outside" %}
{% endtab %}
{% tab title="Breadcrumb outside no border" %}
{% endtab %}
{% tab title="Without breadcrumb" %}
{% endtab %}
{% endtabs %}
#### Settings
These options control how the image is displayed inside the Collection Banner.
**Image**
Select the image used in the banner.
**Image position**
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" %}
{% endtab %}
{% tab title="Right" %}
{% endtab %}
{% tab title="Bottom" %}
{% endtab %}
{% tab title="Left" %}
{% endtab %}
{% tab title="Use image as background" %}
{% endtab %}
{% endtabs %}
**Enable parallax effect**
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**
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
**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**
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**
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
{% hint style="info" %}
This option works only when **Show description** is enabled.
{% endhint %}
**Text line limit**
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.
**Button style**
Controls the appearance of the **Show more / Show less** button.
Available styles:
* **Primary button**
* **Secondary button**
* **White button**
* **Underline button**
Choose a style that matches your banner design and background.
**Button size**
Sets the size of the **Show more / Show less** button:
* **Small**
* **Medium**
* **Large**
**Description for all products**
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
### Block settings
You can add multiple **Custom banner** blocks to the **Collection banner** section.
{% 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
Select the collection where this Custom banner should appear.
> This setting is required.\
> The banner will not display unless a collection is selected.
#### Image
Upload or select the image used for desktop devices.
* Overrides the default banner image
#### Image mobile
Optional image displayed on mobile devices.
* Helps ensure proper cropping and performance on smaller screens
* If not set, the desktop image will be used
---
# 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/collections-and-products/collection-page/collection-banner.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.