Configuring Swatches: Color/Custom Image vs. Variant Image Explained
When you select a visual style like a Circular or Square Swatch, the most important decision is what the customer actually sees inside the shape. Our app gives you two powerful ways to represent your variants: Color / Custom Image and Variant Image.
This guide explains the differences and helps you choose the right one for your product catalog.
Option 1: Color / Custom Image
This option allows you to manually define the look of the swatch using a specific color code or a pattern file.
How it works: You enter a HEX code (e.g., #000000 for black) or upload a small image file that represents a texture.
Best for:
Consistent Palettes: Ensuring your "Sky Blue" looks exactly the same across every product page.
Textured Goods: Showing materials like wood grain, leather, or marble patterns that aren't easily captured in a standard product photo.
Solid Colors: Clean, minimalist stores that prefer a crisp graphic look over a photo-based one.
Pro Tip: Use this if your product photos have shadows or busy backgrounds, as a flat color swatch often looks more professional.
Option 2: Variant Image
This is an automated feature that pulls visual data directly from your Shopify Admin.
How it works: The app looks at the "Variant Image" you have already assigned to a product in Shopify and automatically crops it into the swatch shape.
Best for:
Apparel & Fashion: Showing the actual fabric print or a mini-version of the specific shirt/dress pattern.
Intricate Details: When a simple color doesn't do justice to the product (e.g., a "Floral" pattern vs. just a "Pink" circle).
Time Saving: If you have already uploaded images for every variant in Shopify, this mode sets up your swatches instantly without extra manual work.
Note: Ensure your variant images are centered, as the app pulls from the middle of the photo to create the swatch.
Step-by-Step Configuration
1. Set the Global Swatch Type
Go to Product Page Settings.
Find your option (e.g., "Color").
In the Swatch Type column, select either Color / Custom Image or Variant Image.
2. Fine-Tuning Individual Values
If you choose Color / Custom Image but want "Midnight Blue" to be a specific texture:
Click Configure on that option row.
Locate the specific value (e.g., Midnight Blue).
Click the Upload/Edit icon to add a custom pattern file or change the HEX code.
Save Changes.
Quick Decision Guide
When to choose Color / Custom Image:
Basic Apparel: For solid-color T-shirts to keep the UI clean and uniform.
Home Decor Materials: Use high-quality texture files for wood, metal, or stone finishes.
Brand-Specific Colors: When you need to match your store's specific brand palette exactly.
When to choose Variant Image:
Patterned Products: For leggings, wallpaper, or patterned fabrics where the design is the main selling point.
Jewelry: To show the specific gemstone or the way light hits a particular metal finish.
Multi-Tone Products: When a product has multiple colors that a single HEX code can't represent.
Need Help?
Our support team is dedicated to helping you build a beautiful storefront:
Live Chat: Available directly within the app dashboard.
Email Support: wecare@keficommerce.com