Update "Best Seller" tag buttons - Broadcast Theme

Solved

Update "Best Seller" tag buttons - Broadcast Theme

jzcreativespace
Shopify Partner
15 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 Partner
763 145 157

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

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

View solution in original post

Replies 5 (5)

BSSCommerce-TA
Shopify Partner
124 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 Partner
763 145 157

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

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

jzcreativespace
Shopify Partner
15 0 2

This worked great, thanks so much!

Rahul_dhiman
Shopify Partner
763 145 157

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

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

Dan-From-Ryviu
Shopify Partner
11332 2222 2391

Hi @jzcreativespace 

Could you share your store URL so I can check?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.