Grid banner 🔥

The Grid banner section 🧱 is a flexible visual layout tool that lets you display multiple banner cards in a responsive grid. It's ideal for highlighting different collections, promotions, or content blocks in a visually engaging way.

#How to add a Grid banner section to your Shopify store

#How to edit a Grid banner

#Section settings

#Section header

#Grid settings

• Set the number of columns on desktop (between 4-6 columns).
• Define the Banner height and gap between columns/rows.

#Mobile layout

By default, cards stack vertically on mobile for better readability. Grid spans don’t apply the same way on mobile.

• Enable swipe on mobile if you want a horizontal scroll instead of stacked cards.

#Block settings

In each banner block, you can configure:

#✅ Best practices

• Balance large and small cards: Avoid setting all cards to span 2x2. Mix sizes (e.g., 2x2 with 1x1) to create a dynamic and well-spaced layout.
• Plan layout flow: Think of the grid like a puzzle—larger cards go first, then smaller ones fill the gaps.
• Avoid overflow: If too many cards are set to span 3 or 4 columns, they may overflow or break alignment. Keep your layout within a 4-column limit per row.