> 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

Shared behavior for every product card — collection pages, search, and featured product sections.

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

Image ratio, quick view, vendor, and the color-pills switch sit on each section. This page is what those cards share.

***

#### Good to know

{% hint style="info" %}
**Color labels.** Leave the field empty when every color option is named Color or Colour. For any other name, list them separated by commas: `Color, Shade, Finish`. Product cards, the gallery, and Product bundle all use this list to recognize a color. Once the field has a value, the automatic rule switches off, so include every name the catalog uses. Capitalization does not matter. [How alt text follows the color](/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md).
{% endhint %}

* **Show general product media.** Lifestyle and packaging shots stay on the card next to the selected color. Those are images with no color name in parentheses in the alt text.
* **Show main image.** The card leads with the product's first photo — the right choice when that frame is a campaign or lifestyle shot. Leave it off and the card leads with the selected variant's photo.
* **Make sold-out product images grayscale.** Sold-out products turn gray on every card, so in-stock items stay forward in the grid.
* **Show product pre-order badge.** The badge appears on products assigned to the preorder template.
* **Enable autoplay video.** The video plays on its own, muted and looping, while it is the image on the card.

***

<details>

<summary>General</summary>

| Setting                            | What to know                                                                                 |
| ---------------------------------- | -------------------------------------------------------------------------------------------- |
| **Show main image**                | Leads with the product's first photo. Off, the card leads with the selected variant's photo. |
| **Update variant price and badge** | Price and sale badge on the card follow the swatch a shopper clicks.                         |
| **Show product pre-order badge**   | Only for products on the preorder template.                                                  |
| **Show general product media**     | Keeps images with no color in the alt text visible beside the selected color.                |

</details>

<details>

<summary>Media</summary>

| Setting                                    | What to know                                                                      |
| ------------------------------------------ | --------------------------------------------------------------------------------- |
| **Fit media inside container**             | Shows the whole product shot inside the card.                                     |
| **Container inner spacing**                | Padding around that shot. Available together with **Fit media inside container**. |
| **Make sold-out product images grayscale** | Grays out images of sold-out products on every card.                              |
| **Enable autoplay video**                  | Plays the card video on its own, muted and looping.                               |
| **Placeholder**                            | Image used when a product has no photos. A logo works well.                       |

</details>

<details>

<summary>Color blending</summary>

For product photos on a white or near-white background. The tint lets the photo sit in the page instead of reading as a hard rectangle.

| Setting                     | What to know                                 |
| --------------------------- | -------------------------------------------- |
| **Enable**                  | Turns the tint on.                           |
| **Apply to color swatches** | Uses the same tint behind swatch thumbnails. |
| **Color**                   | Tint color. Default is white.                |
| **Gradient**                | A gradient in place of a flat tint.          |

</details>

<details>

<summary>Variant options</summary>

**Pills** chooses what the card shows under the photo:

| Option             | Shows                                    |
| ------------------ | ---------------------------------------- |
| **Variants**       | Swatches from the product's own variants |
| **Linked product** | Swatches from linked products            |
| **Both**           | Both together                            |

**Color labels** is covered above.

**Size label** — the option name to show as size pills, for example `Size`.

Swatch style, custom colors, and PNG files are set in [Variant images vs Color swatches](/docs/avante-themes/features-and-advanced-setup/variant-images-vs-color-swatches.md). Linked products are set up in [Linked products](/docs/avante-themes/features-and-advanced-setup/linked-products.md).

</details>

<details>

<summary>Pickup availability</summary>

| Setting                                                | What to know                                                |
| ------------------------------------------------------ | ----------------------------------------------------------- |
| **Hide 'select a store' text if no store is selected** | The prompt stays hidden until a shopper has chosen a store. |
| **Select a store text**                                | The wording of that prompt.                                 |

{% hint style="info" %}
**Pickup on the card** also needs pickup turned on in the section. See [Store Selector](/docs/avante-themes/features-and-advanced-setup/store-selector.md).
{% endhint %}

</details>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.