Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
I sell drinkware products and wanted to create collection pages for each color collection, it was very simple, just create a collection using each variant as a condition, but my thumbnails show as the default color of the product and wanted to know if there's a way to customize each one to show all the thumbnails in the right color, I'm using the Empire theme. There's about 30 color collections I'd like to create and I don't mind if the solution involves tweaking each one manually, I just want to know a usable, repeatable and simple method that I can use every time we add new colors.
Here's a link to a collection I created to test this out: https://losoriginalesmx.com/collections/firefly
Solved! Go to the solution
This is an accepted solution.
Isn't it possible with smart collections for each color ?
like https://losoriginalesmx.com/search?q=yellow
And maybe use a product metafield to define the preferred image per color collection. That way, you don’t have to mess with image order globally , you just pull the right image per collection context using liquid
Hi @losoriginales 👋 That requires an advanced theme customization to parse the options to values then get the relevant variant image, or more complicated the correct image from all the products media.
It would be in an alternate template when you apply it to a collection use's either that collections name or a metafield on the collection to show the right variant.
If you need this customization then reach out to me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
The reason you're seeing the default thumbnail (instead of the color-specific one) is because Shopify always pulls the first variant's featured image for collection thumbnails unless customized.
Go to Products > Collections in your Shopify Admin.
Open the collection (e.g., “Firefly”).
Scroll down to the Collection image section.
Upload the image that matches the variant/color for that collection.
This image overrides the default product image shown for the collection.
It works great for color collections where you want more control.
Save — done
Wouldn't this make every product in the collection have the same image? I'm trying to get each product to be pictured in the corresponding color
@losoriginales yeah that's the collections image, it's not understanding the problem or what's needed.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
There's multiple products on the collection, each product has to be pictured individually, in the color corresponding to the collection, I can't make the collection image a 20oz tumbler because there's coolers and accesories in there too
Then don't follow that advice, an advanced theme customization is needed.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Hi @losoriginales you only want that specific color variant show on that collection page?
like the one you shared yellow so only yellow ones appear on that page?
Indeed, in this case it'd be the yellow one near the bottom
This is an accepted solution.
Isn't it possible with smart collections for each color ?
like https://losoriginalesmx.com/search?q=yellow
And maybe use a product metafield to define the preferred image per color collection. That way, you don’t have to mess with image order globally , you just pull the right image per collection context using liquid
Ok this is actually genius, I can just save links for every color as a search term and not worry about creating extra pages, an unexpectedly easy, simple and clean solution, thanks!
Hi @losoriginales,
Are you looking to create collections where only colors with the same name as the collection are displayed? Like creating a Negro Collection, it will display products with the color Negro.
This is possible, if you want, please send me the collaborator code in private message, I will check it
I've found an adequate solution to my problem now, but thanks for the interest
Hi @losoriginales,
Congratulation! It's my pleasure