Shopify themes, liquid, logos, and UX
Hi, I want to change the overlay color of the title area on my collection pages, but not change the overlay on the collection grid on the home page.
I was able to accomplish this for the home page overlay with this
div#shopify-section-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
But can't figure out the collection listing page.
I have tried these in theme.css -
div#shopify-section-collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
div#Hero-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
div#collection-hero .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
div#collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
https://fat-beet-farm-kitchen-bakery.myshopify.com/collections/full-meals
password - aurtau
thank you!
Solved! Go to the solution
This is an accepted solution.
yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
.collection-hero__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #416b52;
opacity: .9;
}
please confirm this ok?
Yes, I'll make it green but that's the color overlay i want to change.
This is an accepted solution.
yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
.collection-hero__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #416b52;
opacity: .9;
}
That worked perfectly, thank you!
its my pleasure to help us
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024