# Product cards

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

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

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FHnQ8eRezo5Kh854msppH%2F2025-04-03_22-42-53.jpg?alt=media&#x26;token=c66cb46e-48ed-45ce-a30f-b5ddce178b83" alt=""><figcaption></figcaption></figure>

* **Enable background card -** Display background card

* **Enable gray background for image** - Make gray background for image

* **Show video as featured image** - Video must be first in media list and hosted on Shopify.

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

* **Quick buy button type**

* **Show short description** - Use key metafields to display a short description of the product => ortheme.short\_description

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

* **Show sold out badge**
* **Show discount badge**
* **Show discount marquee**
* **Sale badge type** - Choose type with Text, Amount, Percentage
* **Badge position**

`Product labels`

* **Theme settings > Product Card > Product Labels:**

Use product tags to display labels on product cards.

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FRyTRneyYXOgh7JS07dKm%2F2025-04-03_22-48-35.jpg?alt=media&#x26;token=9a2608ad-b4a6-478a-be9b-09aa986a8f81" alt=""><figcaption></figcaption></figure>

In admin product&#x20;

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FXiZliMS3hNUT4gaMES3p%2F2025-04-03_22-49-50.jpg?alt=media&#x26;token=3832fb53-56da-44e8-8abb-32766b9149b9" alt=""><figcaption></figcaption></figure>