Shopify themes, liquid, logos, and UX
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:
But I want it to look more simple and clean like this:
Is this possible to do?
Solved! Go to the solution
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:
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
Can you provide link to your store?
Hi.
Here's a link to a draft where I've been playing around with:
https://1iy33mtqclf7spjb-46277427353.shopifypreview.com/collections/shop
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:
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
This worked!
Thank you so much for all your help. It is greatly appreciated.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025