Product settings determine how products appear on collection pages, search results, and product grids throughout your store with global controls for card layout, swatches, quick add functionality, and badge styling. Optimized product card design significantly impacts browse-to-purchase conversion and can increase add-to-cart rates by 20-30% through better visual presentation and reduced friction. Configure these product settings to create an effective, consistent browsing experience across your entire catalog.
What this controls Product settings determine how products appear on collection pages, search results, and product grids throughout your store. These global settings ensure consistent presentation while allowing flexibility for different product types.
Product card design significantly impacts browse-to-purchase conversion. Optimized settings can increase add-to-cart rates by 20-30%.
How it works Sahara’s product system has four main components:
Product Cards: Layout and image display settingsSwatches: Color/variant visualization on cardsQuick Add: Add to cart directly from collection pagesBadges: Visual indicators (Sale, New, etc.)
These work together to create an effective product browsing experience.
Settings here apply to product cards globally. Individual sections may have additional card-specific options.
Getting started
Open Theme Customizer
From Shopify admin → Online Store → Themes → Customize
Access product settings
Click Theme settings → Select Products
Configure card layout
Choose image ratio and layout density
Enable swatches
Turn on color swatches for variant visualization
Set quick add behavior
Choose how customers add products from collections
Location Path: Theme settings → ProductsSettings Card Layout
Swatches & Variants
Quick Add
Badges
Advanced
Card Product Layout Controls spacing and density of content within product cards. Options:
Standard: Comfortable spacing, full product informationCompact: Tighter spacing, shows more products per screen Default: Standard
Standard vs Compact comparison
Standard Layout:
Generous padding around content
Larger product titles
More breathing room
Better for premium/luxury positioning
Shows 3-4 products per row (desktop)
Compact Layout:
Reduced padding
Smaller text elements
Maximizes products visible
Better for large catalogs
Shows 4-5 products per row (desktop)
Choose Standard If:
Premium or luxury brand
Detailed product information needed
Products have long titles
Want spacious, uncluttered feel
Choose Compact If:
Large product catalog (100+ products)
Need to show many products per screen
Minimal product information
Fashion/fast-fashion store
Card Product Image Ratio Forces consistent aspect ratio across all product card images. Options:
Adapt to image: Uses original image proportions (auto height)Square: 1:1 ratio (100%)Portrait: 3:4 ratio (136.54%) - Default Default: PortraitConsistent image ratios create cleaner grids. Portrait (3:4) works well for most fashion, accessories, and packaged products.
Choosing the right image ratio
Adapt to Image (Auto):
Pros: Shows entire image, no croppingCons: Inconsistent grid, ragged bottom edgesBest for: Mixed product types, editorial storesRequires: Consistent photography across products Square (1:1):
Pros: Clean, modern grid; works on Instagram-style feedsCons: May crop tall productsBest for: Products that photograph well from aboveExamples: Jewelry, watches, shoes (top-down), food Portrait (3:4) - Default:
Pros: Fits most product photography; vertical space for tall itemsCons: May crop very wide productsBest for: Apparel, accessories, bottles, packaged goodsExamples: Clothing, cosmetics, electronics, books Image Requirements:
Square: Minimum 1000×1000px
Portrait: Minimum 1000×1365px
Always upload 2× resolution for retina displays
Image ratio by product type
Fashion/Apparel:
Recommended: Portrait (3:4)
Shows full garment
Allows model shots
Jewelry/Accessories:
Recommended: Square (1:1)
Clean, Instagram-ready
Product centered
Home Goods:
Recommended: Adapt to image
Mixed product sizes
Lifestyle photography varies
Electronics:
Recommended: Square (1:1)
Product-focused shots
Consistent sizing
Beauty/Cosmetics:
Recommended: Portrait (3:4)
Bottle/package oriented
Vertical emphasis
Controls how images fill the aspect ratio container. Options:
Cover: Fills entire space, may crop edgesContain: Shows entire image, may have empty space Default: CoverCover crops images to fill space. Ensure important product details (faces, logos) are centered in photos.
Cover vs Contain behavior
Cover (Default):
Behavior: Image fills entire container, crops overflowEffect: No white space, full-bleed imagesBest when: Images slightly taller/wider than ratioCaution: May cut off text or important details Contain:
Behavior: Shows entire image, adds space if neededEffect: White/background-color bars (letterboxing)Best when: Exact image ratio match is criticalCaution: Creates empty space on cards Photography Tips:
For Cover: Center important elements, leave crop margin
For Contain: Ensure consistent aspect ratios in photography
Test both settings with your actual product photos
Card Product Image Hover Shows secondary product image on hover. Default: Disabled (false)Hover images increase engagement and reduce product page visits for quick browsing. Use meaningful second images (back view, alternate angle, in-use shot).
Hover image best practices
Effective Second Images:
Back view: If first is front (apparel)Alternate angle: Side or detail shotIn-use shot: Product being worn/usedColor variant: Show different colorwayClose-up: Detail of texture/material Avoid:
Random unrelated image
Same image from slightly different angle
Lower quality than primary image
Different product entirely
Technical Requirements:
Upload as 2nd image in product media
Same aspect ratio as primary
Consistent across all products (or disable feature)
When to Enable:
Apparel stores (front/back views)
Products with interesting details
Multiple angles add value
When to Disable:
Single-angle products
Inconsistent photography
Mobile-first audience (hover doesn’t work)
Enable Product Swatches Displays color/variant swatches on product cards. Default: Enabled (true)Swatches only appear for products with color variants. Variant option name must include “color” or “colour” (case-insensitive).
Show Product Swatches Always Controls swatch visibility behavior. Options:
No: Swatches appear on hover only (default)Only mobile: Always visible on mobile, hover on desktopDesktop and mobile: Always visible on all devices Default: No (hover only)
Swatch visibility strategy
Hover Only (Default):
Pros: Cleaner cards, less visual clutterCons: Discoverability lower, requires interactionBest for: Minimal design, few color options per product Always Visible (Mobile Only):
Pros: Touch-friendly, no hover on mobileCons: Inconsistent between devicesBest for: Mobile-first stores Always Visible (All Devices):
Pros: Maximum discoverability, immediate color selectionCons: Can clutter cards, distracting if many colorsBest for: Fashion stores, products where color is primary decision factor Recommendation:
1-3 colors per product: Hover only (clean)4-6 colors: Always visible mobile, hover desktop7+ colors: Always visible all devices (or redesign - too many options)
Setting up color swatches
Requirements:
Product must have variant option named “Color” or “Colour”
Variant values become swatch names
Sahara uses automatic color matching
Color Name Matching:
Standard names work automatically: Black, White, Red, Blue, Green, Yellow, etc.Common shades recognized: Navy, Burgundy, Forest Green, Sky BlueCustom colors: Add swatch images in theme settings (advanced) Best Practices:
Use consistent color names across products
Capitalize color names (“Navy Blue” not “navy blue”)
Avoid ambiguous names (“Color 1”, “Option A”)
Test swatches after setup
Swatch Configuration:
Location: Theme settings → Swatches
Define custom color mappings if needed
Upload custom swatch images (16×16px minimum)
Swatch Shape Visual style of color swatches. Options:
Square: Sharp corners (default)Circle: Round swatches Default: SquareMatch swatch shape to your overall design aesthetic. Square for modern/minimal, Circle for soft/friendly brands.
Sizes Option Defines which variant option represents product size. Default: “Size”This setting helps the theme identify size variants for special handling (e.g., size guides, sorting). Change if your size option has a different name (e.g., “Taille” for French stores).
Quick Add to Cart Allows customers to add products to cart directly from collection pages without visiting product page. Options:
With variant selector: Opens popup with variant options (default)Simple button: Adds default variant directlyDisable: No quick add functionality Default: With variant selector
With Variant Selector (Recommended):
How it works: Clicking button opens popup with size/color optionsPros: Handles multi-variant products properly, reduces errorsCons: Extra click required, popup can be dismissedBest for: Products with variants (size, color)Conversion impact: +15-25% vs visiting product page Simple Button:
How it works: Adds default variant instantly (usually first variant)Pros: Fastest path to cart, one-click addCons: May add wrong size/color, confusing for multi-variantBest for: Single-variant products, pre-orders, simple itemsConversion impact: +30-40% for simple products, -10% for multi-variant (wrong selection) Disable Quick Add:
How it works: Customer must visit product page to addPros: Forces product page view, more information consumedCons: Extra friction, slower purchase pathBest for: Complex products, customizable items, high-consideration purchasesConversion impact: Baseline (100%)
Use “With Variant Selector” If:
Most products have 2+ variants
Size/color selection is important
Want balance of speed and accuracy
Fashion, apparel, accessories stores
Use “Simple Button” If:
Mostly single-variant products
Default variant is usually correct
Speed is critical (impulse purchases)
Digital products, subscriptions, simple items
Use “Disable” If:
Products need detailed explanation
Customization required before purchase
Long descriptions are important
High-value or complex products
A/B Testing:
Test “With Variant Selector” vs “Simple Button” for 2 weeks each
Measure: Add-to-cart rate, cart size, return rateSeparate button style control for mobile devices. Options:
Filled: Solid background buttonOutlined: Border-only button Default: OutlinedMobile conversion rates are sensitive to button visibility. Consider using Filled for higher contrast and better tap targets.
Product Badge Style Visual style of badges on product cards (Sale, New, Limited, etc.). Options:
Transparent: No background, text only (default)Square: Solid background with sharp cornersRound: Solid background with rounded corners Default: Transparent
Transparent (Default):
Look: Subtle, minimal, text-onlyVisibility: Low to mediumBest for: Minimal/luxury brands, when badges are supplementaryCaution: May be hard to read over busy images Square:
Look: Bold, attention-grabbing, modernVisibility: HighBest for: Sale emphasis, promotional stores, clear hierarchyEffect: Badges stand out strongly Round:
Look: Friendly, soft, casualVisibility: HighBest for: Lifestyle brands, approachable aestheticEffect: Less harsh than square, still prominent
Badge types and configuration
Automatic Badges:
Sahara generates these automatically:Sale Badge:
Appears when compare_at_price > price
Shows “Sale” or discount percentage
Configured in: Theme settings → Products
Sold Out Badge:
Appears when inventory = 0
Shows “Sold out” text
Automatic, cannot disable
Custom Badges:
Create using product tags:Tag Format: badge:Badge TextExamples:
badge:New → “New” badgebadge:Best Seller → “Best Seller” badgebadge:Limited → “Limited” badgebadge:Eco-Friendly → “Eco-Friendly” badge Best Practices:
Maximum 1-2 badge types per product
Keep badge text short (1-2 words)
Use consistent badge tags across products
Test badge visibility on your product images
Badge Colors:
Controlled by color schemes
Badge background: tag color
Badge text: tag_label color
Configure in: Theme settings → Colors
Product Groups (Advanced) Advanced feature for grouping related products using Shopify metaobjects. Requirements:
Shopify Plus plan
Custom metaobject definitions created
Products linked via metaobjects
Metaobject for Product Groups:
Enter metaobject definition handle to enable product grouping.Show Product Groups:
None: Don’t display groupsProduct: Show on product pages onlyCard: Show on product cards onlyBoth: Show on cards and product pages Product groups are an advanced feature requiring custom development. Most stores don’t need this.
What Are Product Groups:
Group related products together (e.g., “Complete the Look”, “Bundle Items”, “Also Available In”).Common Use Cases:
Fashion: Complete the outfit (shirt + pants + shoes)Electronics: Compatible accessoriesBeauty: Skincare routine setsHome: Room collections Setup Requirements:
Create metaobject definition in Shopify admin
Add metaobject field to products
Link products through metaobject entries
Enter metaobject handle in theme settings
Alternative Solutions:
If you don’t have Shopify Plus:
Use product recommendations (built-in Shopify)
Manually curate related products sections
Use product tags for grouping
Best practices
Choose portrait image ratio for most stores
Enable hover images for apparel
Use “With variant selector” quick add
Keep swatches on hover for clean cards
Match swatch shape to button shape
Limit badges to 1-2 types
Use transparent badges for minimal aesthetic
Ensure consistent photography
Test on actual products
Consider mobile-first
Common use cases
Settings:
Card layout: Standard
Image ratio: Portrait (3:4)
Media fit: Cover
Hover image: Enabled
Swatches: Enabled , always visible on mobile
Quick add: With variant selector
Badge style: Transparent or Round
Swatch shape: Circle
Why: Portrait shows full garments, hover images show back view, swatches highlight color options, variant selector handles size/color combinations.
Jewelry/accessories store
Settings:
Card layout: Standard
Image ratio: Square (1:1)
Media fit: Cover
Hover image: Enabled (close-up detail)
Swatches: Enabled , hover only
Quick add: Simple button (single-variant often)
Badge style: Square (New, Limited)
Swatch shape: Square
Why: Square ratio for jewelry photography, clean grid, hover shows detail, simple products often single-variant.
Settings:
Card layout: Compact
Image ratio: Square (1:1)
Media fit: Cover
Hover image: Disabled
Swatches: Enabled , always visible
Quick add: With variant selector
Badge style: Square (Sale emphasis)
Swatch shape: Square
Why: Compact layout shows more products, square for consistency, always-visible swatches for quick scanning, bold sale badges drive urgency.
Settings:
Card layout: Standard
Image ratio: Adapt to image
Media fit: Contain
Hover image: Enabled (subtle alternate view)
Swatches: Disabled
Quick add: Disabled
Badge style: Transparent
Swatch shape: N/A
Why: Maximum image quality (Adapt + Contain), no quick add forces product page visit, subtle badges, no swatches for clean aesthetic.
Colors - Badge colors defined in color schemesButtons - Quick add button stylingLayout - Grid spacing affects product cardsCommon Settings - Section-level product grid options
Need help? Test product card settings with real products and images. What looks good with placeholders may need adjustment with actual photography.
