> 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

Configure Volume product cards: hover effects, price position, quick buy, vendor logo, subtitle metafield, and design options like color scheme and grid.

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="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FX82SzhRPKeRCCNujnedT%2Fimage.png?alt=media&amp;token=885114b8-501f-42d7-b67d-2c8616bbdeaf" 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="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FH404Aa379HsPqg84EWgt%2Fimage.png?alt=media&amp;token=f6e5d8cb-eb57-4eea-bf0c-54deb6776363" 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="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FKFmKpnDx5v50AqlGBMb2%2Fimage.png?alt=media&amp;token=7de5db7a-7bdd-4453-9484-9552992f399c" 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="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FpPnFsgyxrBfKq9bX1yvz%2FProduct%20subtitle.gif?alt=media&amp;token=4d02f63c-8122-498e-bb29-8ae982b325a6" 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="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FOpoLCHiFBLxye96B2xf3%2Fgifmaker_me-4.gif?alt=media&amp;token=f7d88cdd-8812-4298-9f97-ada2ee9457a7" 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 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/volume-themes/products/product-cards.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.