# Product card

<Hint type="success">

Steps

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

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_TK1i0y6X.png)

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)

![](https://docs-assets.foxecom.app/zest-theme/image_RpPKObFL.png)

## 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](https://docs.foxecom.com/zest-theme/theme-settings/color-swatches));
* **Show vendor**;
* **Show product rating**.

![](https://docs-assets.foxecom.app/zest-theme/image_kZZSu0aN.png)

## &#x20;Button and Badges

![image](https://docs-assets.foxecom.app/zest-theme/image_hKLtkGlf.png)

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;

![image](https://docs-assets.foxecom.app/zest-theme/ezgif.com-video-to-gif%20(11)_pLSXwgSX.gif)

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.

![image](https://docs-assets.foxecom.app/zest-theme/image_xrN8h7JT.png)

* **"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 type="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.

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_NJqz157M.png)

<Hint type="info">

The **"Choose options" action** setting is available on **Zest version 5.0.0 and above**.&#x20;

</Hint>

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

* Sold out badge:

![image](https://docs-assets.foxecom.app/zest-theme/image_OeAz43Yd.png)

* Sale badge:

![image](https://docs-assets.foxecom.app/zest-theme/image_dW5cwyBl.png)

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.

![image](https://docs-assets.foxecom.app/zest-theme/image_X5VLbx1t.png)