# Image cards

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

![](/files/Uzpzgrrmye4z6Nf77mTM)

You can use this section to showcase bestseller products or collections under banner image format.

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Image cards**
3. **Save**
   {% endhint %}

## Section settings

### **Section header and general**

Use the provided text fields to add a suitable heading/subheading/description. Leave any of the fields blank if you do not want to display them. Adjust the text alignment of the section (Left/Center).

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

Select the container type, background color, and layout. Use the slider to change the gap between items.

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

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

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

{% tab title="Grid Layout 2" %}

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

{% tab title="Grid Layout 3" %}

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

{% tab title="Grid Layout 4" %}

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

{% tab title="Grid Layout 5" %}

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

### Mobile settings

Help to enable horizontal scroll on mobile view. You can untick it if you want the vertical scroll.

![](/files/aruKFYPgaGgNBlCCczVt)

## Block settings

### **Content**

Change the content inside the banner such as position, alignment, etc. using the dropdown fields.

![](/files/cRNYopBZcpY2FoDb5gKh)

Add some text for the banner’s **Heading** and **Subheading.** Leave them blank if you do not want to display them.

Click **Select image** to assign the image to the banner and paste a link for the image.

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

### Button settings

Add a call-to-action button to direct customers to the product detail page. Add a **Label** then choose a **Button style** and adjust the **Button size.**

![](/files/FFdF6fC9ad4CCmwegOrm)

You can also set your Button as **Fixed on bottom**. The button's text color is based on what you've set in the block's [Text color](#1.-content).&#x20;

<figure><img src="/files/78PWLxJjJNHq5Jn4vQxN" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/KrVClAh4fnS1RZIx1vk1" 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/minimog-theme/theme-sections/image-cards.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.
