# Card images

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FPO2MdHsRDZAzYJi9OqLV%2Fimage.png?alt=media&#x26;token=810876be-c3b7-427e-830a-622881998d12" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FbdTLf1S828H4gk5YfP0c%2Fimage.png?alt=media&#x26;token=7395d55f-294d-45ad-9f8f-399c25235260" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FThYxIe1Xj3rnWBrQYFuu%2Fimage.png?alt=media&#x26;token=f066b314-b008-48f7-87f2-14be536ce1a3" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fficwi7UutVgnhomK71B0%2Fimage.png?alt=media&#x26;token=d14a9f4f-0449-44fc-8256-265be15ee8f2" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FrAk3GUdFhXN2HHSRrtBD%2Fimage.png?alt=media&#x26;token=a4838d95-39f1-4a3d-9fde-155f8049745a" alt=""><figcaption></figcaption></figure>

### Block settings

#### Image card

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FJ06Et5IFY07Yf5ipvbAd%2Fimage.png?alt=media&#x26;token=8a131c3e-2b36-4fb4-b01f-fd6d06b95ed3" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F27M1EtjTnlt9rVrzsUsa%2Fimage.png?alt=media&#x26;token=6fb6568e-5c94-43bb-b0bc-a6974354c875" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FxHo5YrcXh10la2e7Uc5G%2Fimage.png?alt=media&#x26;token=92a4e0cb-4b92-4a11-b1d1-3f5428352547" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FJc1lwOVBDbkQyGjhGmJ2%2Fimage.png?alt=media&#x26;token=edc1179e-0784-47e3-83bd-0121f6b7e976" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FQwaF5vuvNnGyn9PJRWRG%2Fimage.png?alt=media&#x26;token=1a72a197-beb3-43cc-aa24-7fb5020470fd" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F3JkZBUeM4IzUem8NUXVB%2Fimage.png?alt=media&#x26;token=8e3396a6-9a1b-48a8-bd13-f2ed78cac60c" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FMdRYXnkEMabhWOaGUYXm%2Fimage.png?alt=media&#x26;token=f92a977b-afb0-4225-b6a7-5ceefc43ba33" alt=""><figcaption></figcaption></figure>