Core Problem You want color-based filtering (e.g., clicking “Blue” shows all blue variants and products).
You want variant images to appear directly in collection filtering results, not just the parent product thumbnail.
Some products won’t have variants, but should still respect the base color filtering.
You’d like to avoid treating every variant as its own product (Plan B).
Option 1: Keep Variants + Use Metaobjects/Metafields This is the more organized & scalable way.
Assign a Base Color to Each Variant
Create a variant metafield (e.g., custom.base_color).
Populate it with values like “Blue”, “Red”, “Green”.
Even if the variant name is “Sky Blue” or “Royal Blue,” its metafield = Blue.
Use Search & Discovery App
Shopify’s Search & Discovery can filter products, but it doesn’t natively filter variants individually.
To work around this, you’ll need a custom collection template or an app that lets you surface variants in collection grids.
Custom Collection Grid to Show Variants
By default, Shopify only shows products in a collection.
You’ll need custom code (or an app like Boost AI Search & Filter, Filter & Search by Power Tools, or Globo Filter) that allows variants to appear as separate filterable items.
With this, when you click “Blue,” the grid will show all variants with base_color = Blue, displaying their variant image.
Fallback for Products without Variants
For products with no variants, just assign the metafield to the product level instead (so it still shows up with the filter).
This way:
Admin stays clean (you keep variants inside one product).
Filtering is based on base colors, not variant names.
User sees variant thumbnails directly in filtered views.
Option 2: Treat Variants as Products This works, but as you said, it’s messy in admin.
Every shade variant becomes its own product.
Then you can assign base color as a product metafield and filtering works out-of-the-box.
Easier for filtering logic, harder for management (inventory, product count inflation, SEO duplicates).
This is usually only recommended if:
Your store is very small, or
You absolutely need every variant to act as a standalone product for marketing/SEO reasons.
Suggested Setup (Best Practice) Keep products with variants (avoid clutter).
Add a variant metafield for base color.
Use a filter/search app that can:
Read metafields,
Filter at the variant level,
Display variants in the collection grid.
Apps that do this well:
Boost AI Search & Filter (most popular for variant-level filtering).
Searchanise (variant-aware filtering).
Globo Product Filter & Search.
Implementation Roadmap Create base_color metafield at variant level.
Assign values like: Sky Blue → Blue, Navy → Blue, etc.
Install Boost Filter (or similar).
Configure filter: “Base Color”.
Adjust collection template → show variant images directly.
Test with both: product without variants + product with multiple shades.
This way you get a clean admin, accurate filtering, and customers see exactly the variant they’re after.