Change the style of my filter bar

Topic summary

A user wants to customize their filter bar in Shopify’s Dawn 15.2.0 theme, specifically changing the background, font size, and font thickness through code rather than paid apps.

Key Requests:

  • Modify filter bar styling (background, typography)
  • Replace the ‘Availability’ dropdown with a toggle switch defaulting to ‘All products’ with option to switch to ‘Only available’

Progress Made:

  • User discovered how to adjust font thickness independently
  • Remaining challenge: changing the background color for the filter area

Solution Provided:
A community member offered CSS code to be inserted in the theme.liquid file before the </head> tag, with a screenshot showing the expected result. The specific CSS code was included but appears empty in the conversation thread.

Status: Partially resolved - styling solution provided, but the toggle switch request remains unaddressed.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

Hello,

I would like to change the style (background, font size, font thickness).

The support said that it is not possible via a selection in Shopify, but via code.

All the posts I’ve seen about this are outdated and don’t help me. I am using the Dawn 15.2.0 theme.

Unfortunately, I can’t afford to spend 20 euros on an app just for the filter bar and want to do everything manually for now.

I would also like to know if it is possible to change the ‘Availability’ tab.

Instead of having two options to choose from, I would like to add a switch that is set to ‘All products’ by default and that can be changed to ‘Only available’

Is that possible?

1 Like

Hi @JonasDialga

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update? Attach pictures so I can better understand your problem.

https://cardbrothers.de/

PW: riadre

I also found out how to change the thickness and stuff for the filter bar.

I just want to know how to adjust for example the background for that specific area

Hi @JonasDialga

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

1 Like