I need help changing my sale badge and the text in it (Debut) theme

Highlighted
Tourist
6 0 1

Hello guys first post so hope this works. I started working on my website a few weeks ago and my sale box is red and the text inside of it is invisible unless i drag my mouse over it and mark the box then I can see it. Would like to change the box to a circle and then change the text inside of it from försäljning (Sale in Swedish) to REA (also sale in Swedish). This is how it looks now:

 shopifyhelp.pngshopifyhelp2.pngAll help is greatly appriciated, thank you in advance. :)

0 Likes
Highlighted

Can you provide a link to the site? This will allow one to provide a precise solution. 

ScreenStaring
Software Development & Consulting
0 Likes
Highlighted
Tourist
6 0 1

uvstockholm.com password to the website is kruffo

0 Likes
Highlighted

Hi, password does not work. May be best to just message me with it directly if you still want me to have a look.

ScreenStaring
Software Development & Consulting
0 Likes
Highlighted

The Debut theme changes the text of your sale label to match the site's background. Currently your background is set to none, so the text cannot be seen. To change this go to your theme's settings and select Theme settings -> Colors -> Page -> Background. Here you can select the desired label text/background color:

 

background.png

 

Changing the label to a circle containing REA is possible but when the product is sold out, the theme will display Slutsåld which will not fit into the same sized circle. Given this, do you still want the circle for REA only or a circle for REA & Slutsåld (which may be more of an oval or rectangle with rounded corners)? 

 

 
 
 
 
ScreenStaring
Software Development & Consulting
0 Likes
Highlighted
Tourist
6 0 1

Thank you for your information man I appriciate it alot!! Since I am dropshipping the item won't get sold out and if it does somehow I will work on that when it does so yes I'd still like the circle with REA if possible. Thank you my man!!!

0 Likes
Highlighted

 Trying adding these to the existing code in theme.scss.liquid.

 

The existing code should not be removed. It looks like this:

.price__badge--sale {
  color: $color-bg;
  border-color: $color-sale-text;
  background-color: $color-sale-text;

  .price--on-sale & {
    display: flex;
  }

  .price--sold-out & {
    display: none;
  }
}

Add one of the following after:

background-color: $color-sale-text;

 

.price__badge--sale {
    width: 40px;
    height: 20px;
    border-radius: 50%;
}

.price__badge--sale {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    align-items: center;
    padding-left: 4px;
}

They both do what you asked for just with different looks.

ScreenStaring
Software Development & Consulting
0 Likes
Highlighted
Tourist
6 0 1

and how do I change the text from försäljning to REA? 

0 Likes
Highlighted

Checkout the Language Editor in the Shopify admin. 

ScreenStaring
Software Development & Consulting
0 Likes
Highlighted

Hey @ScreenStaring

I recently launched an app on Shopify which allows you to apply labels on your products without the need for any code.

You can use labels such as trending, bestseller, sale, new, etc on your product images using this app. Labels would help you highlight certain products and let your customers choose products quicker.

We also have labels for various sales sickers that you can apply to your products including circle ones
If you want, I can add your custom swedish label to our collection and you can start using them on your products without any coding involved and remove whenever you want. You can also choose to apply a variety of other labels to your products based on your need.

SS1.png


Do try it out and share your feedback!
App Link: CLICK HERE TO INSTALL

Cheers, and wish you all the best! 

Vignesh
ModeMagic

If you found this helpful then please Like and Accept Solution
Install ModeMagic - Product Labels & Badges for your store
Featured on Shopify App Store
0 Likes