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:
In the theme editor (Customize), click Add section.
Locate Banner with categories section.
Make necessary changes.
Save.
How to customize a Banner with categories section
Section settings
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
Heading block 🔝
Use this block to add a title to your Category bar such as "Top Categories" or "Explore by Type".
Button block 🔘
Optional CTA button at the bottom of the category bar.
Category block 🗂️
Use these to display icons or images that link to your product categories or collections.
Each Category block contains:
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 🖼️
Use these for larger promo visuals next to or under categories. You can multiple banner cards.
Each Banner card includes:
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