# Product cards

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FaU4RPdfHJ5Y3CEe3e42v%2FHyper%20docs%20screenshot%20do%20not%20delete%20(86).jpg?alt=media&#x26;token=90f78566-2d51-49ff-b7c8-fef0a12acf6f" alt=""><figcaption></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="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

## Product cards

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

{% tabs %}
{% tab title="Standard" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fc8isRghnju5pcBcCxSrY%2Fimage.png?alt=media&#x26;token=86df14f8-b5b0-4ed6-8897-6fa526f34a1a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Card" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FC0yC5st4q8NMleucK0RK%2Fimage.png?alt=media&#x26;token=04dfc5ba-865b-49f4-b078-4623a9e7c855" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **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 "mention")
* **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.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fgznn0Jwljl9BSzJgvpn0%2Fimage.png?alt=media&#x26;token=1d3ae88d-e5bc-42e6-894e-e76ddf94b1cf" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F7SSxCJr8UjX8zLxXT1rg%2Fimage.png?alt=media&#x26;token=5d420a89-8ef7-4f65-aaf0-a002ef86da31" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Go to **Actions** > **Edit default theme content** to change the label of the sold-out badge.

<img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/Z1FeHHnsbNxVKZA2KjVv/image.png" alt="" data-size="original">
{% endhint %}

{% hint style="info" %}
To change the badge colors, go to **Theme settings** > **Colors**.

See [#badges](https://docs.foxecom.com/hyper-theme/colors#badges "mention")
{% endhint %}

## Quick add & Quick view button&#x20;

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FH7UCJZKNSPo6FqVcqWCz%2Fimage.png?alt=media&#x26;token=c8bea9c4-8804-455d-a42a-dc1c3c210292" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FtyXRDw4kIwldJ0YcLKXE%2Fimage.png?alt=media&#x26;token=904f21ea-8d3f-4c0f-b177-bac92e43b6ab" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To customize your Quick view, see [quick-view](https://docs.foxecom.com/hyper-theme/pages-global-sections/quick-view "mention")
{% endhint %}

## Flash sale promotion scrolling

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FlJxxiOnUBfa3XgMRpYe0%2Fimage.png?alt=media&#x26;token=a9795301-4274-40ef-b0c7-38948edb8e5e" alt=""><figcaption></figcaption></figure>

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

{% hint style="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://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FPMhTriAdhN8U2tBerCte%2Fimage.png?alt=media\&token=7a4295a7-d157-42ab-bfa8-74f1412ab3c8)

![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FBOLEfgkFFdblsneYuqt3%2Fimage.png?alt=media\&token=0d861d37-5ce4-423a-9c5d-918a36d90908)

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.

<img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FTZhqRQzlj1lguwRsWaWl%2Fimage.png?alt=media&#x26;token=b4968580-52a2-4dca-9e90-6d5328434e72" alt="" data-size="original">
{% endhint %}

## Sale badge

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FwbygtCrHjmjtK4n3voWa%2Fimage.png?alt=media&#x26;token=6fbb51f0-8e07-4cce-8365-0f724e8635af" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FoyU5XkocU0lhMzQRSEXe%2Fimage.png?alt=media&#x26;token=a76c76f8-32f6-4a13-a41d-65d97e492762" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Percentage" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Flzib2khm4WaLfgGMqMjR%2Fimage.png?alt=media&#x26;token=d0a2dbc5-fbe7-463d-8078-83439ed350e9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fixed amount" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fwy4nxcYcx07TQr52a9oz%2Fimage.png?alt=media&#x26;token=57acecea-06f6-4483-8867-c7889ababae2" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Color swatches

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fok5KJpuCkjzBu7GbFiqf%2Fimage.png?alt=media&#x26;token=d3d17c44-4a14-4863-96c0-3be150651a44" alt=""><figcaption></figcaption></figure>

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

{% hint style="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 "mention")
{% endhint %}

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

{% hint style="info" %}
For products that have more colors than the maximum number you set, the other swatches will be displayed as numbers.

![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FThLekF82abYMfupkf2VN%2Fimage.png?alt=media\&token=b31e9464-45ed-4087-959b-5ac69a85823e)
{% endhint %}

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FNgEiABWrDaED3oCVZn6o%2Fimage.png?alt=media&#x26;token=b7b9a926-e0e2-4866-84e3-2f70fe2dde33" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Hide Quick add button on mobile" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F8OnPKj9hKrNskglmO8db%2Fimage.png?alt=media&#x26;token=f98221ff-f7fd-4331-8a1f-1014747935f2" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}