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;
}
I want to do the same in SENSE theme but the
.site-nav__link[href="/collections/special-offers"] {
color: color: #D70008!important;
}
did not work for me. I don't know if i'm doing it worng or it's some other issue?
Thank you
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024