Shopify themes, liquid, logos, and UX
Hello,
i.m using the Impulse theme. I want to change my “final sale” menu item to red color. Can someone help me? Thank you
My website: https://azsport.ro
Solved! Go to the solution
This is an accepted solution.
Hi @azsport!
I'd suggest using the following ruleset since it uses an attribute selector for the link's URL:
.site-nav__link[href="/collections/final-sale"] {
color: red;
}
This will ensure that the link color is red regardless of the menu item order.
As mentioned, you can place custom rulesets at the bottom of your theme's stylesheet, which can be found in the Shopify admin under Online Store > Themes > Actions > Edit code > Assets > theme.css
Hope this helps!
Hello @azsport ,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.css-> paste bellow code in bottom of file
.header-item.header-item--split-right li:nth-child(3) a {
color: #ff0000;
}
Thanks
You can check source code to confirm.
This is an accepted solution.
Hi @azsport!
I'd suggest using the following ruleset since it uses an attribute selector for the link's URL:
.site-nav__link[href="/collections/final-sale"] {
color: red;
}
This will ensure that the link color is red regardless of the menu item order.
As mentioned, you can place custom rulesets at the bottom of your theme's stylesheet, which can be found in the Shopify admin under Online Store > Themes > Actions > Edit code > Assets > theme.css
Hope this helps!
Thank you so much! It works on web perfectly!
Do you know if for mobile i have to write something different ? If you know ,tks! 🙂
I actually found a solution for that as well 🙂
You're most welcome, @azsport! I'm glad to hear you got it working on desktop and mobile -- nice job!
Hello Kyle,
I tried your code and it worked great on desktop, but it doesn't seem to apply on mobile. is there a way to apply it there as well?
Thanks,
Alia
Was able to figure out, this is my code now:
.site-nav__link[href="/collections/outlet"] {
color: #D70008!important;
}
.mobile-nav__link[href="/collections/outlet"] {
color: #D70008!important;
}
Not sure if this is the right way to do it though
I'm having similar issue with Prestige theme. Trying to change color of just "Sale" menu item to Red, but can't get it to work with similar code. I have the following:
Website: https://www.vonn.com
.Heading[href="/collections/all-products?special_offers=Sale,Clearance"] {
color: red;
}
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