# Image cards 🔥

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FGgzdITZIZ2CssUiEyADH%2FHyper%20docs%20screenshot%20do%20not%20delete%20(26).jpg?alt=media&#x26;token=73405a8a-379d-41bc-9897-3d6483ce3102" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This design is available from :sparkles:version 1.2.0 and above. :sparkles:

See: [changelog](https://docs.foxecom.com/hyper-theme/changelog "mention")
{% endhint %}

The **Image cards** section is a flexible, visual-first layout that helps you feature products, collections, or promotions using stylish, clickable cards.

## How to add an Image cards section to your Shopify store

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

1. In the theme editor (**Customize**) > click **Add section**
2. Select **Image cards.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit an Image cards section

### Section settings

{% tabs %}
{% tab title="Section header" %}

<details>

<summary>See settings</summary>

* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.
* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

:sparkles:[add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")

* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Description size:** Select the size of the description text.

</details>
{% endtab %}

{% tab title="Grid settings" %}

* **Number of columns on desktop**: Choose between 2-6 columns on desktop.
* Control the **Column gap** and **Row gap**.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F72gbkBzm6qcBqOafYdJL%2Fimage.png?alt=media&#x26;token=5de59e3a-a33a-4bae-a89b-5305e7811d6c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Carousel settings" %}

* **Enable carousel on desktop:** Turn this on to display cards in a horizontal slider format with arrows for navigation.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FfQujFHZIUAFi9suieDG4%2Fimage.png?alt=media&#x26;token=e0a7825b-b19e-499b-9fbe-21835aef3f6f" alt=""><figcaption></figcaption></figure>

* **Enable content overflow:** Allows part of the next card to peek into view, giving a swipe-preview effect.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F65J5ZgLvcGpSkSTSNvpF%2Fimage.png?alt=media&#x26;token=0e5945d3-4069-43d9-9045-868419fbbd52" alt=""><figcaption></figcaption></figure>

* **Navigation position:** Choose where to show navigation arrows: `Middle` (appear on hovering) or `Bottom`.

  * Middle:

  <figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fn1rhyIZlHGeL2ayBaOe2%2Fimage.png?alt=media&#x26;token=8a7fe49e-60b2-46d4-b37b-49a920ed28e1" alt=""><figcaption></figcaption></figure>

  * Bottom:

  <figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FNnTY6vjntOUOX3lkLa6I%2Fimage.png?alt=media&#x26;token=93ed666f-dde9-45c1-a2ab-40ab40c721e1" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="Mobile layout" %}

* **Number of columns on mobile:** Choose between `1 column` or `2 columns` stacked vertically.
* **Enable swipe on mobile:** Turn on for a smooth horizontal scroll experience on touch devices.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FHf9W041lUrGqu0pQqvBS%2Fimage.png?alt=media&#x26;token=c936223a-bf0f-495f-899b-2a5145e7c46e" alt=""><figcaption></figcaption></figure>

* **Show progress bar:** Display a progress indicator for carousels to show users how many slides remain.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F5UW7ByQ9dDeRiafQmKuF%2Fimage.png?alt=media&#x26;token=f9af257d-71cd-4fd4-a240-0c453c2cdb7f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile layout" %}

* **Number of columns on mobile:** Choose *1* or *2* product cards per row.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FECbOWoSuzGpGg3650iOI%2Fimage.png?alt=media&#x26;token=7feebe85-f75c-4ada-b46f-191ef52a29c0" alt=""><figcaption></figcaption></figure>

* **Enable swipe on mobile:** Toggle ON to allow horizontal swiping for a smoother user experience.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Ffp5vht6TjuLOcCRLafOV%2Fimage.png?alt=media&#x26;token=27daefb0-15dc-4953-81ce-abbf98bf9dce" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

Each **Image card block** contains customizable visual and content elements.

{% tabs %}
{% tab title="General" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FxEho1GMMWr8Y992KJonH%2Fimage.png?alt=media&#x26;token=ebe8c6b6-9256-499d-8742-d420f60adbf8" alt=""><figcaption></figcaption></figure>

* **Image**: Upload or choose an image that best represent the card's message.&#x20;
* **Image ratio**: Control how the image fills the card.&#x20;

  Options include:

  * `Adapt to image`: Maintains the original image ratio.
  * `Square`, `Portrait`, `Landscape`: Crop the image to a fixed ratio for uniformity.
* **Image overlay opacity**: Add a semi-transparent layer over the image to improve text readability.&#x20;
  * `0%` = No overlay
  * `100%` = Fully opaque (black cover)

{% hint style="info" %}
Use **20-40% overlay** for bright images with text overlays. Lower it for dark or minimal images.
{% endhint %}
{% endtab %}

{% tab title="Content settings" %}

* **Content position:** Determine where the text/button appears inside the card.
  * Standard: `Top left`, `Middle center`, `Bottom right`, etc.
  * Split layout options: `Top subheading`, `Bottom button`, `Middle content` allow for more control.
  * Below image: Display the content under the image.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FsuTJ2omO3IIqwydlpOtp%2Fimage.png?alt=media&#x26;token=4f06e2ad-5988-4c38-a07f-65bf6f22e73c" alt=""><figcaption><p>Example of Top subheading</p></figcaption></figure>

* **Content alignment:** Control text and button alignment (`Left`, `Center`, or `Right`) relative to the content position.
* **Content spacing:** Adjust the internal padding of the content (e.g., `Extra small`, `Medium`, `Large`). Useful for cards with more or less text.
* **Content gap:** Control the spacing **between** elements like tag, heading, and button.
* **Card link:** Choose where the entire card and the button should lead: a product, collection, or page. Clicking anywhere on the card will navigate to this link.
  {% endtab %}

{% tab title="Badge settings" %}

* **Show badge:** Toggle ON to display a promotional badge (e.g., “Save 20%”, “New”).

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fx2Ls15XAp9cf9172UOm2%2Fimage.png?alt=media&#x26;token=b9a819b2-7a14-4810-a693-65140ee429ca" alt=""><figcaption></figcaption></figure>

* **Color scheme:** Choose a color preset for the badge's label and background that contrasts well with the image background.
* **Shape**:
  * `Circle` – Best for prices or short attention-grabbing text.
  * `Square` – Great for labels or rectangular highlights.
* **Position:** Select from corners like `Top right`, `Bottom left`, etc.
* **Subtext:** Add a smaller caption above the main badge text (e.g., “Save”).
* **Text:** The main value or highlight (e.g., “99$”, “New”).

💡 **Tip:** Use badges strategically to highlight limited-time offers or bestsellers. Keep the message short and clear.
{% endtab %}

{% tab title="Mobile settings" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FLOgwtBiU2psilc5VFxYA%2Fimage.png?alt=media&#x26;token=1d9e4687-4ec8-44b7-931a-4be3ae208946" alt=""><figcaption></figcaption></figure>

Control how each image card behaves and looks on smaller screens, ensuring a mobile-optimized experience.

* **Color scheme:** Select a different **color preset** specifically for mobile view. This is useful if the mobile image or background needs higher contrast for readability.
* **Image (Mobile specific):** Upload a mobile-optimized image (e.g., vertically cropped or simplified).\
  If provided, this image will **replace the desktop version** on mobile devices.

💡 **Tip:** Use vertical or square images on mobile to avoid awkward cropping or whitespace.

* **Show content below image:** Toggle this ON to **move card content (heading, button)** underneath the image rather than overlaying it.\
  Ideal for clean layouts or when text overlaps key parts of the image.
* **Content alignment:** Choose how the mobile text and button are aligned:
  * `Left`
  * `Center`
  * `Right`
    {% endtab %}
    {% endtabs %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></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/hyper-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.