Product cards

Customize the appearance and functionality of product cards across your store.

How to edit Product cards

Steps:

In the theme editor (Customize), click Theme settings.
Locate Product cards.
Make necessary changes.
Click Save.

Product cards settings options

Media

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

Setting

Description

Aspect ratio

Defines how product images are cropped for consistent display:

Auto (default) - Uses the original aspect ratio.
Square (1/1)
Portrait (4/5)
Portrait (3/4)
Landscape (16/9)
Landscape (4/3)

Corner radius

Adjust how rounded the product image corners should be:

Move the slider to change from 0px (sharp corners) to 32px (fully rounded).

Show second image on hover

Enables a hover effect that switches to the product’s second image when the customer moves their cursor over the product card.

Content

Setting

Description

Alignment

Controls how text aligns inside the product card:

Show product vendor

Toggle to display or hide the product vendor/brand above the product title.

Show product type

Toggle to display or hide the product type (e.g., "Hats", "Backpacks").

Badges

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

Setting

Description

Layout

Defines how multiple badges (sale, sold out, custom) are arranged:

Vertical (stacked)
Horizontal (side by side)

Show custom badges

Enable this option to show badges created through product tags.

✍️ Learn how to add custom badges: Product badges

To change the badges' colors, go to Theme settings > Colors

Show sold out badge

Toggle to display or hide a "Sold Out" badge on out-of-stock items.

Show sale badge

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).

Sale badge type: Choose how the sale badge displays discount information:
- Text - Shows "On Sale"
- Percentage - Shows a discount like "Save 20%"
- Fixed amount - Shows amount saved like "Save $10.00"

Swatches

Swatches represent variant colors or patterns in a visual way.

Setting

Description

Show swatches

Toggle this on to display color or pattern swatches under the product price.

Learn how to setting up Swatches via Shopify Category Metafields.

Note:

When Show swatches is OFF > all other swatch-related settings remain hidden.

When Show swatches is ON > additional swatch customization options appear (Show variant images, shape, width, max items).

Show variant images

When enabled, each swatch will display the variant’s assigned image (a miniature thumbnail) instead of using a solid color swatch.

Fallback behavior:

If Show variant images is ON but a specific variant does not have an assigned image, Pebble will automatically fall back to:

The swatch image defined in the color metafield (if available)
Otherwise, the color value (HEX/RGB) from the metafield

This ensures every swatch always has a visible representation, no blank swatches.

Swatch shape

Choose how swatches are displayed visually:

Circle
Square (1/1)

Swatch width

Controls the size of each swatch.

Available range: 20px – 100px.

Maximum items to show

Limits how many swatches appear before the remaining ones collapse into a "+X" indicator.

Range: 1 - 6 items.
Example: If a product has 3 colors and you set this to 2, customers will see 2 swatches + "+1".

Setting up Swatches via Shopify Category Metafields

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

Step 1: Assign a Product Category

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

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

In Shopify Admin, still under the product you selected, locate the Category metafields section.
To edit an existing entry:
- Click the category metafield.
- Click the entry you want to edit.
- Make changes.
- Click Save.

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.

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).

Note: Image overrides color. Color is used only when no image exists.

Step 3: Connect the Category Metafield to Variant Options

Go back to your product in Shopify Admin.
In the Variants section of the product, click + Add options like size or color (if not already set) or edit an existing option.
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.

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.

Click Save on the product.

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.

Summary

Using category metafields ensures:

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

Learn how to set up color swatches using category metafields: Shopify Help: Using category metafields

Actions

Controls interactive elements displayed on product cards.

Setting

Description

Show quick add

Adds an Add to cart or Choose options button directly on the product card.

Single variant products show Add to cart button which adds the item immediately.

Multi-variant products show Choose options 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.