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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://4sh-templates.gitbook.io/opulent-os2.0/product-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.