How can I adjust the sales badge style in Dawn Theme?

Solved

How can I adjust the sales badge style in Dawn Theme?

senttense
Tourist
8 0 1

How can i change the position from the red badge.
I want that the badge is in 2 lines otherwise its not possible to display the whole text. And it should be directly on top of the product picture not 2mm under it.

 

Anyone advice ?

 

IMG_0980.png

Accepted Solutions (2)
Moeed
Shopify Partner
5886 1599 1901

This is an accepted solution.

Hey @senttense 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
on-sale-badge.badge.badge--on-sale {
    width: 95% !important;
}
}
</style>

RESULT:

Moeed_0-1729700746206.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Moeed
Shopify Partner
5886 1599 1901

This is an accepted solution.

Try searching for it in Edit Default Content by clicking on the 3 dots when you click on Online Store.

 

Best Regards,

Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 9 (9)

kevinkarma55
Shopify Partner
94 10 11

do you have the preview link? 

Please remember to Like & Mark Solution to the post if it helped you.
Thanks !
If you'd like to support me, you can Buy Me a Coffee
Need help with anything related to Frontend?
Checkout kevinkarma.me
senttense
Tourist
8 0 1

https://www.senttense.com/collections/frauendufte-auto-parfum But its only in the Mobile Design the Problem

Moeed
Shopify Partner
5886 1599 1901

This is an accepted solution.

Hey @senttense 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
on-sale-badge.badge.badge--on-sale {
    width: 95% !important;
}
}
</style>

RESULT:

Moeed_0-1729700746206.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


senttense
Tourist
8 0 1

Thank you it works. 🙂

Moeed
Shopify Partner
5886 1599 1901

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


senttense
Tourist
8 0 1

Can you tell me how can i change the Text from

Ersparnis zum Markenduft 85,00€ to

Spare 85,00€

Moeed
Shopify Partner
5886 1599 1901

This is an accepted solution.

Try searching for it in Edit Default Content by clicking on the 3 dots when you click on Online Store.

 

Best Regards,

Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


senttense
Tourist
8 0 1

Hello Mate 🙂

Do you know if its possible to make a second line there. Like a second product title that i can insert different details for each product ?

 

Thanks a lot !
Bildschirmfoto 2024-10-24 um 18.06.13.png

kevinkarma55
Shopify Partner
94 10 11

I recommend following as it considers both a sale badge and another badge like 'sold out' and also some style for the space you mentioned.

<style>
@media screen and (max-width: 767px) {
  .badge {
     width: 100% !important;
  }
  .product-card__figure>.badge-list {
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
  }
}
</style>
Please remember to Like & Mark Solution to the post if it helped you.
Thanks !
If you'd like to support me, you can Buy Me a Coffee
Need help with anything related to Frontend?
Checkout kevinkarma.me