> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/product-cards.md).

# Product cards

A product card is the small block that represents one product in a listing: image, title, price and whatever extra information you decide to show. Customers see far more cards than product pages, so what a card includes largely decides what gets clicked. These settings apply to every card in the store at once, which covers collection pages, search results and any section that lists products, so you set the rules once instead of per section.

### Where to find these settings <a href="#where-to-find-these-settings" id="where-to-find-these-settings"></a>

Go to **Online Store > Themes > Customize > Theme settings > Product cards**.

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

### Settings <a href="#settings" id="settings"></a>

| Setting                             | Description                                                                                                                                                                                                                                                                                |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Alignment**                       | Whether card text and content sit to the left or in the center of the card.                                                                                                                                                                                                                |
| **Enable quick shop**               | Lets customers preview product details in a popup without leaving the listing they are browsing.                                                                                                                                                                                           |
| **Enable color swatches**           | Shows variant options directly on the card, so customers can see the available colors before opening the product.                                                                                                                                                                          |
| **Maximum swatches to show**        | Caps how many swatches appear on one card, so products with many variants do not overwhelm the card.                                                                                                                                                                                       |
| **Show tags**                       | <p>Display product tags (e.g., “Hydrates”, “Brighten”) on product cards in:</p><ul><li><strong>All screens</strong></li><li><strong>Desktop only</strong></li><li><strong>Hidden</strong></li></ul>                                                                                        |
| **Vendor**                          | <p>Display the vendor name on product cards in:</p><ul><li><strong>All screens</strong></li><li><strong>Desktop only</strong></li><li><strong>Hidden</strong></li></ul>                                                                                                                    |
| **Show rate**                       | Shows the product rating on the card.                                                                                                                                                                                                                                                      |
| **Show secondary image**            | Swaps to the second product image when a customer hovers over the card image.                                                                                                                                                                                                              |
| **Image ratio**                     | <p>The aspect ratio used for card images. Pick one and every card lines up on the same grid.</p><ul><li><strong>Adapt to image ( Default )</strong></li><li><strong>Square ( 1:1 )</strong></li><li><strong>Portrait ( 3:4 )</strong></li><li><strong>Landscape ( 4:3 )</strong></li></ul> |
| **Play video on hover**             | Plays the video on the card when a customer hovers over it.                                                                                                                                                                                                                                |
| **Show quick add button on mobile** | Puts an **"Add to Cart"** button on the card itself so mobile shoppers can buy without opening the product page.                                                                                                                                                                           |

### What customers see <a href="#what-customers-see" id="what-customers-see"></a>

Every listing in the store follows these rules, so a change here is visible the moment a customer lands on a collection page or runs a search. Image ratio is the most structural choice: **Adapt to image** keeps each photo in its native shape and can leave the grid uneven, while a fixed ratio crops everything to the same shape and gives a tidy grid. Quick shop, quick add on mobile and swatches on the card all shorten the path to the cart because the customer decides in the listing instead of opening each product. Tags, vendor and rating add reassurance but also add height to each card, so showing them on desktop only is a common compromise.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Color swatches](/velare/customize-your-pages/color-swatches.md): the shape, type and custom colors used by the swatches shown on cards
* [Badges](/velare/customize-your-pages/badges.md): the sale, new, sold out and custom badges that appear on cards
* [Animation](/velare/customize-your-pages/animation.md): hover behaviour and image lazy loading used by cards
* [Layout](/velare/set-up-your-store/layout.md): image corner radius applied to card images
* [Vélare Intro](/velare/readme.md): overview of the theme and where to start


---

# 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://uxsmart.gitbook.io/velare/customize-your-pages/product-cards.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.