# Product card

<Hint type="success">

Steps

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

</Hint>

### 1. Layout and image

#### Card style

There are 3 styles to select from:

<Tabs>
<Tab title="Style 1">

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

</Tab>

<Tab title="Style 2">

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

</Tab>

<Tab title="Style 3">

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

</Tab>
</Tabs>

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

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

### 2. Variant options

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

<Hint type="warning">

Only one product option can be shown on the product card.

</Hint>

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

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

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

* **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 type="info">

See how to set up Wishlist and Compare page here:\
[Additional pages](https://docs.foxecom.com/megamog-theme/theme-settings/additional-pages)

</Hint>

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

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

#### Badges

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

<Tabs>
<Tab title="Sale badge as Text">

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

</Tab>

<Tab title="Sale badge as %">

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

</Tab>
</Tabs>

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

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

<Hint type="info">

The sale badge and sold-out badge labels can be edited in **Actions** > **Edit default theme content**.&#x20;

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

</Hint>

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

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

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

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

#### Product prices

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

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