How can I change the filter background color in Sense 2.0 theme?

Store Design
,
1

Hi to all, i’m using sense 2.0 theme.

I would like to know how to change background color of the filter you can see on the image down here

How do i?

#f0b997 color to use

Immagine.png
Immagine.png1366×768 76.7 KB

2

Hi @clavilla57

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

3

www.danicoffeeshop.com

4

Hi @clavilla57 Please add this code in theme.css/base.css/index.css whichever is available in your theme.

.facets-container {
    background-color: #f0b997 !important;
}

If you are not sure where is your theme.css/base.css/index.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css in the code in left hand side.
  6. Add the code at the bottom of the theme.css/base.css/index.css which ever is available in your theme.

Result:

sahilsharma9515_0-1700739553017.png
sahilsharma9515_0-1700739553017.png555×838 46.6 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

5

Hello @clavilla57 ,

As per my understanding you are looking to add background colour in filter options.

Please add the below mentioned code for implementing the background colour similar to screenshot https://prnt.sc/2wO8kTsyP7xH

Steps -:

  1. Go to Online Store → Themes-> Click on Three dots → Edit code.

  2. Search for the theme.liquid file and open it.

  3. Now, add the below mentioned code at the bottom of the before tag.

div#FacetsWrapperDesktop { background-color: #f0b997; }
  1. Save

I hope it helps you.

Please let me know if you have any query or need any assistance.

Thank you.

6

Is it possible to have main filter category of one color and subcategory (the hide ones) of another?

7

Hi @clavilla57 Yes it is possible, Please add this code in theme.css/base.css/index.css whichever is available in your theme.

details#Details-1-template--15983866413247__main-collection-product-grid {
    background-color: #f0b997 !important;
}
details#Details-2-template--15983866413247__main-collection-product-grid details#Details-3-template--15983866413247__main-collection-product-grid details#Details-4-template--15983866413247__main-collection-product-grid details#Details-5-template--15983866413247__main-collection-product-grid {
    background-color: blue !important;
}

If you are not sure where is your theme.css/base.css/index.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css in the code in left hand side.
  6. Add the code at the bottom of the theme.css/base.css/index.css which ever is available in your theme.

Result:

sahilsharma9515_0-1700741966934.png
sahilsharma9515_0-1700741966934.png538×802 20 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

8

unfotunely doesn’t work as intended with this method

9

Hello @clavilla57 ,

I understand you are looking to add different background colours in your main or sub filter options.

Please add the below mentioned code at the bottom of the theme.liquid file before tag.

summary.facets__summary.caption-large.focus-offset { background-color: #f0b997; } fieldset.facets-wrap.parent-wrap.facets-wrap-vertical { background-color: aliceblue; } div#Facet-3-template--15983866413247__main-collection-product-grid { background-color: aliceblue; }

Note: - In the code you can add background color as per your choice.

Output will be like this -: https://prnt.sc/DVkvkTta1V2z

I hope the code helps you.

Please let me know if you have any query or need any further assistance.

Thank you.

10

yes, this is what i was lookin’ for. theres also a way to enlarge of about 5 px each part (left, right, up and down)

11

Hello @clavilla57 ,

Yes, you can enlarge area around the main or sub filter option similar to this https://prnt.sc/zjFKZA1eg-0N

Please add the below mentioned code at the bottom of the theme.liquid file before tag and save it.

.facets-vertical .facets__summary { padding-top: 2.5rem; margin-bottom: 0; padding-bottom: 1.5rem; padding-left: 5px; padding-right: 5px; } .facet-checkbox { padding: 2rem 3rem 2rem 5px; }

I hope the code helps you.

Please share if you have any query.

Thank you.

1 Like