Different Collection Image on Home Page and Collection Page

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!

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.

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 :slightly_smiling_face:

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!

Do you know the dimensions for the wide banner?

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

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=1601422797

OK Thanks!

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

Thanks!

1 Like

All Good!

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

All Good! Cheers!

Hello.

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

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.

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!! :slightly_smiling_face:

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!

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.png?v=1601663815

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?

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

No success :disappointed_face: any other solutions?

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.