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

# 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="/files/DoomSnGr6nzfkTUgEIz8" alt=""><figcaption></figcaption></figure>

Style 2

<figure><img src="/files/9QcgSci1SzaJVz2oL48K" alt=""><figcaption></figcaption></figure>

Style 3

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

Style 4

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

Style 5

<figure><img src="/files/s9Ns8yMaxWCecourcrcg" 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="/files/OrOzEfDjT5jpUB4vLMlK" 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="/files/QuHHIkh0crUfi9yOfaQR" 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="/files/eInQWQubrWsszeDL2c5q" 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.

![](/files/bOzbRHS67Gt9lCRz7GGM)

## Product prices

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

![](/files/NZa5PZEj4xqt61wucNja)