# Product cards

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(86)_mLFrDk2d.jpg)

<Hint type="success">

**Steps**

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

</Hint>

## Product cards

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

<Tabs>
<Tab title="Standard">

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

</Tab>

<Tab title="Card">

![image](https://docs-assets.foxecom.app/hyper-theme/image_58BetvWA.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/hyper-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)
* **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/hyper-theme/image_qlC48VM3.png)

* **Show price:** Toggle the option to hide/show prices in the product cards.
* **Show sold out badge:** Display a "Sold Out" badge on out-of-stock products.

![image](https://docs-assets.foxecom.app/hyper-theme/image_C4uehsRc.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/hyper-theme/image_x0va3a1w.png)

</Hint>

<Hint type="info">

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

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

</Hint>

## Quick add & Quick view button

![image](https://docs-assets.foxecom.app/hyper-theme/image_ANr2vshb.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.

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

<Hint type="info">

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

</Hint>

## Flash sale promotion scrolling

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

Add a scrolling badge over the product image to highlight specific products and create urgency.

<Hint type="info">

1. To set this up, you need to create a **Product metafield definition** with the following settings:

**Namespace and key**: foxtheme.flash\_sale\_text

**Type**: Single line text

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

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

2. Once done, go to **Shopify Products** and select the product you want to show the flash sale promotion scrolling on, and enter the label for it.

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

</Hint>

## Sale badge

![image](https://docs-assets.foxecom.app/hyper-theme/image_PUpL5ToK.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).

<Tabs>
<Tab title="Text">

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

</Tab>

<Tab title="Percentage">

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

</Tab>

<Tab title="Fixed amount">

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

</Tab>
</Tabs>

## Color swatches

![image](https://docs-assets.foxecom.app/hyper-theme/image_PGDvxgkH.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/hyper-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.

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

</Hint>

* **Swatch type**: Choose between **Color swatch** or **Variant image** (each variant must have a corresponding image).&#x20;

## 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/hyper-theme/image_uKbF1xuG.png)

</Tab>

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

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

</Tab>
</Tabs>