# Product cards

{% hint style="success" %}
**Steps:**&#x20;

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

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FasyFzxk7R6j7kaA5vZzI%2Fcard2.jpg?alt=media&#x26;token=2c6a8b83-2a7c-484c-93de-c65c26f34bf1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F0nNIECqKH1Y9wHJ6c4ki%2Fcard3.jpg?alt=media&#x26;token=1e12bd04-e7df-4896-afe5-9061665b7799" alt=""><figcaption></figcaption></figure>

* **Show vendor** - Display vendor on the product card

* **Show secondary image on hover** - Display the second product image when hovering over the product image

* **Show quick buy** - To allow customers to preview detailed product information without visiting the product page

* **Show product rating** - Display the product's rating

* **Color type**  - Display : Color swatch, Count, Variant image, Native color swatch

* **Product Image size** - Determines the aspect ratio of the product card images.

  * Adapt to image
  * Square (1:1)
  * Portrait (3:4)
  * Landscape (4:3)
  * Landscape (5:3.5)
  * Wide (16:9)

* **Media fit** - Display Fill or Contain of product card image

* **Product info alignment** - feft, center, right

`Badges`

* **Sale badge type** - Choose type with Sale, Save amount, Save percentage
* **Badge position**

`Product labels`

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FmF7J8LBjHhUhC7Rx98lz%2Fta3.jpg?alt=media&#x26;token=58042765-4755-43ab-a4d7-d42cc3d679cd" alt=""><figcaption></figcaption></figure>

* Theme settings > Product Card > Product Labels:

Use product tags to display labels on product cards.

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FzbBBbnDrHS4ZJXTCMEy0%2Ftag1.jpg?alt=media&#x26;token=43eff879-3328-42e7-b702-c77c15d7db0a" alt=""><figcaption></figcaption></figure>

In admin product&#x20;

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F4EQAyeviibxFQtu8yFwm%2Fta2.jpg?alt=media&#x26;token=2595a3b2-cb6f-4829-98fa-64840536835c" alt=""><figcaption></figcaption></figure>
