# Product cards

<Embed url="https://youtu.be/zDLLT9W62MA" />

<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 settings

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

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

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

<Tabs>
<Tab title="Standard">

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

</Tab>

<Tab title="Card">

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

</Tab>
</Tabs>

* **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)
* **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)

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

## 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.

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

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

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

<Hint type="info">

Go to **Actions** > **Edit default theme content** to change the label of the sold out badge.

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

</Hint>

<Hint type="info">

To change the badge colors, go to **Theme settings** > **Colors**.

See [Badges](https://docs.foxecom.com/sleek-theme/theme-settings/colors#badges)

</Hint>

## Quick add button

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

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 type="info">

To customize your Quick view, see [Quick view](https://docs.foxecom.com/sleek-theme/pages-global-sections/quick-view)

</Hint>

## Color swatches

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

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

<Hint type="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)

</Hint>

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

<Hint type="info">

For products that have more colors than the maximum number you set, the other swatches will be displayed as numbers.

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

</Hint>

* **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: [/pages/TkPgU4B4xE4FAFJM10Xi#id-4.-variant-picker](/sleek-theme/theme-settings/pages/TkPgU4B4xE4FAFJM10Xi#id-4.-variant-picker "mention")

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

## Sale badge

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

* **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">

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

</Tab>

<Tab title="Hide Quick add button on mobile">

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

</Tab>
</Tabs>