Border Around "Sort By" on collection product list page - Dawn

Border Around "Sort By" on collection product list page - Dawn

Brian-A
Explorer
90 0 19

How would I go about adding a border Around "Sort By" on product list page?

 

www.extremekool.com

Password01

 

Something like these:

222Capture.PNG

333Capture.PNG

Replies 3 (3)

shreyhweb
Shopify Partner
714 118 133

Please add the below code in theme.liquid above </body>

 

<style>
.facet-filters__field {
    border: 1px solid!important;
    padding: 5px!important;
}
</style>

 

Result:

shreyhweb_0-1736876625285.png

 

If it will be work for you then please tap on like button and accept it.

Thank you

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

ellethecoder
Shopify Partner
9 0 1

 

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:

 

Screenshot 2025-01-14 184821.png

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:

 

Screenshot 2025-01-14 184807.png

Elle the Coder | Need a developer? I know Shopify inside out – let's make it work the way you want! ellethecoder@gmail.com

If this resolved your issue, please consider giving it a Like or marking it as the Accepted Solution! ☺

DaisyVo
Shopify Partner
3605 402 484

HI @Brian-A 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

form#FacetSortForm > div {
    border: 1px solid black;
    padding: 2px !important;
    border-radius: 6px !important;
}

 

Here is the result: image_720.png

 

I hope this helps

 

Best,

 

Daisy

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution