How to edit sold out and on sale badge?

[KimGottwald]

Does someone know how to change the design of the sold out and sale badge?

I would like to make the sold out badge not as rounded and more angular + to the color black (background) and white text.

And is there a way to remove the Sale badge?

Thank you!

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/collections/rappid-test?sort_by=price-descen...

Im using the Trade theme.

Picture: 

 o 

[Made4uo-Ribe · Accepted solution]

Hi @KimGottwald 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

/* sold-out badge */
.badge--bottom-left.color-scheme-3 {
    border-radius: 10px !important;
    background: black;
    color: white;
}
/* sale badge */
.badge--bottom-left.color-scheme-5 {
    display: none;
}

• And Save. 
• Result:
• 

  I add some note so you wont confuse. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[KimGottwald]

Thank you, is it also possible to move the sold out badge to the top left?

And to do exactly the same with the bade on product page?

 

[HELDERWRLD]

Hello @Made4uo-Ribe 
How can i change my sale badge to look like this example? Same position and everything. If possible i would like to learn how to create a new badge also for "25%" for example.

Please and thank you.

www.diversusoficial.com

[Made4uo-Ribe]

Hi @HELDERWRLD 

I cant see your sale badge in your store. The percent discount can be done by custom coding. Let us know if your interested. Thanks!

[HELDERWRLD]

Please check here: https://diversusoficial.com/collections/mens-swimwear

[Made4uo-Ribe]

Thanks for the info, try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.card__badge:has(.badge.badge--bottom-left.color-accent-2) {
    align-self: start;
    grid-row-start: 1;
    justify-self: end;
}

.badge.badge--bottom-left.color-accent-2 {
    border: none;
}

• And Save.
• Result:
  

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[HELDERWRLD]

Thank you so much @Made4uo-Ribe , it worked perfectly. You the best!!

Do you also know how i can change the colour to black and remove the grey background and leave just the text?

Also, how can i create a similar badge for example for the percentage in the bottom left?

[Made4uo-Ribe]

Add this code. 

.badge.badge--bottom-left.color-accent-2 {
    background: transparent;
    color: black;
}

And Save.

To create another percentage badge. It needs a custom code. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[HELDERWRLD]

Thank you so much, i worked.

Do you know how i can do the same style for the sold out badge on the bottom? With the freedom to change the colour, size and position please and also remove the background.

[Made4uo-Ribe]

This is for the sold-out. You can change the whatever you like. For the position, since this is not dynamic it needs to be fixed position. 

Add the code below. 

.badge.badge--bottom-left.color-inverse {
    background: transparent;
    border: none;
    font-size: 16px;
    color: red;
}

And Save. 

result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[HELDERWRLD]

Thank you, it worked!

Thank you for everything!

[HELDERWRLD]

Hello again @Made4uo-Ribe sorry for bothering you.

I learnt how to create quick badges and i would like to know if you can help me fix the positioning.

The badges i am creating are made for the bottom left, but i already have a "sold out" badge on the bottom left. I would like to know if it's possible to put the sold out badge on the top left and to put these new badges i am creating on the middle and also have the possibility to change the style (e.g. colour, size, remove background) like the one you helped me a few hours ago.

How it is:

 

You can see here: https://diversusoficial.com/collections/mens-ready-to-wear

Please and thank you for your help.

[HELDERWRLD]

Hello @Made4uo-Ribe 

Can you help me please?

[HELDERWRLD]

Can anyone help me please?

[HELDERWRLD]

Hello @Made4uo-Ribe 
Can you help me please?

[Made4uo-Ribe]

Hi @HELDERWRLD 

Do you mean like this? 

If it is, try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.card__badge.bottom.left .badge.badge--bottom-left.color-inverse {
    position:absolute;
    top: 10px;
}

.card__badge.bottom.left span.badge:not(.badge.badge--bottom-left.color-inverse) {
    position:absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 20px;
}

• And Save.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[HELDERWRLD]

Hi @Made4uo-Ribe 

Thank you so much. It worked.

And how can i change the style of the middle down badges (e.g. colour, size, remove background)?

I want to remove the white background, see if Bold looks good and also change size and colour of text if needed. For mobile and Desktop.

Thank you in advance.

[Made4uo-Ribe]

Use this one. 

And change according to your preference. 

.card__badge.bottom.left span.badge:not(.badge.badge--bottom-left.color-inverse) {
    background: transparent;
    color: red;
    font-size: 10px;
    font-weight: 900;
    border: 0;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[HELDERWRLD]

Thank you so much @Made4uo-Ribe 

Worked perfectly.

[Made4uo-Ribe]

@HELDERWRLD 

Good to know, at last. Would you mind hitting the thumbs up for me? Thanks! Happy New Year!