How can I modify the filter option pill shape for a cleaner look?

Solved

How can I modify the filter option pill shape for a cleaner look?

CherylAnne
Visitor
3 0 0

Hello.  I am looking for some help in modifying the style of the of the pill shape when selecting a filter option on both desktop and mobile.  Right now it looks like this when a user selects a filter option:

 

filteroption_og.jpg

 

But I want it to look more simple and clean like this:

filteroption_ex.jpg

 

Is this possible to do?

Accepted Solution (1)
theycallmemakka
Shopify Partner
1788 435 462

This is an accepted solution.

Hi @CherylAnne ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
span.active-facets__button-inner.button.button--tertiary {
    background: transparent;
    border: 0px;
    box-shadow: none;
    padding-left: 0px;
}

a.active-facets__button.active-facets__button--light {
    margin-left: 0px;
    padding-right: 0px;
}
</style>

 

Result:

makkaomakka_0-1699940572781.png

 

If you require further help to optimize your store, please don't hesitate to reach out. 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,
Makka

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 4 (4)

theycallmemakka
Shopify Partner
1788 435 462

Can you provide link to your store?

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

CherylAnne
Visitor
3 0 0

Hi.

 

Here's a link to a draft where I've been playing around with:

 

https://1iy33mtqclf7spjb-46277427353.shopifypreview.com/collections/shop

theycallmemakka
Shopify Partner
1788 435 462

This is an accepted solution.

Hi @CherylAnne ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
span.active-facets__button-inner.button.button--tertiary {
    background: transparent;
    border: 0px;
    box-shadow: none;
    padding-left: 0px;
}

a.active-facets__button.active-facets__button--light {
    margin-left: 0px;
    padding-right: 0px;
}
</style>

 

Result:

makkaomakka_0-1699940572781.png

 

If you require further help to optimize your store, please don't hesitate to reach out. 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,
Makka

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

CherylAnne
Visitor
3 0 0

This worked!

 

Thank you so much for all your help. It is greatly appreciated.