Product Card Guide
The Product Card component is a versatile and feature-rich element used throughout the store to display products in collections, search results, featured sections, and recommendations.
It combines visual elements with product information and interactive features to enhance the shopping experience.
Key Features
- Responsive design that adapts to different layouts
- Customizable image aspect ratios
- Second image on hover effect
- Product badges (sale, sold out, new arrival)
- Quick add to cart functionality
- Product siblings (color swatches) integration
- Price comparison and sale pricing
- Vendor display option
Theme Settings Configuration
All product card settings are configured in Theme Settings → Product Cards:
Product Card Type
| Setting | Description | Options |
|---|---|---|
| Product card type | Controls the overall style of product cards | Modern (default) |
General Settings
| Setting | Description | Options |
|---|---|---|
| Image aspect ratio | Sets the proportions of product images | 1:1, 4:5, 5:7, 2:3, 9:13 |
| Show product vendor | Displays the product's vendor name | On/Off |
- 1:1 (Square) — Clean, modern look; great for fashion and accessories
- 4:5 (Portrait) — Balanced option for most products
- 2:3 (Tall) — Best for apparel and full-body product shots
- 9:13 (Extra tall) — Ideal for fashion lookbooks and editorial styles
Modern Card Features
Image Settings
| Setting | Description | Options |
|---|---|---|
| Show second image on hover | Reveals the second product image when hovering | On/Off |
| Enable quick add | Shows variant selector and add button on hover | On/Off |
Product Badge Settings
| Setting | Description | Options |
|---|---|---|
| Show background color | Adds background to product badges | On/Off |
| Show sold out label | Displays "Sold Out" badge when unavailable | On/Off |
| Show preorder label | Displays "Pre-order" badge for eligible products | On/Off |
| Show sale badge | Displays "Sale" badge for discounted products | On/Off |
| Show discount percentage | Shows percentage discount instead of "Sale" | On/Off |
| Show new label | Displays "New" badge for recent products | On/Off |
| New arrival limit | Number of days a product is considered new | 1-101 days |
Don't enable too many badges at once. Limit to 2-3 essential badges to avoid visual clutter and maintain clean product cards.
Card Components
Product Image
- Primary product image with customizable aspect ratio
- Optional second image that appears on hover
- Responsive loading with appropriate sizing
- Support for different media types (image, video, 3D model)
Product Badges
Located at the top corner of product images, badges provide important product status information:
- Sale badge (with optional discount percentage)
- Sold out badge
- New arrival badge
- Pre-order badge
Product Information
The information section displays:
- Product title (always shown)
- Optional vendor name
- Current price
- Comparative price (when on sale)
- Optional currency code
Quick Add to Cart
When enabled and hovered:
- A "+" button appears on the product image
- Clicking reveals variant options (if product has variants)
- Add to cart button allows direct purchase
- Variant selectors for products with options
Quick add works best for products with 2-3 variants maximum. For products with many options, direct customers to the product page instead by disabling quick add.
Product Siblings (Swatches)
When enabled in Theme Settings → Product Siblings:
- Color swatches appear below the product information
- Current product's swatch is highlighted
- Clicking a swatch navigates to the related product variant
How It Works
Default State:
Shows product image, title, and price
Hover State:
Reveals second image (if enabled) and quick add button
Quick Add Interaction:
Clicking "+" reveals variant options and add to cart
Swatch Interaction:
Clicking swatches navigates to related products
Best Practices
Image Optimization
- Maintain consistent aspect ratios across products
- Use high-quality images but optimize for web (aim for under 200KB per image)
- Ensure second images complement the primary image
- Consider using lifestyle images for hover state
Product Information
- Keep product titles concise for better display (under 60 characters)
- Use vendor display selectively based on importance
- Ensure prices are competitive and clearly visible
- Set up comparative pricing for sale items
Quick Add Implementation
- Works best for products with few variants
- Consider disabling for complex products with many options
- Test the user experience on both desktop and mobile
- Ensure inventory is synced to prevent overselling
Badge Usage
- Use badges strategically to highlight key product features
- Don't enable too many badges at once (visual clutter)
- Set appropriate "new arrival" timeframe for your industry:
- Fast fashion: 7-14 days
- Standard retail: 30 days
- Luxury: 60-90 days
Mobile Considerations
- Second image hover effect only works on desktop
- Quick add functionality adapts for touch interfaces
- Badges remain visible and properly sized on mobile
- Text adjusts to maintain readability on smaller screens
Always test product cards on actual mobile devices. Touch interactions and performance can differ significantly from desktop browser dev tools.
Product Card in Different Contexts
The product card adapts to different layouts:
- Grid Layout: Standard display in collections and search results
- List Layout: Alternative view with different proportions
- Featured Sections: Can be highlighted in special homepage sections
- Related Products: Appears in product recommendations
Integration with Theme Features
- Product Siblings: Color swatches appear when enabled
- Quick Add: Requires variant selection capabilities
- Badges: Connected to inventory, pricing, and publishing dates
- Card Borders: Controlled via theme border settings
Troubleshooting
Images not displaying correctly:
- Check aspect ratio settings and image dimensions
- Ensure images are optimized (not too large in file size)
- Verify product has a featured image assigned
Second image not appearing:
- Verify product has multiple images and hover effect is enabled
- Check that second image is uploaded and not hidden
- Test on desktop (hover doesn't work on mobile)
Quick add not working:
- Ensure product is available and variants are set up correctly
- Check that inventory tracking is enabled
- Verify the product isn't sold out
Swatches missing:
- Check Product Siblings settings and required metafields
- Ensure products share the same identifier
- Verify swatch images are uploaded (for image swatches)
Badges not showing:
- Verify badge settings are enabled in Theme Settings
- Check product conditions (sale price, inventory, publish date)
- Ensure badges aren't hidden by custom CSS
Enabling all features (second image, quick add, swatches, all badges) can impact page load time. Enable only the features that provide value for your specific products and customers.