Shopify themes, liquid, logos, and UX
How would I go about adding a border Around "Sort By" on product list page?
Password01
Something like these:
Please add the below code in theme.liquid above </body>
<style>
.facet-filters__field {
border: 1px solid!important;
padding: 5px!important;
}
</style>
Result:
If it will be work for you then please tap on like button and accept it.
Thank you
Hi Brian,
You can add this:
.facet-filters__sort {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: 1rem;
}
to your component-facets.css file inside your Dawn theme (in the assets folder) and it will give you an outline like this:
You might also want to remove the grey background behind, in which case you can search inside the component-facets.css file for the code below and remove the background-color line:
@media screen and (min-width: 750px) {
.facets-vertical-form {
display: flex;
justify-content: flex-end;
background-color: #f6f6f4;
}
}
Which will give you a result like this:
HI @Brian-A
form#FacetSortForm > div {
border: 1px solid black;
padding: 2px !important;
border-radius: 6px !important;
}
I hope this helps
Best,
Daisy
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