Update "Best Seller" tag buttons - Broadcast Theme

Solved

Update "Best Seller" tag buttons - Broadcast Theme

jzcreativespace
Shopify Partner
12 0 2

Hi! I would like to update the "Best Seller" tags on my products to be normal sentence case rather than all uppercase. Also, if possible, how to make them "pill" style buttons without changing the style of buttons throughout the rest of the site. I am using the Broadcast Theme in style Clean. I attached a photo of how the tags look as of now vs. how I would like them to look. Any help is appreciated!

 

Screenshot 2024-06-25 at 11.23.23 PM.pngunnamed.jpg

 

Accepted Solution (1)
Rahul_dhiman
Shopify Expert
204 40 37

This is an accepted solution.

Hello @jzcreativespace 
Go to online store ---------> themes --------------> actions ------> edit code-------> base.css
and add this code at the very end of your file.

span.badge-box.aos-animate {
    text-transform: capitalize;
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 25px;
    background-color: #dd0f8d45;
    color: #212121;
    font-size: 1em;
    text-align: center;
}

and the result will be
1.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 5 (5)

BSSCommerce-TA
Shopify Expert
123 24 24

Hi

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Rahul_dhiman
Shopify Expert
204 40 37

This is an accepted solution.

Hello @jzcreativespace 
Go to online store ---------> themes --------------> actions ------> edit code-------> base.css
and add this code at the very end of your file.

span.badge-box.aos-animate {
    text-transform: capitalize;
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 25px;
    background-color: #dd0f8d45;
    color: #212121;
    font-size: 1em;
    text-align: center;
}

and the result will be
1.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
jzcreativespace
Shopify Partner
12 0 2

This worked great, thanks so much!

Rahul_dhiman
Shopify Expert
204 40 37

Thanks a lot....!!!  Have a nice day.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

Dan-From-Ryviu
Shopify Partner
8383 1650 1663

Hi @jzcreativespace 

Could you share your store URL so I can check?

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.