# Product cards

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCUsSjb0C17R7p2e4MiL1%2Flivechat883x471%20(1).png?alt=media&#x26;token=1ad5a821-413a-4e9b-a7f5-850fc173bcd3" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_sleek&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

{% embed url="<https://youtu.be/zDLLT9W62MA>" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FDQoZzFcbqji0xD0YwgcD%2Fimage.png?alt=media&#x26;token=ead968e7-faed-4b99-8ea1-1983f39c3d78" alt=""><figcaption><p>Source: <a href="https://themes.shopify.com/themes/sleek/presets/jumped?utm_source=foxecom&#x26;utm_medium=product_cards&#x26;utm_campaign=banner&#x26;utm_term=Sleek_Jumped_demo">Sleek Jumped demo</a></p></figcaption></figure>

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

1. In the theme editor (**Customize**), click **Theme settings.**
2. Locate **Product cards.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## Image settings

In this setting, you can choose **Style**, **Content alignment,** and **Color scheme** for all Product cards in the store.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FXHDPZs9aOwFRbTCpfNBT%2Fimage.png?alt=media&#x26;token=21fc7adc-2669-42fc-9be1-d4da131d12b2" alt=""><figcaption></figcaption></figure>

* **Style**: Choose the style for product cards as **Standard**/**Card.**

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FaCUysAzZBhRr7NS9peIR%2Fimage.png?alt=media&#x26;token=a0ac44db-3e5b-4b3b-bf47-6655ccb52e11" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Card" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fmvsw2juOaqak7VswUSta%2Fimage.png?alt=media&#x26;token=60d8ffff-625f-4491-9baa-d2c5e79301b8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Content alignment**: Define the alignment of the text and elements on each product card as **Left**/**Center**/**Right**.
* **Card color scheme**: Set the color scheme for product cards. You can edit the colors in **Theme Settings > Colors**. Learn more [colors](https://docs.foxecom.com/sleek-theme/theme-settings/colors "mention")
* **Image ratio**: Adjust the aspect ratio of the product images to fit your preference.
  * 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%2FSko2j6FeXXGyr9pK1vkr%2Fpc2.png?alt=media&#x26;token=bbe8a5cf-ec6e-43be-a594-da6401a1e380" alt=""><figcaption></figcaption></figure>

## Content

Decide what to show on your product cards, including:

* **Show the second image on hover:** Enable this to show the second product image when a customer hovers over a product card.
* **Show vendor:** Display the vendor name on the product card.
* **Show type:** Show the product type on the card.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FYrKeL2eMM2b8izIEwv27%2Fimage.png?alt=media&#x26;token=afbef008-3cf5-43bc-8171-231d87ef47d8" alt=""><figcaption></figcaption></figure>

* **Show sold out badge:** Display a "Sold Out" badge on out-of-stock products.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FeTpB6gXETUwmTpKl70ne%2Fimage.png?alt=media&#x26;token=fcacb885-a650-48d3-9f52-53e3572fecac" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Go to **Actions** > **Edit default theme content** to change the label of the sold out badge.

<img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FHd89QpNBxzSaBlSmaqe6%2Fimage.png?alt=media&#x26;token=abddf61a-b16b-42fb-8e12-a0c1a32d5599" alt="" data-size="original">
{% endhint %}

{% hint style="info" %}
To change the badge colors, go to **Theme settings** > **Colors**.

See [#badges](https://docs.foxecom.com/sleek-theme/colors#badges "mention")
{% endhint %}

## Quick add button&#x20;

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FbzZ1O1aT9eSqT73QAKdO%2Fimage.png?alt=media&#x26;token=33408d4c-2487-40cf-8ecc-98e8d7b0d813" alt=""><figcaption></figcaption></figure>

In the **Button Settings**, you can enable/ disable:

* **Quick add button**: Let customers add items to their cart without visiting the product page (only for products without variants).&#x20;

For products with variants, the button will become a "**Choose options"** button.

* **"Choose options" action**:
  * **Open popup:** Open a **Quick View** popup with the detailed product information.
  * **Go to product page.**
* **Quick view button:** Allow customers to preview product details in a quick view modal without leaving the page.

{% hint style="info" %}
To customize your Quick view, see [quick-view](https://docs.foxecom.com/sleek-theme/pages-global-sections/quick-view "mention")
{% endhint %}

## Color swatches

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FcrNuEGFhRX22oyOBSQlq%2Fimage.png?alt=media&#x26;token=a78bc286-0d9a-4215-b7a5-bbf06c8d7ebc" alt=""><figcaption></figcaption></figure>

Select the option **Enable color swatches** to display color swatches for product with multiple color variants.

{% hint style="warning" %}
Make sure you have entered your **Color swatch trigger** in **Theme settings** > [color-swatches](https://docs.foxecom.com/sleek-theme/theme-settings/color-swatches "mention")
{% endhint %}

* Set the number of **maximum swatches to show** in the product cards: between 1-6.&#x20;

{% hint style="info" %}
For products that have more colors than the maximum number you set, the other swatches will be displayed as numbers.

<img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FnubJdqObnMQVqx7RU58Y%2Fimage.png?alt=media&#x26;token=0875d252-2e6b-4493-8233-02952396e02a" alt="" data-size="original">
{% endhint %}

* **Swatch type**: Choose between custom **color swatch**, **Shopify swatch**, or **variant image** (each variant must have a corresponding image).&#x20;

✍️ Learn how they are different: [#id-4.-variant-picker](https://docs.foxecom.com/sleek-theme/collections-and-products/product-page/product-information#id-4.-variant-picker "mention")

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Ft5LRXv8WVhexeB5KgPqW%2Fimage.png?alt=media&#x26;token=caf57819-ea04-4d96-a7c9-43aa6ebd3afe" alt=""><figcaption></figcaption></figure>

## Sale badge

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FrxgyWoW8i8TUTx70fNwh%2Fimage.png?alt=media&#x26;token=5d59b718-7e32-4e13-a3cd-b6b53719380b" alt=""><figcaption></figcaption></figure>

* **Show sale badge:** Display a sale badge for products with a discount (Compare-at price).
* **Sale badge type:** Choose the badge type (Text, Percentage, or Fixed amount).

## Mobile layout

* **Hide Quick add button on mobile**: Hide the quick add button for mobile views to streamline the mobile shopping experience.

{% tabs %}
{% tab title="Show Quick add button on mobile" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FML1yrrji4STUmtYSwmvG%2Fimage.png?alt=media&#x26;token=9574368e-b19e-4883-ab1f-5399b9033822" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Hide Quick add button on mobile" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCmdaB1Hm4JCywTaD8Lzf%2Fimage.png?alt=media&#x26;token=8ac7ad11-12c8-46b4-bcb5-7056ab13d440" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# 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-settings/product-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.