How to change a Badge price color?

[NiceyGin]

Hello guys, i have this problem: I have to change the color of the badge and the discounted price from RED to this one #b09035 (see attached). please help me.

[rajweb]

Hey @NiceyGin ,

Could you share your store URL so I can check?

[NiceyGin]

https://www.niceygin.shop/products/nicey-gin?variant=49184082755852

[Tech_Coding]

Hello @NiceyGin 

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[rajweb]

To change the color of the badge and the discounted price in your Shopify store, you can do this by editing your theme's CSS

Follow these steps:

1. Online Store > Themes > Edit Code

In the Assets folder, look for a file named theme.scss.liquid, style.scss.liquid, or similar. Open this file

Scroll to the bottom of the CSS file and add the following code:

/* Change badge color */
.badge {
    background-color: #b09035 !important; /* Adjust the badge color */
}

/* Change discounted price color */
.price .discounted {
    color: #b09035 !important; /* Adjust the discounted price color */
}

Note: The specific class names (.badge and  .price.discounted) might vary based on your theme. You can inspect the elements using your browser's developer tools to find the exact class names if needed.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[NiceyGin]

I don't have any of those files inside the asset folder. The options are:

in Layout folder: theme.liquid

in Asset folder: theme-editor.js

in snippets folder: theme-variables.liquid

[rajweb]

@NiceyGin ,

You can still make the color changes using either the  theme.liquid file or the theme.variables.liquid file. Here's how you can do it:

Using theme.liquid

Edit theme.liquid:

Open the theme.liquid  file in the Layout folder.

Scroll to the bottom of the file, just before the closing </head> tag.

Add the following CSS:

<style>
    /* Change badge color */
    .badge {
        background-color: #b09035 !important; /* Adjust the badge color */
    }

    /* Change discounted price color */
    .price .discounted {
        color: #b09035 !important; /* Adjust the discounted price color */
    }
</style>

Using theme.variables.liquid

If your theme uses  theme.variables.liquid  for variables, you can add custom CSS there as well:

<style>
    /* Change badge color */
    .badge {
        background-color: #b09035 !important; /* Adjust the badge color */
    }

    /* Change discounted price color */
    .price .discounted {
        color: #b09035 !important; /* Adjust the discounted price color */
    }
</style>

If the class names .badge  and  .price .discounted do not work, you may need to inspect the elements on your store to find the correct classes or IDs associated with the badge and discounted price. If you need help with that, let me know!

[NiceyGin]

It doesn't work 😞

[rajweb]

 Could you please send me a message via email so we can discuss this further?

Thanks

[DaviesYoung]

You could give this a try,
Default product > Product information > Custom CSS:

.price-item--sale {
  color: #b09035;
}
.price__badge-sale {
  background-color: #b09035;
}

My two cents. Good luck.

[Rahul_dhiman]

Hello @NiceyGin 

Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-price.css
add this code at the end of the file.

span.badge.price__badge-sale.sale {
background: #b09035 !important;
}
span.price-item.price-item--sale.price-item--last {
color: #b09035 !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[NiceyGin]

Almost done.... It has changed only the badge 🤦🏻‍♂️

[ZestardTech]

Hello @NiceyGin 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the top of the file:

.badge.price__badge-sale.color-accent-2 {
background-color: #b09035;
color: #fff;
}

[NiceyGin]

It doesn't work

[Rahul_dhiman]

Try this code
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-price.css
add this code at the end of the file.

span.badge.price__badge-sale.sale {
background: #b09035 !important;
}
.price-item--sale {
color: #b09035 !important;
}

thanks

[Amanda_Fordeer]

Hi @NiceyGin, You can change the price and badge color using Product Labels & Badges. Check out the example below.