Solved

CHANGE SALE BADGE FROM CIRCLE ONE TO SQUARE ONE

PeppePro02
Excursionist
29 0 1

circle oe.pngScreenshot 2024-03-10 164124.png

Hi i would like to change sale shape from circle one to square on like the picture , with blue color . Dawn theme , i send the website

R&D GADGETS MALTA : Online Shopping For Electronic Products Malta (rdmalta.com)

Accepted Solutions (2)
techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .badge {
     border:3px solid #2a50db !important;
     background-color:#0000ff !important;
  }
</style>

techlyser_web_0-1710148059880.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .badge {
     font-size: 16px !important;
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 10 (10)

techlyser_web
Shopify Partner
1423 268 282

Hello @PeppePro02 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .badge{
      border-radius: unset !important;
   }
</style>

techlyser_web_0-1710085999013.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

 

Do you want the font color to be blue or the background color to be blue?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
PeppePro02
Excursionist
29 0 1

Hi thank you for your reply , works but still i want to increase the thickness of the border and fill the inside with blue color . 

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .badge {
     border:3px solid #2a50db !important;
     background-color:#0000ff !important;
  }
</style>

techlyser_web_0-1710148059880.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
PeppePro02
Excursionist
29 0 1

Hi works thank you ! Do you have any code for change also the font and color of the word inside of the badge?

techlyser_web
Shopify Partner
1423 268 282

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .badge {
     color: #fff !important;
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
PeppePro02
Excursionist
29 0 1

Thank you it works! Last thing can be incresed the size of the font also , i mean SAVE $? As only change the color of it  this code. Last help please

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .badge {
     font-size: 16px !important;
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
PeppePro02
Excursionist
29 0 1

Thank you works!

techlyser_web
Shopify Partner
1423 268 282

Welcome @PeppePro02  😁
Was my reply helpful? Click Like to let me know!

Thanks

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

PageFly-Henry
Astronaut
986 283 230

Hi @PeppePro02 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.card__content .badge {

    border-radius: unset !important;

    background: #00a1ff !important;

    color: white !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.