What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How do I get my "Sale" Section Red?

How to make my 'Sale' label red on the Supply theme?

HipHackSales
Visitor
2 0 0

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!Screen Shot 2019-06-18 at 3.17.56 PM.png

Replies 16 (16)

Jasoliya
Shopify Partner
4823 625 1225

Send your store url so i can check and give exact solution. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
HipHackSales
Visitor
2 0 0

Hi Jasoliya, 

 

Thanks for your response! my url is https://hiphacksales.com/ the password to enter the site is "12345" 

Jasoliya
Shopify Partner
4823 625 1225

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;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Griffincote
Tourist
7 0 1

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

Jasoliya
Shopify Partner
4823 625 1225

Send me your store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Griffincote
Tourist
7 0 1
Jasoliya
Shopify Partner
4823 625 1225

For mobile menu its different code.

find same thing on Snippet->mobile-nav.liquid and implement it on this file. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Griffincote
Tourist
7 0 1

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?

Griffincote
Tourist
7 0 1

Just figured it out.

Thanks for your help 

ilindsey
Visitor
2 0 0

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.

 

Here the link to the site.

Jasoliya
Shopify Partner
4823 625 1225

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;  }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
salmansillc
New Member
9 0 0

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/

Jasoliya
Shopify Partner
4823 625 1225

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; }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
salmansillc
New Member
9 0 0

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/

 

Jasoliya
Shopify Partner
4823 625 1225

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; }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
salmansillc
New Member
9 0 0

Thank you so much! But I want my On sale button to be placed after Home, So where should I paste the link?