How can I effectively reduce and align the filter bar in all views?

Store Design
, , ,

Topic summary

A user seeks to reduce the size and align the filter bar across all views on their Shopify store, providing a screenshot showing the current layout.

Solution Provided:

  • Another user shares custom CSS code to be added above </body> in theme.liquid
  • The code modifies .filters-toolbar-wrapper and .filters-toolbar classes to adjust padding, background color, and width

Outcome:

  • The CSS solution successfully resolves the filter bar alignment issue
  • A secondary slideshow issue is mentioned but deferred to a separate thread for future resolution

Status: Resolved for the primary filter bar concern; slideshow issue remains open and will be addressed separately.

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

Hi guys,

Would like to reuce and align the filter bar in all views.

Screenshot 2023-01-08 012017.jpg
Screenshot 2023-01-08 012017.jpg1920×1040 157 KB

Thank you

allianceautoproducts.com

2

@Alliance

hi,

Please use code given below. paste the code above in theme.liquid.

layout >> theme.liquid

body .filters-toolbar-wrapper .page-width .filters-toolbar { background: #d0021b; padding: 0 20px!important; } body .filters-toolbar-wrapper .page-width { background: #fff!important; }
3

Worked very well in scss after remove style. Thank you

1 Like
4

my pleasure :slightly_smiling_face:

5

pleasure is mine. If you can fix that slideshow issue.

1 Like
6

which type of issue created with slideshow? i can solve but I’m on the bed right now then please share the issue and i will solve tommorow please friend because I’m very tired.

7

Divinding slideshow into multi slides

Have a good sleep. Thank you