> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-settings/product-card.md).

# Product card

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

{% embed url="<https://youtu.be/n-XVt4qp_7M>" %}

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

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

<figure><img src="/files/SX65AqudlKxDPLIUfi25" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

## Layout and image

### Card style

There are 5 styles to select from:

{% tabs %}
{% tab title="Style 1" %}
![](/files/fA83QGMHOzHpAiHuWOrh)
{% endtab %}

{% tab title="Style 2" %}
![](/files/e5JligD52mOCvtNnaLIo)
{% endtab %}

{% tab title="Style 3" %}
![](/files/oqriyqU2b3Apo9c75vaL)
{% endtab %}

{% tab title="Style 4" %}
![](/files/e5eRNygMvIgmjvpsZAC3)
{% endtab %}

{% tab title="Style 5" %}

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

### Content alignment

The product card's content can be set as center-aligned, left-aligned, or right-aligned.&#x20;

### Image

* **Aspect ratio**: 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
* **Show video as featured image**: When checked, the product card shows a video (if the video is placed first in Shopify Products > [Product media](https://help.shopify.com/en/manual/products/product-media)).&#x20;
* **Show second image on hover**: When checked, the second image in Product media is shown when customers hover over the product card.
* **Default thumbnail**: For **products without images**, you can set a **default thumbnail** by uploading an image or selecting one from your Shopify Files.

<figure><img src="/files/0h44aX5wgDdaPyuid0sC" alt=""><figcaption></figcaption></figure>

## Variant options

* **Show variant options**: Enable or disable showing variants in product items and how they display on the front store.
* **Show featured image**:&#x20;
  * When checked, the featured image shown in the product card is the first image as set in [Product media](https://help.shopify.com/en/manual/products/product-media).&#x20;
  * When unchecked, the image of the selected variant will be shown.

When the **Show variant options** setting is checked, you need to configure:

* **Option name**: Insert one product option you want to display on the product cards.&#x20;
* **Option design**: Select how the variant options are shown:
  * **Custom image**: as set in Theme settings > [Product options swatches](/minimog-theme/theme-settings/product-options-swatches.md).
  * **Color**: as set in Theme settings > [Product options swatches](/minimog-theme/theme-settings/product-options-swatches.md).
  * **Variant image**: as set in Shopify Products > Variants.
  * **Button.**
  * **Dropdown**.

For example, to show color swatches for the Product option named Color:

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

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

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

## 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 information without needing to go to the product page.
* **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.
* **Countdown**: display time when there is an event for the product to release/discount.
* **Show product inventory**: display the product inventory as set in Theme settings > [Product inventory](/minimog-theme/theme-settings/product-inventory.md)
* **Actions when clicking Select options button**: It either pops up **Select options** dialogue or goes directly to the product page.&#x20;

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

### Badges

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

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

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

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

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

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

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

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

<figure><img src="/files/NbSlwaYgaHZoU8swoi47" 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;

![](/files/iFITHglCIa8mLkzCzkYg)
{% endhint %}

* **Reviews badge**: display ratings from the customers ([A review application](/minimog-theme/getting-started/integrate-shopify-review-apps.md) 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](/minimog-theme/faqs/collection-page/add-custom-badges-to-my-product-card.md).

<figure><img src="/files/J8Qy0Lm5RMRxhUGsiun6" 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="/files/6huc0DQyBmDOS0OohI4g" alt=""><figcaption></figcaption></figure>

### Product prices

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

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