# Banner grid

<figure><img src="/files/3hDztxcpglYPpuFKxens" alt=""><figcaption></figcaption></figure>

The Banner grids section offers unique ways to showcase your image cards.&#x20;

{% hint style="success" %}
**Steps:**

1. In the theme editor **(Customize)**, click **Add section**
2. Select **Banner grid 1/2/3** that has the layout your prefer
3. Make necessary changes
4. **Save** the settings.
   {% endhint %}

## Section settings

### Grid settings

Change the section's layout on Desktop. The layout is automatically optimized for mobile view.

<figure><img src="/files/SxLeoCMRoyYiodtL9q2U" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Layout 1" %}

<figure><img src="/files/u2GgmYHWfBdH3HjWviwq" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Layout 2" %}

<figure><img src="/files/qgnFmQFgDPDqiPdwNIus" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Layout 3" %}

<figure><img src="/files/hqculVhsuX2RMiB4MQb0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Adjust the gap between columns and rows on desktop and mobile.

<figure><img src="/files/0Isp3uTJuBduxtMH0L0q" alt=""><figcaption></figcaption></figure>

## Block settings

A maximum of 4 image cards can be added to the section.

Each block comes with the following settings:

### Image settings

Select an image for your desktop view and mobile view.

<figure><img src="/files/INHAqeRA3YQwrK2AV4zy" alt=""><figcaption></figcaption></figure>

### Link settings

Link your image card with a desired page by selecting from your Shopify pages or pasting the URL.

Determine how the link is applied (on the whole card or the button only).

<figure><img src="/files/t0UoePX5afGRlodJrxcR" alt=""><figcaption></figcaption></figure>

### Content settings

Insert your card's heading, subheading and description. Select the heading size and description style you prefer.

<figure><img src="/files/dqWlBadovQwiG5TstFRj" alt=""><figcaption></figcaption></figure>

Adjust the content position and content alignment.

<figure><img src="/files/4N4SZeJSK4ElS8BuWbSK" alt=""><figcaption></figcaption></figure>

Select 'Push last block to bottom' option if you want to separate your card's content and the button.

<figure><img src="/files/ELtedpG589vQHB6PLGFc" alt=""><figcaption></figcaption></figure>

### Button settings

Insert your button label and select the button style.&#x20;

If you don't want to show the button in the image card, simply leave the label blank.

<figure><img src="/files/OaDDP2riKThPC3AhnKq0" alt=""><figcaption></figcaption></figure>


---

# 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/megamog-theme/theme-sections/banner-grid.md?ask=<question>
```

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.