# 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
{% hint style="success" %}
Steps:
1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Grid banner** section.
3. Make necessary changes.
4. **Save.**
{% endhint %}
## How to edit a Grid banner
### Section settings
#### Section header
See settings
* **Text alignment:**
* Align the text in the section to the **Left**, **Center**, or **Right**.
* Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.
* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Subheading style**: Only show the text, or add a border around the subheading. The subheading border will have a fixed border radius of 24px by default.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
:sparkles:[add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
#### 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:
General settings
* **Color scheme**: Select a predefined color scheme to apply consistent text and button styles.
* These color schemes are configured in Theme settings > [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")
* **Image**:
* Upload or select the **main image** that displays on this banner.
* You can also upload a **mobile-specific image** for mobile view.
* **Image overlay opacity:** Adjust the **dark overlay** placed on top of your image (useful to improve text contrast).
* 0% = no overlay (fully transparent); 100% = fully dark overlay.
* 💡 Tip for readability**:** Keep this around **15–30%** if your image is bright or busy, so your heading and buttons remain easy to see.
Banner size
* **Column span**: Control how many vertical columns the banner takes up.
* **Row span**: Control how many horizontal rows it occupies.
*For example:* The section is a 4-column grid layout on desktop. So:
* A **column span of 2** means the card takes up half of the width of the container.
* A r**ow span of 2** makes the card taller, stacking over two row units.
Content
Customize how your text, button, and spacing appear over each image.
* **Content spacing**: Adjust padding around the content inside the banner.
* **Content gap**: Control the space between each content element (subheading, heading, button, text).
* **Content position:** Set the position of all content inside the card.
* Standard positions: These position all content as a single griup in the selected area.
* Split layouts: These break the content into two or more visual layers for added flexibility.
{% hint style="success" %}
:bulb: **Tips**:
* Use **Bottom left/center** if your image has clear space at the bottom.
* Use **Top center** for strong campaign banners where the image content is near the bottom.
* Use **Split layouts** when:
* Your image requires careful placement of text (e.g., the face or product in the center)
* You want the **CTA button to be more visible** and accessible for mobile users.
{% endhint %}
* **Content alignment**: Controls how the text and button are aligned within their position.
* **Card link**: Define where users go when they click the banner card or its button.
## ✅ 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.
***
---
# 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/grid-banner.md?ask=
```
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.
.jpg?alt=media&token=acf986fb-f810-45e7-a2cd-70baf34fca23)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)