Try Hyper freeContact support

Banner with categories 🔥

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

Steps:

  1. In the theme editor (Customize), click Add section.

  2. Locate Banner with categories section.

  3. Make necessary changes.

  4. Save.

How to customize a Banner with categories section

Section settings

Setting
Function

Container width

Full width or fixed width layout.

Color scheme

Choose background and font styling. Learn more: Colors

Number of columns

Adjust how many columns: - of banners on desktop - 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.

Top/Bottom padding

Adjust spacing above and below this section.

Block settings

The section consists of 4 configurable block types:

  1. Heading block

  2. Button block 🔘

  3. Category block 🗂️

  4. Banner card block 🖼️

Heading block 🔝

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

✏️ Editable options

  • Text: Enter your title.

Button block 🔘

Optional CTA button at the bottom of the category bar.

✏️ 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 →)

Category block 🗂️

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.

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

Decide how wide the banner appears across the grid (between 1-6). The number of columns on desktop is set in section settings. Section settings

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.

Last updated