Different Collection Image on Home Page and Collection Page

[OliviaRae]

Hello!

I am using the debut theme and would like to have a different picture in the Collection section on my home page than another picture on the collection page once the customer clicks that collection. 

Than k you in advance!

[JHKCreate]

Hi @OliviaRae ,

There isn't any easy way of doing this without getting into your liquid code and modifying a thing or two so that the banner that is loaded up on the Collection is taken from a Metafield & not the Featured Image. 

[OliviaRae]

I'm happy to try and give it a shot if you provide the code! Or I can give you my URL and passcode if that's easier 🙂

[JHKCreate]

We can lay the ground work here:

1. Install this metafield application
2. Upload a wide banner to your "Files" inside "Settings"->"Files"
3. Copy the File's URL
4. Go to the Metafield App
5. Click on Collection
6. Add a New Metafield (Select String)
7. Paste the URL in the empty field below

Once done please share your store's URL so I can request collaborative access and switch your Collection's Image for the page. Cheers!

[OliviaRae]

Do you know the dimensions for the wide banner?

[JHKCreate]

Try using a 2000x5000 image as a start, make sure it doesn't exceed 150KB

[OliviaRae]

Hello! 

I believe I uploaded the file correctly. 

Once I clicked collections, there was no option to create a metafield unless I chose a collection. So I chose Best Sellers and created a new metafield there (Key - Blank, Namespace - global, value type - string)(Key - collection, namespace - global, value type - string).

my store url: alyasboutique.com

passcode: ShopNow

Collection image url: https://cdn.shopify.com/s/files/1/0436/4949/9297/files/Collection_background_2000x5000.png?v=1601422...

[JHKCreate]

OK Thanks!

Will be sending you a collaborator access shortly to get this done. 

Thanks! 

[JHKCreate · Accepted solution]

All Good!

@OliviaRae please follow the pattern in the image below to fill the header for each collection:

All Good! Cheers!

[OliviaRae]

Hello. 

Thank you for your help! If I want to change the background, how can I do that?

[JHKCreate]

Create the same collection metafield as the image above for every collection that needs it. 

This way you can add a custom background for every collection individually. 

[OliviaRae]

SOS!

This code is not working for one of my collections, Loungewear. Please advise as my website is going live tomorrow!

Thank you in advance!! 🙂 

[JHKCreate]

Hi @OliviaRae !

Two things spring to mind here:

1- Did you type in the Metafield name exactly like the others?

2- What URL are you using for the image?

Let me know,

Cheers!

[OliviaRae]

Thank you for your quick reply!

Yes, it is exactly the same. 

https://cdn.shopify.com/s/files/1/0436/4949/9297/files/Collection_background_2000x5000_light_pink.pn...

I changed the name of the collection from Cozy Sets to Loungewear and after I did that, the background image disappeared. Maybe that messed it up?

[JHKCreate]

Yes this could have knocked the Metafield here if the handle was changed. Delete the Metafield & add it again. 

[OliviaRae]

No success 😞 any other solutions?

[JHKCreate]

Is it a Manual collection vs a Smart Collection? 

Let's have a look, Please share your store's URL so I can can request collaborator access.

Please also share the link of the collection.