{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Theme settings.**
2. Locate **Product cards.**
3. Make necessary changes.
4. **Save.**
{% endhint %}
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)
## 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 "mention"));
* **Show vendor**;
* **Show product rating**.
## Button and Badges
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).
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.
* **"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 %}
{% hint style="info" %}
The **"Choose options" action** setting is available on **Zest version 5.0.0 and above**.
{% endhint %}
In the **Badges Settings**, you can choose to display or hide:
* Sold out badge:
* Sale badge:
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.
---
# 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/zest-theme/theme-settings/product-card.md?ask=
```
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.
.jpg?alt=media&token=da0189bb-6cbb-4d1e-9a52-083eb5cab5bd)
.gif?alt=media&token=f9435ab5-73e8-43b4-9590-d34fe911c46e)
