# Collection list banner 🔥

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FK2EWf8E2cNAgrjaAtwc3%2FHyper%20docs%20screenshot%20do%20not%20delete%20(43).jpg?alt=media&#x26;token=cae01fd9-7f36-461e-9777-005134070ace" alt=""><figcaption></figcaption></figure>

Display a curated selection of collections in a clean grid layout, paired with a promotional banner on the left. This layout enhances browsing and helps customers quickly explore your product range.

## How to add a Collection list banner section to your Shopify store

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Collection list banner**
3. Make necessary changes
4. **Save.**
   {% endhint %}

:writing\_hand: *To know more about creating and editing collections, see:* [*This tutorial*](https://youtu.be/M0DoTpdYPWU)*.*

## How to edit a Collection list banner section

### Section settings

<details>

<summary>Section header</summary>

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</details>

<details>

<summary>Card settings</summary>

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F4Ozrw6dL9ieG9E0zdgQR%2Fimage.png?alt=media&#x26;token=72ccaec8-9202-4ad8-83b8-36473fc14f57" alt=""><figcaption></figcaption></figure>

* **Color scheme**: Select from predefined color schemes to match your store's branding.
* **Image ratio**: Use "Adapt to image" to keep the image's original ratio or fix a ratio for uniformity.
* **Show rounded image:** Display the cards in square or round.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F9k9UDMdL9p9W8HGYfm4x%2Fimage.png?alt=media&#x26;token=9435f80c-8982-40bf-8172-011d2fa046af" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Grid settings</summary>

* **Number of columns on desktop**: Adjust the slider to set the number of columns.
* **Column gap** & **Row gap**: Control the gap between collection cards.
* **Grid border**: Enable if you want a clear separation between items. The Grid border once enabled will override the card's border.

</details>

<details>

<summary>Mobile layout</summary>

**Enable swiping on mobile** or display the collections in a 1/2/3 grid column layout.

<div><figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FCW5ggES0s57D63l72MGf%2Fimage.png?alt=media&#x26;token=1775c378-b41c-4ce1-86b2-5e362d3785bc" alt=""><figcaption><p>2 columns with swipe on mobile enabled</p></figcaption></figure> <figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FnBA4JwOQ6GDujB5UIOOR%2Fimage.png?alt=media&#x26;token=9ffb8a5a-12f0-4c7c-b705-b0260ab74de8" alt=""><figcaption><p>2 columns with swipe on mobile disabled</p></figcaption></figure></div>

</details>

### Block settings

{% tabs %}
{% tab title="Image card block" %}
Highlight a promotion, collection, or featured content using a custom image, headline, text, and optional call-to-action button — all wrapped in a clean and responsive layout.

Adjust the **Color scheme** for the block. Learn more [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")

#### Image settings

* **Image**: Upload an image for the card.
* **Image overlay opacity**: Add a dark overlay for better text readability.

#### Content settings

* **Content position**: Choose where the text/button appears.
* **Content alignment**: Align text left, center, or right.
* **Content spacing**: Adjust padding around the text.
* **Content gap**: Adjust the gap between elements in the content.
* **Card link**: Add a link to the image that directs customers to a desired page.
* **Subheading & Heading**: Add eye-catching titles.
* **Text**: Add supporting promo or product details.
* **Button label**:  Add a call-to-action button to the card content.
* **Button style**: Choose between primary, secondary, underline, etc.

#### Badge settings

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FZiIbwYGMZb7AiRNwi5Xj%2Fimage.png?alt=media&#x26;token=401394e4-316f-4c93-8135-5ab45f95f453" alt=""><figcaption></figcaption></figure>

You can add a **promotional badge** like “Save 40%” or “New” to catch the shopper’s attention with deals or labels.

* **Show badge**: Toggle on/off.
* **Color scheme**: Style it to match your theme.
* **Shape**: Circle or Square.
* **Position**: Top right/Top left/Button right/Button left.
* **Subtext & Text**: Customize your badge message (e.g. Save / 40%).

{% hint style="info" %}
The size of the badge depends on the length of the badge content.
{% endhint %}

#### Mobile settings

* Choose a **mobile-specific image** if needed for better display.
* Set how the content is aligned on mobile: Left/Center/Right.
  {% endtab %}

{% tab title="Collection block" %}
Select a collection for the block. It automatically takes the collection's featured image and title. You can also upload a new image/add a custom title for the section.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FjKh4oGQHAaUqeGItVbOC%2Fimage.png?alt=media&#x26;token=4eac1db4-634e-4678-89c7-162ce0529e97" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></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/hyper-theme/theme-sections/collection-list-banner.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.