Can't add my header code to collection pages

Shopify Discussion
1

were should i put this code in order for it to appear on my collection pages aswell? For now i have pasted in : theme.liquid I’ve also tried adding it in basecss but then the transparent header appear that way on all pages which is also wrong. i would like it to be on my collection pages and home page. any suggestions?

website:

https://valerci.com/

Using dawn theme

Code:

{% if template contains 'index' %} .header-wrapper.gradient { background: transparent; transition: background 0.3s ease; /* Add transition effect */ } .scrolled-past-header .header-wrapper.gradient { background: #191919!important; } #MainContent { margin-top: -96px!important; } {% endif %}
2

That’s CSS coding. It should go in your theme’s main CSS template, rather than in the collection.liquid or theme.liquid.

Look for a file within the “assets” section called “main.css” or “theme.css” – it should have a couple thousand lines of code. Add your coding to the bottom, but without the ‘style’ or ‘if’ statements:

.header-wrapper.gradient {
background: transparent;
transition: background 0.3s ease; /* Add transition effect */
}

.scrolled-past-header .header-wrapper.gradient {
background: #191919!important;
}

#MainContent {
margin-top: -96px!important;
}

Alternatively, you could add it directly to the theme editor. Admin > Online Store > Themes > Customize > Settings > Custom CSS > paste the above code > save changes.

3

Hi, i do not find main.css or theme.css Only css map i find with thousend of pages is Base.css and when i add the code there its getting added to all of my pages, and i only want it to home page and my collection pages

4

The Base.css file would be what you’d want to work with.

However, if you’re only trying to have the CSS apply to specific pages then you would have to edit your theme’s coding, and then the CSS coding that you’re adding.

Best I could do is link you to this thread, where others have discussed the issue: https://community.shopify.com/c/shopify-design/css-for-a-specific-page/td-p/689112

If you’re struggling with this, then you should probably hire a custom coder, so that they can do it correctly for you. I’d recommend working with HeyCarson.com.