> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-settings/product-card.md).

# Product card

<figure><img src="/files/6RvaeQ0yiq9uVTymxQjE" alt=""><figcaption><p><a href="https://chromewebstore.google.com/detail/foxtransfer-html-to-shopi/babcinhpofjfhjjbcnjhoikcjbgebimb?utm_source=foxecom&#x26;utm_medium=helpcenter&#x26;utm_campaign=foxtransfer_launch">Install FoxTransfer Chrome Extension FREE here</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 %}

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

You can control the product image ratio, content, buttons, and badge to show on the product cards.

## Image settings

Choose the image ratio of the product cards:

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

![](/files/RpPKObFLEet8R1UEttBw)

## Content

**Content alignment** can be set as Left/ Center/ Right.

Decide what to show on your product cards, including:

* **Show video as featured image** (when the video is set first in the Shopify Products > Media list);
* **Show second image on hover**;
* **Show color swatches** (See [Color swatches](/zest-theme/theme-settings/color-swatches.md));
* **Show vendor**;
* **Show product rating**.

![](/files/kZZSu0aN4vttHWUJijfG)

## &#x20;Button and Badges&#x20;

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

In the **Button Settings**, you can enable or disable to show:

* **Quick add button**: to let customers add items to their cart without actually completing the payment (for products that don't have any variants).&#x20;

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

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

* **Quick view button**: to let customers preview the detailed product information without actually going to the product page.

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

* **"Choose options" action**: to set the action for the **Quick add button** on products with variants either as **opening a simplified popup modal** or **going to the product page**.

{% hint style="info" %}
The popup opened when selecting the "**Choose options**" button includes the basic information of the product, namely:

* product title;
* product price;
* variants;
* quantity selector;
* buy buttons.
  {% endhint %}

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

{% hint style="info" %}
The **"Choose options" action** setting is available on **Zest version 5.0.0 and above**.&#x20;
{% endhint %}

In the **Badges Settings**, you can choose to display or hide:

* Sold out badge:

<figure><img src="/files/OeAz43Yd1sX9RXV1Vgst" alt="An example of sold out badge on product cards"><figcaption></figcaption></figure>

* Sale badge:

<figure><img src="/files/dW5cwyBlrJw4E8i8YhrE" alt="An example of sale badge on product cards"><figcaption></figcaption></figure>

Choose your **sale badge type** as text, percentage, or a fixed amount.

## Mobile layout

You can set to hide the Quick add button and the Quick view button on mobile view.

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