I’d like to raise a limitation that I think affects many merchants with multi-variant products.
The problem: Shopify uses the default variant’s assigned image as the collection page thumbnail. There is no native way to set a collection thumbnail independently of variant image assignments.
The impact: To control which image shows on my collection pages, I have to assign my hero/all-colors photo to my default variant. This creates a conflict — when a customer selects that variant on the product page or within a third-party bundle app, they see the hero shot instead of the color-specific photo they selected.
What I’d love to see: A dedicated “collection thumbnail” image field on the product level, separate from variant image assignments, so merchants can control both experiences independently.
This feels like a fundamental gap in the platform that forces merchants into awkward workarounds. Would love to know if others are experiencing this and if Shopify has plans to address it!
It’s always a good idea to get terminology right, otherwise people will misunderstand. But reading as a whole, I think you’re talking about the image on a product card, not a collection image, and not a hero image. If I am mistaken, just let people know exactly what you are talking about and provide screenshots if you have any.
Look at this product I just made. See the image gallery? Blue is first.
Why does this happen? That first image in the gallery is called the featured image. The theme (in my case Horizon) puts the featured image on the product card, not the first variant image. Most themes do this now. Your theme (Gain) does this too. This is really a theme feature and not from Shopify.
On the product page, however, the image shown is usually the first variant image. Why? Because the theme selects the first variant. And when a variant is selected, it’s assigned image is shown. This, too is a theme feature. It could show the product’s featured image by default, but that would probably create some confusion.
What you’re describing is your theme rather than Shopify itself. Shopify’s product thumbnail is normally just the first image in your product’s media order, not the default variant’s image, and a photo doesn’t become the thumbnail simply because it’s assigned to a variant. Some themes do render the first variant’s image on collection cards instead, which is exactly the behaviour you’re fighting, and that’s a theme decision, not a platform one.
If your theme is one that insists on the variant image, the feature you’re asking for can be built today. Add a File type metafield on products called something like collection thumbnail, upload your hero shot there, then update the product card so it uses that image when it exists and falls back to the normal one when it doesn’t. That gives you exactly the independent control you described, across every collection page, with no awkward workarounds.
Which theme are you on? Happy to tell you which of the two situations you’re in, and if it needs the metafield route I can set it up for you properly.
I’d separate “collection thumbnail” from “PDP hero” here. A variant image can be the right reassurance after a shopper picks an option, but forcing it as the first image can make the collection card look inconsistent and hide the default product story. Test the two jobs separately: collection click-through → PDP view, then selected variant → image change → add to cart. Keep the product/offer constant and segment mobile vs desktop; measure PDP ATC and purchase, not just image clicks. If the selected variant does not update the gallery immediately, that is a catalog/theme wiring issue; if it updates but ATC stalls, the remaining question is likely fit/price/trust.
I tested it: Gain builds the collection card from your default variant’s image, not from the product’s featured image. It is Gain’s behaviour not shopify’s
Hello there @JZachery
In my opinion it’s a fair restriction, especially for products with many color variants. A workaround is to organize the product media and use the product image for the collection display, and the variant media to options. You can also play around with your theme’s product card options as some themes allow you to customize the product images display. Having a product level colection thumbnail in the product would certainly make this more clear and would allow you to keep the image experience of the variants.
Hi @JZachery Welcome To Shopify Community So This is a real gap, and the workaround you’re already using (hero image on default variant) is basically the only native option right now, so you’re not missing a setting, this genuinely doesn’t exist as a separate field.
A cleaner workaround some merchants use: create a product image metafield (image type) specifically for “collection thumbnail,” upload your hero shot there instead of assigning it to the default variant, then customize your collection page template’s Liquid to pull from that metafield instead of product.featured_image when rendering collection grid thumbnails. That decouples the two completely, your default variant can keep its actual color-specific photo, and the collection thumbnail pulls from its own field.
The tradeoff is it requires a small theme code edit (in whichever section renders your collection product grid) and manually setting that metafield per product, so it’s more setup than a native toggle, but it fully separates the two use cases you’re describing without needing to sacrifice the variant photo accuracy.
Worth also posting this in Shopify’s Feedback area as a formal feature request, since this exact pain point (thumbnail vs. variant image conflict) comes up often enough that it could gain traction there.
You can add a separate “Collection Thumbnail” product metafield and use it in the collection card code. This will keep the variant images unchanged.
Send me the collection card file code, and I’ll tell you exactly what to change.
I’m not so sure this is a Shopify-wide limitation. Have you checked the theme behavior on a plain product page? It may just be using the first product image or the featured media, then the collection card inherits that.
If the card is pulling the default variant image, the clean fix is probably to separate the two jobs in the theme. Use one image for the collection card and keep variant media for the product page, or use a product metafield for the card image if your theme supports it.
The important part is not to tie your hero shot to the default variant if that variant also needs to show the color-specific image after selection.
yeah, this is one of those things where the workaround technically works but creates another problem somewhere else. the collection card and the variant selector are serving completely different purposes, so tying the collection image to the default variant feels unnecessarily restrictive.
a separate product-level collection image would make a lot more sense. especially with products that have 10+ colours, you could choose the image that sells the product best for the collection grid without having to sacrifice the correct image when someone actually selects a variant. third-party bundle apps make this even more noticeable because they often rely on the variant image directly.
Hi! This can likely be done with custom theme changes/development - I recommend looking into the partners directory perhaps use a per variant metafield like “collectionImage” and set the Shopify cdn url there and if its available for the given variant then load it, otherwise fallback to what it is showing right now
Thank you all — this is extremely helpful. And thank you for clarifying that this is related to how the Gain theme (I’m using the Sable preset) handles the default variant image rather than a Shopify-wide limitation.
The separate product-level metafield for the collection/card image sounds like exactly what I was trying to accomplish: keeping my all-colors hero image on the collection card while allowing each variant, including the default variant, to display its correct color-specific image.
Ploqo, thank you especially for taking the time to test this with Gain and provide the specific steps and code. I’m going to test the solution on a duplicate of my theme, and if all goes well, the duplicate will become my new and improved live store!
Interesting… Everyone has a problem with their Gain theme except me… It works like every other theme… It’s just a matter of putting my preferred image in the first spot in the media gallery… This is the Gain theme. Shirt 15 copy copy. Not the variant image. Fascinating… must be magic.
Hi Ploqo — thank you again. I tested your solution on a duplicate of my Sable/Gain theme. I created the custom.card_image metafield and assigned my hero image to it, then added the code to snippets/product-card-image.liquid as you described.
The metafield image is displaying, but the collection card is now showing the hero image twice — the new Card image appears above the theme’s existing product-card image. This also doubles the height of that card and stretches the entire collection row.
It looks like Sable is still rendering its original product-card image in addition to the metafield image. Is there a small adjustment needed to the snippet so the Card image replaces the normal collection-card image when the metafield is populated, rather than rendering in addition to it?
perhaps use a per variant metafield like “collectionImage” and set the Shopify cdn url there and if its available for the given variant then load it, otherwise fallback to what it is showing right now
