Sale tag: change shape and colour

Solved
AnnaMay
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
AnnaMay
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
AnnaMay
Tourist
13 0 0

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

 

Thank you so much :-)

0 Likes

This is an accepted solution.

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
AnnaMay
Tourist
13 0 0

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

0 Likes
Fayzmo
Shopify Partner
222 17 84

Hey @AnnaMay ,

I'm new to the Shopify community, and I came across your question on adding Sale/Sold Out badges in your product catalogs. We have developed an app (
Modemagic) that will allow you to add product stickers/badges on your catalog within seconds. Check out this app on Shopify here.

We have an extensive collection of stickers/badges suiting to any need. No complex edits, no back & forth with designers. Update your store within a few minutes! 

Screenshot 2020-06-10 at 3.43.07 PM.pngScreenshot 2020-06-10 at 3.43.29 PM.pngScreenshot 2020-06-10 at 3.45.50 PM.png

Don’t find a sticker that meets your need, reach out to us on chat for a custom design! We also create stickers in various languages.

 

Hope this helps :) Do let me know if you need any help.

Fayaz

ModeMagic
Featured on Shopify Staff Picks
0 Likes
khalildesigner
Tourist
5 0 0

Hi, how can I do this exact same thing for the Shopify Narrative Theme?

I want to change the sale Triangle to a Black "circle" instead of a triangle! please help thanks

0 Likes

Hello khalildesigner,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

span.card__badge {
    right: 0px;
    top: 0px;
    font-size: 1.5rem;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding-top: 25px;
}
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit