Product Cards

Product cards are how your products appear in collection pages, search results, and product grids throughout your store.

Accessing Product Card Settings

1. Open the theme editor
2. Go to Theme settings (gear icon)
3. Click Product cards

Product Card Settings

Display Options

Product Ratings

Display star ratings on product cards when you have reviews.

Setting Up Ratings

1. Enable “Show product rating”
2. Configure metafield paths for your review app:
   • Rating: reviews.rating (default)
   • Count: reviews.rating_count (default)

Supported Review Apps

Ratings work with apps that use Shopify’s standard rating metafields:

• Shopify Product Reviews
• Judge.me
• Loox
• Yotpo
• And others using standard metafields

Color Swatches

Display color variant swatches on product cards.

How It Works

1. Products with color options show swatches
2. Clicking a swatch updates the product image
3. Limited to prevent overcrowding

Settings

Tip: If a product has more colors than the max, a “+X” indicator shows remaining options.

Quick Add to Cart

Let customers add products directly from the grid.

How It Works

1. Customer hovers over a product card
2. “Add to cart” button appears
3. Clicking adds the default variant to cart
4. Cart drawer opens automatically

Settings

Note: Quick add works best for products with few or no variants.

Price Styling

Control how prices appear on product cards.

Where: Theme settings → Price styling

Price Settings

Compare Price Settings

For sale items showing original price:

Product Card Elements

Each product card displays:

1. Product image - Primary product photo
2. Hover image - Second image on mouse hover (if available)
3. Badges - Sale, New, etc. (see Badges)
4. Product title - Linked to product page
5. Price - Current price with compare price if on sale
6. Color swatches - Available color options
7. Rating - Star rating if enabled
8. Quick add - Add to cart button on hover

Common Tasks

Enable product ratings

1. Theme settings → Product cards
2. Check “Show product rating”
3. Configure metafield paths if using non-standard fields

Show more color swatches

1. Theme settings → Product cards
2. Increase “Max color swatches” (up to 5)

Disable quick add

1. Theme settings → Product cards
2. Uncheck “Enable add to cart on hover”

Make prices bold

1. Theme settings → Price styling
2. Set “Price font weight” to Bold

Design Tips

Image Consistency

• Use consistent aspect ratios across products
• Same image dimensions for uniform grid appearance

Color Swatch Quality

• Use clear, accurate color representations
• Consider using product images as swatch backgrounds

Rating Display

• Only enable if you have meaningful review data
• Empty ratings can look incomplete

Troubleshooting

Ratings not showing

• Verify metafield paths match your review app
• Ensure products have rating data
• Check that “Show product rating” is enabled

Color swatches missing

• Verify products have color variant options
• Check that option is named “Color” or similar
• Ensure swatch images are configured

Quick add not appearing

• Verify setting is enabled
• Check hover state (desktop only)
• May not appear on touch devices

Prices not styled correctly

• Check Price styling settings
• Clear browser cache

Next: Configure product badges