Solved

Metafield Badge Styling - Prestige Theme by Maestrooo

mcw123
Visitor
3 0 0

I am looking for assistance in changing the colors of the badges in my theme to match my brand colors. I have followed the directions here and the badge functionality is working with no problem; it's only the coloring that I need help with.

 

I have in place a metafield named "product.metafields.custom.badges" that accepts single line text and has 4 possible values: "Best Seller", "Organic", "Fair Trade" and "Rain Forest Alliance".

 

I am looking for the proper code to add to OnlineStore>Theme>EditCode>Asset>theme.css that will allow me to style each of these badges individually across the entire site.

 

This is an image of the badges

Screenshot 2024-02-07 at 11.55.03 PM.png


Thank You Kindly,

Craig

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1049 271 214

This is an accepted solution.

Hey @mcw123,

 

If you want to add it in theme.css, you can do that too. (exclude the <style></style> tags)

I tend not to recommend that method because some themes have base.css, some have theme.css, some have styles.css and I can't predict who has what file.

 

Or you can follow these instructions as well

 

The 4 badges can be identified at the last part of each class
"--organic"

"--best-seller"

"--fair-trade"

"--rain-forest-alliance"

Change the colours as you like. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
span.badge.badge--custom.badge--organic {
    background-color: #c35422;
    color: #f9efe3;
}

span.badge.badge--custom.badge--best-seller {
    background-color: #c35422;
    color: #f9efe3;
}

span.badge.badge--custom.badge--fair-trade {
    background-color: #c35422;
    color: #f9efe3;
}

span.badge.badge--custom.badge--rain-forest-alliance {
    background-color: #c35422;
    color: #f9efe3;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707348909971.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
1049 271 214

Hey @mcw123,

 

Can I have the link to your store? Preview link if the theme is not published and the store password (if one is set)

 

Also, include some details of what you want to change

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
mcw123
Visitor
3 0 0

hi @ThePrimeWeb 

 

the site is under construction, password 'mega-shrimp'
https://heydaycoffee.co/

 

as for detail, in the photo above i would want to change the "Best Seller" badge to have background color #c35244 and text color #f9efe3 - if i could do that, i would be able to modify the code to adjust the other badges as well

thank you for any help you could give

ThePrimeWeb
Shopify Partner
1049 271 214

This is an accepted solution.

Hey @mcw123,

 

If you want to add it in theme.css, you can do that too. (exclude the <style></style> tags)

I tend not to recommend that method because some themes have base.css, some have theme.css, some have styles.css and I can't predict who has what file.

 

Or you can follow these instructions as well

 

The 4 badges can be identified at the last part of each class
"--organic"

"--best-seller"

"--fair-trade"

"--rain-forest-alliance"

Change the colours as you like. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
span.badge.badge--custom.badge--organic {
    background-color: #c35422;
    color: #f9efe3;
}

span.badge.badge--custom.badge--best-seller {
    background-color: #c35422;
    color: #f9efe3;
}

span.badge.badge--custom.badge--fair-trade {
    background-color: #c35422;
    color: #f9efe3;
}

span.badge.badge--custom.badge--rain-forest-alliance {
    background-color: #c35422;
    color: #f9efe3;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707348909971.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
mcw123
Visitor
3 0 0

Thank you very much, marking this as the solution.

 

As a note for anyone searching for the same answer, both the 'theme.liquid' and 'theme.css' options worked for the Prestige theme version 9.0.2.