How to use metafield for collection header background?

Store Design
, ,
1

I am using the Upscale theme, which has a customizable Collection header template, with a layout option called “Fixed width with soft background.” This soft background is just a color, with variable opacity in the theme editor.

My goal is to modify the existing code for this “soft background”, so that when it is selected, a background image is shown instead of a color. I have added the following code to the custom CSS box for Collection header:

.color-soft-background {
  background-image: url(myimagefile.jpg) !important;
  background-repeat: repeat-y;
  background-size: 100%;
}

This works beautifully, but the problem is I want each different collection page to show a different header image. I have set up a collection metafield for this, but I’m not a great coder, and I have no idea how to incorporate a metafield into the above code.

My first instinct was to try something like this:

.color-soft-background {
  background-image: url({{ collection.metafields.custom.collection_header_image }}) !important;
  background-repeat: repeat-y;
  background-size: 100%;
}

…but that didn’t work.

Any advice?

2

@C_H

hello,

Please tell us, which type of metafield created by you for collection background?

send me the store URL and screenshots where to created the metafield for collection?

3

I created the metafield via Settings>Custom data>Collections, and it’s an image metafield (collection.metafields.custom.collection_header_image).

And I don’t understand what you’re asking me to take a screen shot of, I’m sorry. In case you mean a screen shot of the collection header, I’ll attach that. You can see the pattern behind the block—that is what I want to be a metafield image.

CollectionHeaderSS.jpg
CollectionHeaderSS.jpg1155×521 81.3 KB

My store is password protected right now.

4

please give me the page URL and store password.