# Banner with categories 🔥

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FQHmg91ytec6FbfjNlckn%2FHyper%20docs%20screenshot%20do%20not%20delete.jpg?alt=media&#x26;token=8ef13729-bc3a-4787-a2e6-03fa99f2067d" alt=""><figcaption></figcaption></figure>

The **Banners with categories** section allows you to display a grid of category icons or cards alongside up to two promotional banners. This is ideal for homepage navigation or spotlighting trending collections and deals.

<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>

## How to add a Banner with categories section to your Shopify store

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

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

## How to customize a Banner with categories section

### Section settings

<table><thead><tr><th width="263">Setting</th><th>Function</th></tr></thead><tbody><tr><td><strong>Container width</strong></td><td>Full width or fixed width layout.</td></tr><tr><td><strong>Color scheme</strong></td><td>Choose background and font styling. <br><em>Learn more:</em> <a data-mention href="../theme-settings/colors">colors</a></td></tr><tr><td><strong>Number of columns</strong></td><td>Adjust how many columns:<br>- of banners on desktop<br>- of category bar on mobile.</td></tr><tr><td><strong>Column gap</strong></td><td>Set spacing between category cards.</td></tr><tr><td><strong>Enable swipe on mobile</strong></td><td>By default, the banners are stacked. Toggle ON to make the category row horizontally scrollable on mobile.<br><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FY1w4kq2f5MFsz6Cj8LIa%2Fimage.png?alt=media&#x26;token=cc5706c8-c9a6-4169-9b2b-81f6c6d271a8" alt=""></td></tr><tr><td><strong>Top/Bottom padding</strong></td><td>Adjust spacing above and below this section.</td></tr></tbody></table>

### Block settings

{% hint style="info" %}
The section consists of **4 configurable block types**:

1. [#heading-block](#heading-block "mention")
2. [#button-block](#button-block "mention")
3. [#category-block](#category-block "mention")
4. [#banner-card-block](#banner-card-block "mention")
   {% endhint %}

#### Heading block :top:

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FSjGxuUwxf3vo72P5Mj5q%2Fimage.png?alt=media&#x26;token=3b5146bf-6d8c-4c8d-b660-9e309ad88c98" alt=""><figcaption></figcaption></figure>

Use this block to add a title to your **Category bar** such as **"Top Categories"** or **"Explore by Type"**.

<details>

<summary>✏️ Editable options</summary>

* **Text**: Enter your title.
* **Highlight text:** [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")

</details>

#### Button block 🔘

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FNC0I6sSoEor8Bsnn6ppE%2Fimage.png?alt=media&#x26;token=1a0b9873-a4da-46a5-adf2-527f6e918e40" alt=""><figcaption></figcaption></figure>

Optional CTA button at the bottom of the category bar.

<details>

<summary>✏️ Editable options</summary>

* **Button label**: (e.g., “View All Categories”)
* **Link**: Add a URL, page, or collection link
* **Button Style**:
  * Primary (solid button)
  * Secondary
  * Underlined
  * Plan
* **Icon (optional)**: Add a relevant icon (like →)

</details>

#### Category block 🗂️

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F72Yvn2H0FS2LVl125Iki%2Fimage.png?alt=media&#x26;token=94fb1ea1-e38b-40b4-b63e-f399706e4ac7" alt=""><figcaption></figcaption></figure>

Use these to display icons or images that link to your product categories or collections.

Each **Category block** contains:

| Setting     | Description                         |
| ----------- | ----------------------------------- |
| **Image**   | Upload an icon or small banner      |
| **Heading** | Short label (e.g., “Meat”, “Fruit”) |
| **Link**    | Directs to a page or collection     |

> 💡 **You can add as many Category blocks as needed.**

#### Banner card block 🖼️

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FjHLvAxxkdVWH0znc7ro7%2Fimage.png?alt=media&#x26;token=4374dfff-980b-4fec-9602-d61fdf305a73" alt=""><figcaption></figcaption></figure>

Use these for larger promo visuals next to or under categories. You can multiple banner cards.

Each **Banner card** includes:

| Setting                          | Description                                                                                                                                                                                                      |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image (desktop)**              | Main banner image for desktop                                                                                                                                                                                    |
| **Image (mobile)**               | Optional mobile-optimized image                                                                                                                                                                                  |
| **Column span**                  | <p>Decide how wide the banner appears across the grid (between 1-6).<br><em>The number of columns on desktop is set in section settings.</em> <a data-mention href="#section-settings">#section-settings</a></p> |
| **Row span**                     | Choose vertical space coverage (between 1-3).                                                                                                                                                                    |
| **Content**                      | Promo text                                                                                                                                                                                                       |
| **Button label/link**            | Add a CTA like “Shop Now” with a destination URL                                                                                                                                                                 |
| **Overlay opacity**              | Adjust dark/light overlay on the banner image                                                                                                                                                                    |
| **Content alignment & position** | Control how the control is display over the banner                                                                                                                                                               |

## 📝 Best practices

* Keep **category names short** (1–2 words) to avoid layout issues.
* Use **consistent image styles** for a clean and unified look.
* For banner text, keep it brief and contrast it against the image with an overlay if needed.


---

# 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/banner-with-categories.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.