Product settings control how your products appear throughout your store—on collection pages, search results, and related product sections. These settings ensure consistent, attractive product presentation that encourages browsing and purchasing.
What these settings control
- Product card layout and style
- Product badges and labels
- Quick view functionality
- Variant display options
- Product image settings
- Price display format
How to access
Open the Theme Customizer
From your Shopify admin, go to Online Store → Themes → Customize.
Navigate to product settings
In the theme editor sidebar, select Theme settings → Products.
Configure display options
Adjust product card appearance, badges, and interactive features.
Save changes
Click Save to apply settings across all product displays.
Settings
Card Appearance
Badges & Labels
Quick View
Variants
Pricing
Product card style: Choose the visual style for product cards on collection pages.
- Standard: Traditional card with border. Clean, defined boundaries for any product type.
- Minimal: Borderless cards with subtle separation. Modern aesthetic, best for fashion/lifestyle.
- Elevated: Cards with shadow effect. Premium feel for luxury or high-end products.
Show second image on hover: Displays alternate product image when hovering over product cards (requires 2+ images per product). Great for showing back view, alternate angle, or lifestyle shot.Upload alternating angles as your second image: if the first is front-facing, make second image a back or detail shot.
Show vendor: Displays brand/vendor name on product cards. Best for multi-brand stores or when brand awareness matters. Consider disabling for single-brand stores. Sale badge: Shows “Sale” or percentage discount badge on discounted products.
- Show “Sale” text: Simple “Sale” badge for any discount amount.
- Show percentage: Displays actual discount (e.g., “-25%”). More informative and encourages purchases.
- Disable: No sale indicators for cleaner look (consider for luxury brands).
Sold out badge: Indicates when products are out of stock. Keep enabled so customers know product availability before clicking.New badge: Highlights recently added products with “New” badge for X days (typically 7-30 days). Best for stores with frequent new arrivals or trend-driven products.Custom badges: Add custom badges based on product tags or metafields (e.g., “Best Seller”, “Limited Edition”, “Eco-Friendly”). Use sparingly (max 1-2 badge types) to avoid visual clutter.Custom badges are configured through product tags. Add specific tags (e.g., “badge:bestseller”) to products you want to highlight.
Enable quick view: Allows customers to view product details in a popup without leaving the collection page. When enabled, “Quick view” button appears on product card hover. Best for simple products, fashion, and accessories. Consider disabling for complex products requiring detailed viewing.Quick view content: Choose what information appears in quick view popup.
- Minimal: Price, variants, add to cart. Fastest loading, clean and focused.
- Standard: Above + short description, images. Recommended default with balanced information.
- Detailed: Above + full description, reviews, tabs. Comprehensive but may be overwhelming.
Show color swatches: Displays color variants as visual swatches instead of dropdown. When enabled, color options appear as clickable color circles/squares. Best for fashion, home decor, or any products where color is primary decision factor. Use consistent color names (e.g., “Black”, “Navy Blue”) for automatic swatch generation.Show available variants only: Hides or disables out-of-stock variants on product cards and pages. Enable to reduce frustration—customers see only available options rather than discovering unavailable variants after selection.
Price format: Controls how product prices are displayed.
- Standard: $29.99. Clean and familiar for most stores.
- With currency code: $29.99 USD. Important for international stores to prevent currency confusion.
- Range for variants: 29.99−49.99. Shows price range when variants have different prices.
Show ‘from’ price: For products with variant pricing, show “From $X.XX” instead of exact price. Enable for transparency so customers know the displayed price is a starting point.Show unit pricing: Displays price per unit (e.g., $5.99/100g) for products sold by weight or volume. Required in many regions for consumables. Best for food, beauty products, and bulk items.
Best practices
- Match card style to brand: Minimal cards for modern/fashion brands, Standard for traditional retail, Elevated for premium/luxury positioning
- Use badges strategically: Max 1 badge per product. Prioritize Sale badges (drive conversion) and Sold out badges (prevent frustration) over custom badges
- Optimize hover images: Use meaningful second images (back view, alternate angle, product in use). Maintain consistency across all products
- Enable quick view selectively: Best for simple products with few variants. Disable for complex products needing detailed explanation
- Make variants visual: Use color swatches for color variants (always), text/dropdowns for non-visual options (size, material)
- Be transparent with pricing: Show “From $X” for multi-variant pricing, include currency code for international stores, ensure collection page prices match product page
- Test on mobile: Check that badges are readable, swatches have adequate touch target size, and quick view is mobile-optimized
Showing too much information on product cards (badges, vendor, ratings, long titles) creates visual clutter. Prioritize what truly influences purchase decisions.
A/B test product card variations. Small changes (showing/hiding vendor, badge style, card design) can significantly impact conversion rates.
- Cards - Configure card corner radius, alignment, and media display
- Colors - Customize badge and card colors
- Product Page - Configure full product page layout
- Pre-order - Set up pre-order badges and functionality