Metafield Badge Styling - Prestige Theme by Maestrooo

mcw123 · ‎02-07-2024

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

Thank You Kindly,

Craig

ThePrimeWeb · ‎02-07-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-07-2024

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@theprimeweb.com or check out the website
Check out our interview with Shopify!

mcw123 · ‎02-07-2024

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 · ‎02-07-2024

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.

Was I helpful?