# Product cards

{% embed url="<https://www.youtube.com/watch?v=uWQft4o5xWY>" %}

<figure><img src="/files/7vpltSXnb4u7d1u1k6qV" alt=""><figcaption></figcaption></figure>

## How to edit Product cards

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), click **Theme settings**.
2. Locate **Product cards**.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

## Product cards settings options

### Media

These options control how the product image is displayed within the card.

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Aspect ratio</strong></td><td><p>Defines how product images are cropped for consistent display:</p><ul><li><strong>Auto</strong> (default) - Uses the original aspect ratio.</li><li><strong>Square (1/1)</strong></li><li><strong>Portrait (4/5)</strong></li><li><strong>Portrait (3/4)</strong></li><li><strong>Landscape (16/9)</strong></li><li><strong>Landscape (4/3)</strong></li></ul></td></tr><tr><td><strong>Corner radius</strong></td><td><p>Adjust how rounded the product image corners should be:</p><ul><li>Move the slider to change from 0px (sharp corners) to 32px (fully rounded).</li></ul><div><figure><img src="/files/I4G5BW0p1MvGztjZduO6" alt="" width="218"><figcaption></figcaption></figure><figure><img src="/files/FlX4uCduap5eGjIgZEeU" alt="" width="216"><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Show second image on hover</strong></td><td><p></p><div><figure><img src="/files/6UzB0Gqv9GLNqS2N4zlE" alt=""><figcaption></figcaption></figure></div><p>Enables a hover effect that switches to the product’s second image when the customer moves their cursor over the product card.</p></td></tr></tbody></table>

### Content

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td><p>Controls how text aligns inside the product card:</p><div data-gb-custom-block data-tag="tabs"><div data-gb-custom-block data-tag="tab" data-title="Left"><div><figure><img src="/files/mZSjbxmxLThQkULgDSRr" alt="" width="217"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="Center"><div><figure><img src="/files/IWTdKRYZMWUTJ7abuj0T" alt="" width="215"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="Right"><div><figure><img src="/files/KYwT2eXirqHJvp43qtUY" alt="" width="216"><figcaption></figcaption></figure></div></div></div></td></tr><tr><td><strong>Show product vendor</strong></td><td><p>Toggle to display or hide the product vendor/brand above the product title.</p><div><figure><img src="/files/7NgExYEwp9aznnY4bUa7" alt="" width="215"><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Show product type</strong></td><td><p>Toggle to display or hide the product type (e.g., "Hats", "Backpacks").</p><div><figure><img src="/files/0MjdWrc1eyY8cqVcWNE0" alt="" width="214"><figcaption></figcaption></figure></div></td></tr></tbody></table>

### Badges

Customize how product badges like "New", "Hot", "On Sale", or "Sold Out" appear.

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td><p>Defines how multiple badges (sale, sold out, custom) are arranged:</p><ul><li><strong>Vertical</strong> (stacked)</li><li><strong>Horizontal</strong> (side by side)</li></ul><div data-gb-custom-block data-tag="tabs"><div data-gb-custom-block data-tag="tab" data-title="Vertical"><div><figure><img src="/files/LqAkZzn6T20lkmJNgl0b" alt="" width="216"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="Horizontal"><div><figure><img src="/files/lk6kcA1c00jPLHrz8SFN" alt="" width="217"><figcaption></figcaption></figure></div></div></div></td></tr><tr><td><strong>Show custom badges</strong></td><td><p></p><p>Enable this option to show badges created through product tags.</p><div data-gb-custom-block data-tag="hint" data-style="success" class="hint hint-success"><p>✍️ Learn how to add custom badges: <a href="/pages/tJUAxFLU5ijZzgUTDfB2">Product badges</a></p></div><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>To change the badges' colors, go to <strong>Theme settings</strong> > <a href="/pages/LHMEEJzFAAyBfjuU3BDC">Colors</a></p></div></td></tr><tr><td><strong>Show sold out badge</strong></td><td><p>Toggle to display or hide a "Sold Out" badge on out-of-stock items.</p><div><figure><img src="/files/DWDyvZo9PG8pWmOdK4LT" alt="" width="215"><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Show sale badge</strong></td><td><p>Toggle to show or hide a sale badge whenever a product has a discounted price (when the Compare-at price is larger than the Price).</p><p></p><ul><li><p>Sale badge type: Choose how the sale badge displays discount information:</p><ul><li><strong>Text</strong> - Shows "On Sale"</li><li><strong>Percentage</strong> - Shows a discount like "Save 20%"</li><li><strong>Fixed amount</strong> - Shows amount saved like "Save $10.00"</li></ul></li></ul><div data-gb-custom-block data-tag="tabs"><div data-gb-custom-block data-tag="tab" data-title="Text "><div><figure><img src="/files/HYKXUrappMy4v2oGTcTC" alt="" width="215"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="Percentage "><div><figure><img src="/files/AsBNpvLRQ7MRR2QFufUc" alt="" width="215"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="Fixed amount"><div><figure><img src="/files/dde92X051Mh0IEQUbv6q" alt="" width="215"><figcaption></figcaption></figure></div></div></div></td></tr></tbody></table>

### Swatches

Swatches represent variant colors or patterns in a visual way.

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show swatches</strong></td><td><p>Toggle this on to display <strong>color or pattern swatches</strong> under the product price.</p><div><figure><img src="/files/uXfGKZzhNWkltYXhz2Xf" alt="" width="216"><figcaption></figcaption></figure></div><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Learn how to <a href="#setting-up-swatches-via-shopify-category-metafields">setting up Swatches via Shopify Category Metafields</a>.</p></div><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Note</strong>:</p><ul><li>When <strong>Show swatches</strong> is OFF > all other swatch-related settings remain hidden.</li></ul><p><img src="/files/PEzKYubJVDgnuzmZIGQ0" alt="" data-size="original"></p><ul><li>When <strong>Show swatches</strong> is ON > additional swatch customization options appear (Show variant images, shape, width, max items).</li></ul><p><img src="/files/2PsK5Rkr98Mspaznm2vR" alt="" data-size="original"></p></div></td></tr><tr><td><strong>Show variant images</strong></td><td><p>When enabled, each swatch will display the <strong>variant’s assigned image</strong> (a miniature thumbnail) instead of using a solid color swatch.</p><div><figure><img src="/files/e4DAQTp4TsJgmbyBqJPO" alt="" width="217"><figcaption></figcaption></figure></div><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Fallback behavior:</strong></p><p>If <strong>Show variant images</strong> is ON but <strong>a specific variant does not have an assigned image</strong>, Pebble will automatically fall back to:</p><ol><li>The <strong>swatch image</strong> defined in the color metafield (if available)</li><li>Otherwise, the <strong>color value</strong> (HEX/RGB) from the metafield</li></ol><p>This ensures every swatch always has a visible representation, no blank swatches.</p><p><img src="/files/BlJZYg7LV9UwH7MgpOS5" alt=""><br><img src="/files/dl7il2D8V6HMqGgtO2cF" alt=""></p></div></td></tr><tr><td><strong>Swatch shape</strong></td><td><p>Choose how swatches are displayed visually:</p><ul><li><strong>Circle</strong></li><li><strong>Square (1/1)</strong></li></ul><div data-gb-custom-block data-tag="tabs"><div data-gb-custom-block data-tag="tab" data-title="Circle"><div><figure><img src="/files/4vqpjLE2cprhQpT9aWfQ" alt="" width="215"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="Square (1/1)"><div><figure><img src="/files/DGZQTASvRm1zgQSoskAT" alt="" width="215"><figcaption></figcaption></figure></div></div></div></td></tr><tr><td><strong>Swatch width</strong></td><td><p>Controls the size of each swatch.</p><p>Available range: 20px – 100px.</p></td></tr><tr><td><strong>Maximum items to show</strong></td><td><p>Limits how many swatches appear before the remaining ones collapse into a "+X" indicator.</p><ul><li>Range: 1 - 6 items.</li><li>Example: If a product has 3 colors and you set this to 2, customers will see <strong>2 swatches + "+1"</strong>.</li></ul><div><figure><img src="/files/htaqqXT7fln4zrRp4yhj" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

<details>

<summary>Setting up Swatches via Shopify Category Metafields</summary>

Pebble uses Shopify’s **Category Metafields** to define swatch colors and images.

**Step 1: Assign a Product Category**

1. In Shopify Admin, go to **Products**.&#x20;
2. Click the product you want to edit.&#x20;
3. In the **Category** section, select an appropriate category from Shopify’s Standard Product Taxonomy (for example: *Apparel & Accessories > Clothing > Tops > Shirts*).&#x20;
4. Click **Save**.

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

This ensures the product has a category that supports a "Color" product attribute (category metafield) so swatches can be added.

**Step 2: Add or Edit Entries for the Category Metafield**

1. In Shopify Admin, still under the product you selected, locate the **Category metafields** section.&#x20;
2. To edit an existing entry:
   * Click the category metafield.
   * Click the entry you want to edit.
   * Make changes.
   * Click **Save**.&#x20;

<figure><img src="/files/59nXVCTNxjHM4CTWhN3X" alt=""><figcaption></figcaption></figure>

3. To add a new entry:

* Click the category metafield.
* Click **Add new entry**.
* Fill out the fields (e.g., label, color value, image if applicable).
* Click **Save**.
* Then click **Save** again for the product.

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

{% hint style="info" %}
Each metafield entry can include:

* **Label** - The human-readable name of the swatch (e.g., "Navy/Blue").
* **Color value** - A HEX color code or RGB value used when the swatch displays as a color circle.
* **Image** - Optional. Upload a swatch image (useful for patterns, textures, prints).
* **Base color** - The primary color family used for organizing swatches.
* **Base pattern** - Defines whether it’s Solid, Striped, Patterned, etc.
* **References** - Shows which products are currently using this swatch entry.
* **Handle** - Auto-generated internal reference (e.g., `navy-blue`).

<img src="/files/djVUhMnypyu1aYrlS6z2" alt="" data-size="original">

**Note**: **Image** overrides color. **Color** is used only when no image exists.
{% endhint %}

**Step 3: Connect the Category Metafield to Variant Options**

1. Go back to your product in Shopify Admin.&#x20;
2. In the **Variants** section of the product, click **+ Add options like size or color** (if not already set) or edit an existing option.&#x20;
3. If a category metafield (for example, "Color") is available to connect, select it. Shopify will auto-fill the option values with entries from that metafield.&#x20;

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

4. Optional: If you have custom option values not yet in the metafield, click on this custom option value, then **Add new entry**, fill out the entry, and save.

<div><figure><img src="/files/cZIntjRGmQc823h8XG6F" alt=""><figcaption></figcaption></figure> <figure><img src="/files/G5ap1xBkEvSWyitZO7lL" alt=""><figcaption></figcaption></figure></div>

5. Click **Save** on the product.

{% hint style="info" %}
**Tip***:* If you already have variant options and want to migrate them to category metafields, you can connect them via the "dynamic source" icon and then save.

<img src="/files/AdHGUgEECPJvXsevWqSg" alt="" data-size="original">

<img src="/files/jctwazdtVquXX9OzKatF" alt="" data-size="original">
{% endhint %}

**Summary**

Using category metafields ensures:

* Centralized, reusable swatch definitions
* Consistent labels and colors across products
* Easier filtering and swatch display in your theme

{% hint style="success" %}
Learn how to set up color swatches using category metafields: [Shopify Help: Using category metafields](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields)
{% endhint %}

</details>

### Actions

Controls interactive elements displayed on product cards.

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show quick add</strong></td><td><p>Adds an <strong>Add to cart</strong> or <strong>Choose options</strong> button directly on the product card.</p><ul><li>Single variant products show <strong>Add to cart</strong> button which adds the item immediately.</li></ul><div><figure><img src="/files/xVBTRWIT52NCbB7NTmET" alt="" width="215"><figcaption></figcaption></figure></div><ul><li>Multi-variant products show <strong>Choose options</strong> button which opens the Quick View popup, allowing the customer to select a variant and add the product to the cart without leaving the page.</li></ul><div><figure><img src="/files/pROAFFlVDNXzR0ssLtXK" alt="" width="216"><figcaption></figcaption></figure></div><div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Note:</strong> The Quick Add button does not appear on <strong>sold-out</strong> products.</p></div></td></tr><tr><td><strong>Show quick add on mobile</strong></td><td><p>Enables Quick add functionality specifically for <strong>mobile users</strong>.</p><div><figure><img src="/files/eMtYunjNXzrjRHFBVWAR" alt="" width="213"><figcaption></figcaption></figure></div><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>If the product has different variants, the quick view modal will be opened for customer to select the variant they want to added to the cart.</p></div></td></tr><tr><td><strong>Quick add style</strong></td><td><p>Choose how the Quick add button is displayed visually:</p><ul><li><strong>Text only</strong></li><li><strong>With icon</strong></li></ul><div data-gb-custom-block data-tag="tabs"><div data-gb-custom-block data-tag="tab" data-title="Text only"><div><figure><img src="/files/bJfKb6OKJnZfLZT5lkso" alt="" width="215"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="With icon"><div><figure><img src="/files/nKaDotpQpGQu2WIhoTtc" alt="" width="216"><figcaption></figcaption></figure></div></div></div></td></tr><tr><td><strong>Quick add icon</strong></td><td><p>Select the icon used when the <strong>With icon</strong> style is enabled:</p><ul><li><strong>Plus</strong></li><li><strong>Cart</strong></li></ul><div data-gb-custom-block data-tag="tabs"><div data-gb-custom-block data-tag="tab" data-title="Plus"><div><figure><img src="/files/G0AXsYIq5xv2gVsJT4hW" alt="" width="214"><figcaption></figcaption></figure></div></div><div data-gb-custom-block data-tag="tab" data-title="Cart"><div><figure><img src="/files/jzjRusNJUMNi81Q9ZVx2" alt="" width="215"><figcaption></figcaption></figure></div></div></div></td></tr><tr><td><strong>Quick add color scheme</strong></td><td><p>Select the color scheme applied to the Quick add button.</p><p>This setting controls the button’s:</p><ul><li><strong>Background color</strong></li><li><strong>Text color</strong></li><li><strong>Border color</strong></li><li><strong>Hover state styling</strong></li></ul><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Color schemes are managed in: <strong>Theme settings ></strong> <a href="/pages/LHMEEJzFAAyBfjuU3BDC">Colors</a>.</p></div></td></tr><tr><td><strong>Show quick view</strong></td><td><p>Adds a Quick view icon (magnifying glass) on hover over the product image.</p><p>Clicking opens a Quick view popup, allowing customers to see product details without leaving the page.</p><div><figure><img src="/files/YpsPPZdy6r0hAzpHSenB" alt="" width="215"><figcaption></figcaption></figure></div><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>To customize your Quick view, see <a href="/pages/lRqKlsaKX5KlxcaOxCff">Quick add drawer</a>.</p></div></td></tr><tr><td><strong>Show quick view on mobile</strong></td><td><p>Enables the Quick view icon and popup on <strong>mobile devices</strong>.</p><div><figure><img src="/files/ZEI8xDuHpRAec3OdTxRp" alt="" width="216"><figcaption></figcaption></figure></div></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/pebble-theme/theme-settings/product-cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.