> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/theme-settings/product-card.md).

# Product card

{% hint style="info" %}
**Theme Editor → Theme settings → Product card**
{% endhint %}

<figure><img src="/files/2lL5buifukfOHYHxnR9p" alt=""><figcaption></figcaption></figure>

***

### Your collection grid is your store's first impression

Every product card on a collection page is a micro-landing page. The image, the price, the swatches, whether it plays a video on hover — all of it determines whether a customer clicks through or scrolls past. Product card settings give you global control over card behavior across your entire store, so your collection pages feel like a curated boutique, not a generic catalog.

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

{% hint style="warning" icon="lightbulb" %}
Image ratio, quick view button, show vendor, and other layout options are configured **per section**, not here. Open the individual section in Theme Editor to adjust those.
{% endhint %}

***

### General

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

| Setting                            | Description                                                                                                                                          |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show main image**                | Always leads with the product's hero shot instead of the first variant image. Useful when a lifestyle image communicates more than a color close-up. |
| **Update variant price and badge** | Price and sale badge update in real time as a customer selects color swatches on the card. No surprises at the product page.                         |
| **Show product pre-order badge**   | Displays a pre-order label on cards for products using the `product.preorder` template.                                                              |
| **Show general product media**     | When a variant is selected, also shows images not attached to any specific variant (e.g. lifestyle shots, packaging).                                |

***

### Media

<figure><img src="/files/2VXQT9TiKnBDcaClDSpw" alt=""><figcaption></figcaption></figure>

| Setting                        | Description                                                                                                                                                                                 |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable autoplay video**      | Videos start playing automatically on hover. Turns a static grid into a dynamic, high-engagement browsing experience.                                                                       |
| **Fit media inside container** | Scales media to fit the card without cropping. Ideal for full-height product shots (shoes, accessories, full outfits).                                                                      |
| **Container inner spacing**    | Adds padding inside the card around the media. Only available when **Fit media inside container** is enabled.                                                                               |
| **Placeholder**                | <p>Shown on cards for products with no images.<br><br><strong>Upload images</strong> — replace the default placeholder with a custom image (e.g. your logo or a "coming soon" graphic).</p> |

{% hint style="success" icon="sparkles" %}
**Pro tip:** Combine **Fit media inside container** with **Container inner spacing** to display full-body product images without cropping while keeping the grid consistent.
{% endhint %}

***

### Color blending

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

If your product photos have white or near-white backgrounds, **Color blending** tints the card background to match — so images blend into the page instead of looking like floating cutouts. The result is a cleaner, more premium grid across any brand palette.

| Setting                     | What it does                                              |
| --------------------------- | --------------------------------------------------------- |
| **Enable**                  | Activates color blending on cards                         |
| **Apply to color swatches** | Also blends the background behind color swatch thumbnails |
| **Color**                   | The tint color (default `#FFFFFF`)                        |
| **Gradient**                | Optional gradient instead of a solid tint                 |

***

### Variant options on the card

Show color swatches or size pills directly on collection cards — no product page click required.

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

**Pills** — choose which swatches appear on cards:

| Option             | Shows                                                |
| ------------------ | ---------------------------------------------------- |
| **Variants**       | Native Shopify variant swatches                      |
| **Linked product** | Linked Products swatches (separate product listings) |
| **Both**           | Both types together                                  |

**Size label** — enter the option name (e.g. `Size`) to display size options as pills directly on the card.

{% hint style="info" %}
See [Variant images vs Color Swatches](/docs/avante-themes/features-and-advanced-setup/variant-images-vs-color-swatches.md) and [Linked Products](/docs/avante-themes/features-and-advanced-setup/linked-products.md) for full setup instructions.
{% endhint %}

***

### Pickup availability

Show in-store pickup availability on product cards. Requires pickup to also be enabled per section.

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

**Hide 'select a store' text if no store is selected** — hides the store prompt until the customer has chosen a location.

**Select a store text** — customize the label of the store selector prompt.

{% hint style="info" %}
Pickup availability on cards must also be enabled per section. See [Store Selector](/docs/avante-themes/features-and-advanced-setup/store-selector.md).
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/theme-settings/product-card.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.