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

Can I customize thumbnails for specific collection pages?

Solved

Can I customize thumbnails for specific collection pages?

losoriginales
Tourist
6 0 3

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

Accepted Solution (1)

lixonic
Shopify Partner
20 3 3

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

lixonic_0-1751456299172.png

 



I build experiences powered by Shopify logic . ping me lixonic@gmail.com

View solution in original post

Replies 13 (13)

PaulNewton
Shopify Partner
8031 688 1649

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


chrisgrowthlab
Tourist
5 0 0

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

 

Need help fixing Shopify theme issues or add-to-cart errors?
Contact: chrisgrowthlab@gmail.com
Problem Solved? Click “Accept as Solution” to help others.
losoriginales
Tourist
6 0 3

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

PaulNewton
Shopify Partner
8031 688 1649

@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


losoriginales
Tourist
6 0 3

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

PaulNewton
Shopify Partner
8031 688 1649

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


Ahsan_ANC
Shopify Partner
1420 255 329

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?

Ahsan_ANC_0-1751438477716.png

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
losoriginales
Tourist
6 0 3

Indeed, in this case it'd be the yellow one near the bottom

lixonic
Shopify Partner
20 3 3

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

lixonic_0-1751456299172.png

 



I build experiences powered by Shopify logic . ping me lixonic@gmail.com
losoriginales
Tourist
6 0 3

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!

namphan
Shopify Partner
2777 358 407

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
losoriginales
Tourist
6 0 3

I've found an adequate solution to my problem now, but thanks for the interest

namphan
Shopify Partner
2777 358 407

Hi @losoriginales,

Congratulation! It's my pleasure

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com