Expanded Collection Filter instead of collapsible

Store Design
, , , ,

Topic summary

A Shopify store owner wants to display collection filters in an expanded state by default instead of using collapsible dropdowns. They also want to hide the main “Filter” button while keeping the “Sort by” dropdown visible.

Solution provided:

  • Custom CSS code added to the theme file to expand filters automatically
  • Additional CSS to hide the filter button and result count while preserving the sort functionality
  • Further styling adjustments to align the “Sort by” dropdown with other filters and improve overall layout consistency

Technical implementation:

  • Code inserted in theme.liquid before the </head> tag
  • CSS modifications added to theme.css file
  • Targeted classes include .filter-bar__inner, .filter-bar__button--filters, and .collection__content

Outcome:
The issue was successfully resolved through multiple CSS customizations, achieving the desired expanded filter layout with proper styling and positioning.

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

First photo is how I’d like it to appear, second is how it currently appears with the collapsible filters - any help greatly appreciated! URL: https://afca7f-2.myshopify.com/collections/all

Screenshot 2023-10-29 at 10.36.45 AM.png
Screenshot 2023-10-29 at 10.36.45 AM.png2786×994 112 KB

Screenshot 2023-10-29 at 10.37.28 AM.png
Screenshot 2023-10-29 at 10.37.28 AM.png2192×964 98.1 KB

2

Hi @blakelyhi

You can do that by adding this code in your Online store > Themes > Edit cod > open theme.liquid file, add this code before tag
3

Thank you! I would like the Filter section above the expanded filters to be hidden though, I was able to target this with .filter-bar__inner but it also hid the sort filter, which I would like to remain visible… any tips?

4

Please add those code to hide those parts

.filter-bar__inner .filter-bar__button,
.filter-bar__inner .filter-bar__results-count { display: none !important; }
5

Yes that’s what I had done but it also removes the “Sort by” section on the right side and I’d like that to remain - is that possible? Thank you!

6

Please update code to this

.filter-bar__inner .filter-bar__button--filters,
.filter-bar__inner .filter-bar__results-count { display: none !important; }
7

Thank you so much!!

8

Hi Dan, I am wondering if you would be able to assist in making the “Sort By” on the right side look same in style to the other filters… or even move it to the left side so it’s in the same line as the other filters? Something like the image below is what I’m trying to achieve.

Snow Jackets.png
Snow Jackets.png2744×876 133 KB

9

Send me your store link please

10

URL: https://afca7f-2.myshopify.com

11

Add this code at the bottom of your theme.css file

.collection__container .collection__content .filter-bar {
    max-width: 1400px !important;
    margin: 0 auto !important;
}
.collection__container .collection__content .filter-bar .filter-bar__inner {
    position: absolute;
    right: 0px;
    top: 24px;
    border: 1px solid #000;
    padding: 4px 10px !important;
}
}
.collection__container .collection__content .filter-bar .filter-bar__filters-inner {
    padding-left: 0px !important;
}
1 Like
12

So so appreciated, thank you!

13

You are very welcome