# Image cards

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" 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>

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FbNoKmjF3f1t8DUKOFxYK%2Fimage%20\(2\).png?alt=media\&token=ad6910e6-a641-4b20-bec6-f2c7970af1a2)

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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FwvC6LxsERcgZMTlpUDDI%2Fimage.png?alt=media&#x26;token=504ac1f6-bdd8-4f8e-aa77-979ad827adfe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FzA1gxWs3QJXwTBSrQV77%2Fimage.png?alt=media&#x26;token=036f6181-6362-4a1a-bc18-f52d23c0f255" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FvSvDQ6cl2VQSKH2SfV6o%2Fimage.png?alt=media&#x26;token=a469a781-c63a-4405-b873-016037171c5d" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F6rcZ03zPjVlwLu3fiDRy%2Fimage.png?alt=media&#x26;token=13a4fba4-a014-4c91-b829-0edc542e2bd4" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FuH78vAX4vVSHEhMaKfQ5%2Fimage.png?alt=media&#x26;token=57d7a8f0-3846-4773-b089-92b983f03f43" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F8EL1AG1onoFeYUsnLZDe%2Fimage.png?alt=media&#x26;token=7fa2f0a0-d332-4141-85de-31d8a2bbfdbe" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FWXVGIXAUgEFNguQtIgnv%2Fimage.png?alt=media&#x26;token=a27fd6dc-09de-470b-98e6-fb6cb4c370d2" 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.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fm2u5lgLmTTilxRfcKa5L%2FScreen%20Shot%202021-10-14%20at%2014.46.56.png?alt=media\&token=8acb1fb2-daf0-46cf-ab1a-bd859f1b8494)

## Block settings

### **Content**

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

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FXGf7whBA72qfI6MZ0gOY%2FScreen%20Shot%202021-10-14%20at%2014.12.54.png?alt=media\&token=561a95f3-ffb1-4a7e-b2f7-1cc0f8a8106a)

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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fnyq9CL9zRyokcg3PhLMb%2Fimage.png?alt=media&#x26;token=fcd0317d-e0fa-4ba1-8c6c-a1be40f44d24" 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.**

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F2e9saglAPyQAEIBVaMwA%2FScreen%20Shot%202021-10-14%20at%2015.14.44.png?alt=media\&token=7fc4a496-f977-4ec8-a90e-9f8ef4f2be2c)

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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FiBF42Fxr5rdH3flT4CMp%2Fimage.png?alt=media&#x26;token=d504e84f-0310-47b0-9d7d-0a232368fb94" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FbP8ipg4dEkSKWkQoBBSF%2Fimage.png?alt=media&#x26;token=7b1ef2d2-1941-4a94-bc94-3b5d2fdade47" alt=""><figcaption></figcaption></figure>
