# Card images

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

You can use this section to showcase bestseller products, and collections under banner image format, or even tell your brand's story through images.

## How to add Card images

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

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

## How to edit Card images

### Section settings

#### Section header

Use the provided text fields to add a suitable **Heading, Subheading,** and **Text**.

* Leave them blank if you do not want to display them

You can also change the **Heading size** to Heading 1/ Heading 2/ Heading 3 and the **Text alignment** to Left/ Center to make the content look balanced on your website.

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

#### Card settings

Select the card's **Image ratio** as:

* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)

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

#### Grid settings

Set the **Number of columns on desktop** view between 1-3 column(s), and choose your favorable **Column gap** as Extra large/ Large/Medium/Small/ Extra small/ None.

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

#### Carousel settings

You can **Enable the carousel on desktop** (when the number of collections added > the number of columns).

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

### Block settings

#### Image card

Select the **Color scheme** for the image card block.

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

Click **Select image** to assign the image to the banner on the desktop and use the slider to change the **Image overlay opacity**.

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

Add some text for the banner’s **Heading, Subheading**, and **Description.**&#x20;

* Leave them blank if you do not want to display them.

You can also change the **Heading size** (Heading display 1/ Heading display 2/ Heading display 3/ Heading 1) and the **Description size** (Small/ Base size/ Large) to make your image card block look more balanced.

<figure><img src="/files/2Ao3MNXgqoXX1dXRGvqL" alt=""><figcaption></figcaption></figure>

Add a call-to-action button that directs customers to the target page specified in the **Card link** field.

Add a **Label** then choose a **Button style**

* Primary button
* Secondary button
* Underline button

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

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

Furthermore, you can also modify the look as well as the position of the content by changing these properties:

* **Content position**: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
* **Content alignment**: Left/ Center/ Right
* **Content spacing**: Small/ Medium/ Large

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

### Mobile settings

Especially, if you want to display a different card image on the mobile device, you can insert another image to the **Image** field.

Moreover,  the block also allows you to change **Content position** and **Content alignment** on mobile.

<figure><img src="/files/6LtKTtJVEbIKMTncK1Gv" 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/sleek-theme/theme-sections/card-images.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.