# 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 %}

## Layout & image

### Card style

There are 5 styles to select from:

Style 1

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F9O5Ph6TPPmw4d0QXlbNz%2F1.png?alt=media&#x26;token=e6df265b-49bb-47df-a191-55477ac721b9" alt=""><figcaption></figcaption></figure>

Style 2

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FGFOQg08j5riGNY1AawVm%2F2.avif?alt=media&#x26;token=090fa938-adaa-4120-8a9d-1e37dc4887df" alt=""><figcaption></figcaption></figure>

Style 3

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FsAStdnFpeD1UZdq8Jz1M%2F3.avif?alt=media&#x26;token=e6fdc739-8029-49b4-8140-74db7c3525c5" alt=""><figcaption></figcaption></figure>

Style 4

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FMqxZZvM1nXpQih7vk1x7%2F4.avif?alt=media&#x26;token=2192688f-edc9-404b-897b-e343910bfc3f" alt=""><figcaption></figcaption></figure>

Style 5

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F3wb6A0X5sf7fVBxobAjP%2F5.png?alt=media&#x26;token=3a5d2269-92fb-4eda-a65c-2940b4781fbe" alt=""><figcaption></figcaption></figure>

## Content alignement

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

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

For products without images, you can set a **default thumbnail** by uploading an image or selecting one from your Shopify Files.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FrVI26X9Cd3cJyWCFe7LW%2F6.png?alt=media&#x26;token=0a26ebed-7cfe-416e-b94b-f638d0326bc9" alt=""><figcaption></figcaption></figure>

## 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://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F3hh5GNuBgFWNAK38CGsH%2F7.png?alt=media&#x26;token=740768d9-b4fa-462c-ae87-b66c296b1fb5" alt=""><figcaption></figcaption></figure>

## Content & Badges

Control what to show on the product card.

### Content

* **Add to cart button**: Allows customers to add items to the cart without leaving the current page.
* **Quickview button**: Enables customers to preview product information without navigating to the product page.
* **Wishlist button**: Lets customers add their favorite products to a list for future reference.
* **Compare button**: Allows customers to add products to a comparison page to review differences and similarities among store products.
* **Countdown**: Displays the time remaining for an event related to the product, such as a release or discount.
* **Show product inventory**: Displays the product inventory as configured in Theme settings > Product inventory.
* **Actions when clicking Select options button**: Either opens a "Select options" dialog or redirects to the product page, depending on configuration.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2Fg4ljSX6EvO4EH80mX8iN%2F8.png?alt=media&#x26;token=5d95ebaa-fbc2-430d-8ec5-a2f56a111f3e" 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.

![](https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F8vpENe3FsLweiEi4Qv7W%2Fimage.png?alt=media\&token=f3d359cc-c143-4fa4-b9e1-af717e1f9323)

## Product prices

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

![](https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FbVpnu5NDEDWeFxacsv5f%2Fimage.png?alt=media\&token=da987fd7-0473-4be6-8e13-07aedf5921c1)