How to make 'Sale' button plain text

Solved

How to make 'Sale' button plain text

jewellerystore1
Explorer
97 0 8

Hello, 

 

I would like my 'Sale' icons on the image to look like this simple black text with no background oval:

Screen Shot 2024-06-21 at 1.07.46 pm.png

 

Currently it looks like this:

 

Screen Shot 2024-06-21 at 1.08.28 pm.png

 

Website: https://nuijewellery.com.au/collections/ready-to-ship

Theme: Exhibit

 

Thank you!

 

 

Accepted Solution (1)

LuffyOnePiece
Shopify Partner
612 88 107

This is an accepted solution.

Hi @jewellerystore1 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
div#facets-filterable ul.grid span.rounded-button.bg-scheme-accent.text-scheme-accent-contrast.px-2 {
    background: none;
    color: #000;
}
</style>

 

Please don't hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 6 (6)

LuffyOnePiece
Shopify Partner
612 88 107

This is an accepted solution.

Hi @jewellerystore1 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
div#facets-filterable ul.grid span.rounded-button.bg-scheme-accent.text-scheme-accent-contrast.px-2 {
    background: none;
    color: #000;
}
</style>

 

Please don't hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
jewellerystore1
Explorer
97 0 8

Thanks so much!

Dan-From-Ryviu
Shopify Partner
8572 1690 1701

Hi @jewellerystore1 

You can use this code to do that

<style>
.tile-media-wrapper .absolute .rounded-button {
background: transparent;
color: #252525;
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSSCommerce-B2B
Shopify Partner
565 114 137

Hi @jewellerystore1 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.bundle.css. Add the following CSS snippet

.rounded-button {
    background: transparent !important;
    color: #000 !important;
}

Result

BSSCommerceB2B_0-1718944259157.png

If it helps you, please like and mark it as the solution.

Best Regards

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency
CWDesign_Studio
Shopify Partner
5 0 0

<style>
.text-scheme-accent-contrast .bg-scheme-accent .rounded-button {
background-color: unset;
color: #000;
}
</style>

 

Screenshot12.png

 


Need a hand getting your store just right? Let us know!
We appreciate a thumbs up if this helped,
and feel free to mark it "Solved" if you're good to go!

Best Regards,
CWDesign_Studio


Need help with your store? mahbubhasanuap@gmail.com
For quick response, Contact In WhatsApp +880 1997703394

 

CWDesign_Studio
Shopify Partner
5 0 0
<style>
.text-scheme-accent-contrast .bg-scheme-accent .rounded-button {
background-color: unset;
color: #000;
}
</style>

 

Screenshot12.png


Need a hand getting your store just right? Let us know!
We appreciate a thumbs up if this helped,
and feel free to mark it "Solved" if you're good to go!

Best Regards,
CWDesign_Studio


Need help with your store? mahbubhasanuap@gmail.com
For quick response, Contact In WhatsApp +880 1997703394