Shopify themes, liquid, logos, and UX
Hello,
I was wondering if anyone could help me with coding as well as the steps to get my sale label to show up individually red?
In the custom section, there is only an option to change the colour of all the menu labels.
I use the theme Supply theme for my website (which is currently not published to the public).
I have attached a photo of my website for reference. Thanks!
Send your store url so i can check and give exact solution.
Hi Jasoliya,
Thanks for your response! my url is https://hiphacksales.com/ the password to enter the site is "12345"
For that you have knowledge of liquid code, because we have to do this by some logic as you just ant to change color of "Sale" menu color and this menu generating by loop so its same for all, but follow this:
1. Snippet->site-nav.liquid-> find <li{% if link.active %} class="site-nav--active"{% endif %}> and add bellow condition in <a> next to this line.
You have to add class like this
class="site-nav--link{% if link.title contains 'SALE' %} red_clr{% endif %}"
2. Asset->theme.scss-> add bellow code in bottom of file.
.red_clr {color:red !important;}
For some reason it works on the website display on my computer but not on my mobile device.
What would be the cause of that? Is there a different code I need to add this feature on my mobile website display?
Please let me know.
Thanks
Send me your store url
For mobile menu its different code.
find same thing on Snippet->mobile-nav.liquid and implement it on this file.
the same code doesn't seem to be working.
Where should I insert this code? Is it the same code that is already attached in this thread?
Just figured it out.
Thanks for your help
I am trying to do the same thing. I want the word 'Clearance' to be #a3140b, but I am not sure how to do it.
Hi @ilindsey
Follow this:1. Go to Online Store->Theme->Edit code
2. Asset->theme.css->paste bellow code in bottom of file
.site-navigation li:last-child a { color: #a3140b; }
I want my On sale button to be placed after Home, So where should I paste the link? and also I want to display it on mobile as well. My store link is: https://oliverandsmith.com/
For that you have to chnage menu postion from "admin/online store/ navigation/ main menu/
then need to add new code and remove old code from css file you added
add new one:
.header__link-list li:nth-child(2) a { color: red; }
This code for mobile view:
.panel__scroller ul li:nth-child(2) a { color: red; }
I need the same solution like the On sale button in red. Should I follow the same instructions? My store link is: https://oliverandsmith.com/
Hi @salmansillc
Follow this
1. Go to Online Store->Theme->Edit code
2. Asset->theme.css-> paste bellow code in bottom of file
.header__link-list li:last-child a { color: red; }
Thank you so much! But I want my On sale button to be placed after Home, So where should I paste the link?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024