# Product card

<figure><img src="/files/yI0yjLuh829D8W535f8W" alt=""><figcaption></figcaption></figure>

**Product card** is an element that showcase products with key details like images, titles, prices, and discounts in a clean, engaging layout.

## How to add a Product card

{% hint style="success" %}
Steps:

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. In **Quick add**, select **Product card.**
3. Drag the **Product card** onto your canvas.
   {% endhint %}

<figure><img src="/files/k6Fc8XL5VZadahm7U5xq" alt=""><figcaption></figcaption></figure>

## How to edit a Product card

Once you’ve added the Product card, the next step is to edit it to match your desired action.

{% hint style="success" %}
**Steps:**

1. **Select** the relevant Product card element in the editor.
2. Use the tools bar above the selected element to quickly edit it.&#x20;

All the formatting tools below can be found in the right hand sided **Inspector** panel.
{% endhint %}

<figure><img src="/files/175Vo83CoyH6OhCBKnFN" alt=""><figcaption></figcaption></figure>

### Preset card style

<figure><img src="/files/8V23BCxOKmiTvJvnzVIY" alt=""><figcaption></figcaption></figure>

* **Select product:** Choose which product you want to display in the card.
* **Card style:** Choose styling for your product cards.

{% tabs %}
{% tab title="Use global" %}

<figure><img src="/files/mSCHDyYobfQ1HmfB77Yf" alt=""><figcaption></figcaption></figure>

* Apply the product card styles defined in **Theme settings > Product cards**, ensuring consistent design across your store.

{% hint style="info" %}
Learn more: [Product Cards in Theme settings](https://docs.foxecom.com/foxify-app/page-management/theme-settings#product-cards)
{% endhint %}
{% endtab %}

{% tab title="Style 1" %}

<figure><img src="/files/AyLPgmDaxe7BxGixGemU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 2" %}

<figure><img src="/files/IRWgD1w3xSkWdLxxZSCA" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 3" %}

<figure><img src="/files/d8s7iETyQHdGHKuXvNCb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 4" %}

<figure><img src="/files/GnFDXxlYoCOc2yQkwvwm" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 5" %}

<figure><img src="/files/EUeZGg2KsZS6hP0XiQ0R" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 6" %}

<figure><img src="/files/sbPYTNtJjSrzFhPYEfCY" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Image ratio**: Defines the ratio of product images.

{% tabs %}
{% tab title="Use global" %}

<figure><img src="/files/tGtcdA5gxl3RyM9JP3Fy" alt=""><figcaption></figcaption></figure>

* Apply the Image ratio defined in **Theme settings > Product cards**, ensuring consistent design across your store.

{% hint style="info" %}
Learn more: [Product Cards in Theme settings](https://docs.foxecom.com/foxify-app/page-management/theme-settings#product-cards)
{% endhint %}
{% endtab %}

{% tab title="Adapt to image" %}

<figure><img src="/files/10HwOrj0znf1zEULKvID" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Square (1:1)" %}

<figure><img src="/files/x4zVE2lsPNh6UoGmqqBV" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Portrait (3:4)" %}

<figure><img src="/files/FaTqjt0w8pbGJ6bseiKm" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Landscape (4:3)" %}

<figure><img src="/files/Mjq7CDawY8m6947MBn5K" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Text align:** Control the alignment of text content.

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

<figure><img src="/files/klvcRu6XGqRhOuwK5wdb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="/files/GPfUUvWUcAnX4U9liMsO" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="/files/CHWmhClGQ8QgpJkRpab9" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Custom card style

<figure><img src="/files/FB1ZqdEaU50gZQafns9O" alt=""><figcaption></figcaption></figure>

**Manage product card's elements:**&#x20;

* **Add new elements**: Insert additional fields or information into the product card.

<figure><img src="/files/PsramYiTvIY9nVZRjfrX" alt=""><figcaption></figcaption></figure>

* **Reorder elements**: Rearrange the order of elements in the product card to prioritize important content.

<figure><img src="/files/q1fxGZ8NbTxyI9YrpF5K" alt=""><figcaption></figcaption></figure>

* **Product media:**
  * **Image ratio:** Defines the ratio of product images.
  * **Show second image:** Display second image on hover

<figure><img src="/files/7VPVU634liXjNGRteqwf" alt=""><figcaption></figcaption></figure>

* **Product title:** Define the HTML tag (e.g., span, h2, h3) for the product titles.

<figure><img src="/files/fijKRb4JNA1RZXkVhgzJ" alt=""><figcaption></figcaption></figure>

* **Prices:**&#x20;
  * **Show sale badge:** Enable or disable the display of a sale badge.
  * **Sale badge type:** Choose the style of the sale badge (Text/Fixed amount/Percentage)
  * **Show currency code:** Display the currency code (e.g., USD, EUR) alongside prices.

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

<figure><img src="/files/x7NdhllewblnXNBcBHcc" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fixed amount" %}

<figure><img src="/files/S6mvah6xneDOIz3ZsNIK" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Percentage" %}

<figure><img src="/files/BjQ3RasESLPX0E3yBOCw" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Design settings**

{% tabs %}
{% tab title="Element container" %}

<figure><img src="/files/AY524cb6T9BsCd5ekqFe" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Compare-at-price" %}

<figure><img src="/files/kDBXmh9MnCd57AmALFV9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Sale badge" %}

<figure><img src="/files/CrVRAHFM5pNDjXuRcNml" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Add to cart:**
  * **"Add to cart" label**: Customize the text shown on the add-to-cart button.
  * **"Select options" label**: Customize the text shown when a product has multiple variants.
  * **Icon**: Choose an icon to display alongside the button label.
  * **Icon size**: Adjust the size of the icon.
  * **Icon position**: Set the icon to appear before or after the label text.

<figure><img src="/files/gLJ6ABUINz2dKFfLmHDP" alt=""><figcaption></figcaption></figure>


---

# 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/foxify-app/foxstudio/add-and-edit-elements/product-card.md?ask=<question>
```

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.