# Product card

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Product card**
3. Make necessary changes
4. **Save.**
   {% endhint %}

### 1. Layout and image

#### Card style

There are 3 styles to select from:

{% tabs %}
{% tab title="Style 1" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fvym0wpbpFllJPXn4U7KR%2Fimage.png?alt=media&#x26;token=8b685625-74e0-484a-a027-21a311603919" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 2" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FGZqe09QeRQYzGxtXrFvp%2Fimage.png?alt=media&#x26;token=2fa039d4-a694-43b0-95f3-32dacf3a5fb6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 3" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FykD2ZGzExYQe0NzMOBmM%2Fimage.png?alt=media&#x26;token=ce356042-2cf3-4d33-8848-88f5981659a5" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Content alignment

The product card's content can be set as center-aligned, left-aligned, or right-aligned and show border.

#### Image

Set the suitable **Aspect ratio** for your image card. There are 4 options:

* Adapt to image
* 1:1 (square image)
* 3:4
* 4:3
* 16:9

Enable if you want **Show video as featured image** and **Show second image on hover**

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Ft9nvvD95LqPZF7bsatCi%2FScreenshot_1.png?alt=media&#x26;token=0967b14f-0b65-4a4e-aa8e-3b4ed5e7fb6b" alt=""><figcaption></figcaption></figure>

### 2. Variant options

Enable or disable showing variants in product items and how they display on the front store.

{% hint style="warning" %}
Only one product option can be shown on the product card.
{% endhint %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F8wCTwrChLZZaV1ZEWyVu%2Fimage.png?alt=media&#x26;token=2439684b-05d9-4bef-8a12-f0834b830cd2" alt=""><figcaption></figcaption></figure>

### 3. Content and Badges

Control what to show on the product card.

#### Content

* **Add to cart button**: let customers add items to the cart without leaving the current page.
* **Quickview button**: let customers preview product basic information without going to the product page.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FzeBGBTwWuvGsHo16fBLa%2Fimage.png?alt=media&#x26;token=097d258e-6b27-42be-970f-7a099636be5c" alt=""><figcaption></figcaption></figure>

* **Wishlist button**: let customers add their favorite products to the list.
* **Compare button**: let customers add products to the comparison page to check the differences and similarities among stores' products.

{% hint style="info" %}
See how to set up Wishlist and Compare page here:\
[additional-pages](https://docs.foxecom.com/megamog-theme/theme-settings/additional-pages "mention")
{% endhint %}

* **Countdown**: display time when there is an event for the product to release/discount.
* **Actions when clicking the Select options button**: It either pops up the **Select options** dialogue or goes directly to the product page.&#x20;

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F8xaQ8dcjA4QqgrGTpj3j%2Fimage.png?alt=media&#x26;token=13e32b29-e55b-4c64-ae8d-da5fc6c34e97" alt=""><figcaption></figcaption></figure>

#### Badges

* **Sale badge**: hide or show the sale badge in % discount or text.

{% tabs %}
{% tab title="Sale badge as Text" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FDUAEhkAO1xJ7KfChiyM1%2Fimage.png?alt=media&#x26;token=1a6d07b1-5007-4ef8-86dd-0b93610ed2b7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Sale badge as %" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fhc8vR9s7gvL7UqktG0NU%2Fimage.png?alt=media&#x26;token=a8e38b0c-7d32-4297-a071-e5b79c5ded1f" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Sold-out badge**: display badge to let customers know which products are out of stock.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FTfeZLb0jQxWoTzn4YCCj%2Fimage.png?alt=media&#x26;token=f68ffc7e-1b15-4cb3-a7de-509a14180958" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The sale badge and sold-out badge labels can be edited in **Actions** > **Edit default theme content**.&#x20;

<img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FA8fH71MALWMXCpFOQObT%2Fimage.png?alt=media&#x26;token=94a8c356-ae8c-43c0-86b8-2f3c50cddbcc" alt="" data-size="original">
{% endhint %}

* **Reviews badge**: display ratings from the customers ([A review application](https://docs.foxecom.com/megamog-theme/getting-started/integrate-shopify-review-apps) is required).
* **Custom badges**: display/hide other badges rather than sale and sold-out badges. To display custom badges, you need to add tags to your products, see [Product tags](https://docs.minimog.co/collections-and-products/product-page/product-tag).

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FH5u1qzUJFM97NGQ3252k%2Fimage.png?alt=media&#x26;token=2e37e111-7e99-4ea8-a60e-51bcf496a2e5" alt=""><figcaption></figcaption></figure>

#### Product titles

* **Show vendor**: display vendor/brand names under the product title.
* **Capitalize product name**.
* **Product title line limit**: control the maximum line of the product titles as No limit/1 lines/2 lines/3 lines.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FiB1cWixHbNxK3m5eRVH4%2Fimage.png?alt=media&#x26;token=243e0b37-26a0-4ce1-8b8c-2055c4a4c8c5" alt=""><figcaption></figcaption></figure>

#### Product prices

**Show lowest prices**: display the lowest prices of each product as '**From ...**'

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/6wLbXnhjAp9D7UQpPBKx/image.png" 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/megamog-theme/theme-settings/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.