Product Card
Overview
The Product Card component in Label One theme 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
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 |
Modern Card Features
| 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 |
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
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
- Ensure second images complement the primary image
- Consider using lifestyle images for hover state
Product Information
- Keep product titles concise for better display
- 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
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
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
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
- Second image not appearing: Verify product has multiple images and hover effect is enabled
- Quick add not working: Ensure product is available and variants are set up correctly
- Swatches missing: Check Product Siblings settings and required metafields
- Badges not showing: Verify badge settings and product conditions (sale price, inventory, publish date)
This documentation covers all aspects of the Label One theme's product card component, helping you optimize the presentation of your products throughout your store.