> 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/volume-themes/products/product-cards.md).

# Product Cards

Product card settings are located in (1) **Theme settings → Product card** and in the (2) section settings where the cards are displayed. This allows you to configure the main settings once, while each section's settings can be fine-tuned for specific needs.

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

For an overview of the main settings in **Theme settings**, check out this link: [Theme Settings → Product card](/docs/volume-themes/theme-settings/product-card.md). Below, we'll go through the section-specific settings.

### Hover Behavior

In the dropdown, you can choose from five available options or disable hover effects:

* **Image zoom**
* **Second image**
* **Second image with zoom in**
* **Slider**
* **Autoplay slider**

For sliders, you can also configure bullet visibility and **autoplay speed** (in seconds) for the autoplay slider.

### Content Display

#### Price and Options Position

For **Price**, you can choose between **Top, Bottom, or In line with title**.

In the last option, the title will be truncated with an ellipsis if space is insufficient.

<figure><img src="/files/3CYPD1vObnsZrtzLnOTn" alt=""><figcaption></figcaption></figure>

#### Additional Display Options

Decide what should be shown:

* **Title** (can be truncated character-by-character)
* **Product options and linked products** – Disable, Show, or Show on hover (for desktop). Settings are separate for mobile and desktop.
* **Quick buy**
* **Rating**
* **Vendor** (learn how to display it as an image below)
* **Product Subtitle** (requires additional setup, see below)

#### Vendor Logo

To display the vendor as an image:

1. Go to **Content → Files** in your Shopify admin.
2. Upload vendor images in **.PNG** or **.SVG** format.

{% hint style="success" icon="lightbulb" %}
Ensure that the uploaded logo file is cropped properly, meaning it does not contain extra space around it. Otherwise, the logo may appear too small.

<p align="center"><img src="/files/26PPIzF2tWJ6vwnkX05w" alt=""></p>
{% endhint %}

3. File names should be **lowercase** with **underscores** as separators (e.g., `new_balance.png` for ‘New Balance’), and **must exactly match the brand name**.

#### Product Subtitle

To enable the **Product Subtitle**, follow these steps:

1. Open your Shopify admin.
2. Navigate to **Settings → Metafields and metaobjects → Products**.
3. Click **Add definition**.
4. Enter **Product subtitle** in the **Name** field and select the **Product subtitle** option.
5. Click **Save**.

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

After completing these steps, you can add content to the **Product Subtitle** field for each product in your Shopify admin. For more details on Shopify metafields, refer to [this page](https://help.shopify.com/en/manual/custom-data/metafields).

### Design

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

The appearance of product cards can be customized through the following settings:

#### Content Style

Choose between **Regular** or **Small** in **Theme settings → Product cards**. If multiple products are displayed in a row, **Small** is recommended.

#### Grid Settings

Each section allows you to choose from three preconfigured grids. Learn more about how grids work here: [Grid Settings](/docs/volume-themes/theme-settings/layout.md#grid-settings).

#### Product Card Color Scheme

The **color scheme** setting for product cards is found under **Color**. Learn more [how to set up colors](/docs/volume-themes/theme-settings/colors.md).

#### Outline Display

Enable the **Show frame** checkbox to add an outline around the product card.


---

# 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/volume-themes/products/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.