Sale tag: change shape and colour

Solved
Tourist
13 0 0

Hi all, 

 

I'm using the Impulse Theme.

 

We have already added a little code to change the colours of the 'Sale' and 'Sold Out' tags to greys instead of black and white, but i'd ideally like to have the 'Sale' tag as a circle in red, with white text - whilst keeping the 'Sold Out' tag as it is in greys.

 

The code I can find seems to alter both together. Can anyone help please?

 

My website is www.newgateworld.com

0 Likes

Hello 

Please try this code, add this code in theme.scss.liquid

.grid-product__tag.grid-product__tag--sale {
    border: 2px solid red;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
13 0 0

Thank you, but it has done this...

 

Capture.JPG

0 Likes

If you want to be get it done in this manner sale_tag.jpg

then replace the given code with this new code

.grid-product__tag.grid-product__tag--sale {
    border: 2px solid red;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    background-color: red;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Tourist
13 0 0

That's better! But can it be a circle rather than oval?

 

Thank you so much :-)

0 Likes

Success.

Add this in given css 

    padding: 11px 6px;
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Highlighted
Tourist
13 0 0

PERFECT!! Thanks so much for your help, you're a star :-)

0 Likes