# Banner with categories 🔥

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete_zSsOjzt7.jpg)

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.

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

<Hint type="success">

Steps:

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

</Hint>

## How to customize a Banner with categories section

### Section settings

<Table widths="263,auto">

| Setting | Function |
| --- | --- |
| **Container width** | Full width or fixed width layout. |
| **Color scheme** | Choose background and font styling. <br/>*Learn more:* [Colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors) |
| **Number of columns** | Adjust how many columns:<br/>- of banners on desktop<br/>- of category bar on mobile. |
| **Column gap** | Set spacing between category cards. |
| **Enable swipe on mobile** | By default, the banners are stacked. Toggle ON to make the category row horizontally scrollable on mobile.<br/><img src="https://docs-assets.foxecom.app/hyper-theme/image_QvL1zFTx.png" alt="image" /> |
| **Top/Bottom padding** | Adjust spacing above and below this section. |

</Table>

### Block settings

<Hint type="info">

The section consists of **4 configurable block types**:

1. [Heading block 🔝](#heading-block)
2. [Button block 🔘](#button-block)
3. [Category block 🗂️](#category-block)
4. [Banner card block 🖼️](#banner-card-block)

</Hint>

#### Heading block 🔝

![image](https://docs-assets.foxecom.app/hyper-theme/image_7x6VINGo.png)

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

<Expandable title="✏️ Editable options">

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

</Expandable>

#### Button block 🔘

![image](https://docs-assets.foxecom.app/hyper-theme/image_G6Lbp8yX.png)

Optional CTA button at the bottom of the category bar.

<Expandable title="✏️ Editable options">

* **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 →)

</Expandable>

#### Category block 🗂️

![image](https://docs-assets.foxecom.app/hyper-theme/image_8Xa1vX83.png)

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_B2Fg2oSR.png)

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> [#section-settings](#section-settings)</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.