How to open collection filter from right side in Horizon?

Store Design
, , ,
1

2026-04-14_18-32
2026-04-14_18-321912×927 133 KB

2

This is a good question to ask Shopify Sidekick. It can help you with all kinds of things, including theme work.

3

Hey @kevalt

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hi @kevalt

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Thank you for support

After spending a time, i find a solution

I removed .dialog-drawer--right class from blocks\filters.liquid

and i add this css

.facets.facets--drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    margin: 0;
    height: 100dvh;
    max-height: 100dvh;
  }
6

paste this code in your css file which you will get in asset folder of your store

.filter-drawer {
position: fixed;
top: 0;
right: -350px;
width: 350px;
height: 100%;
background: #fff;
overflow-y: auto;
transition: right 0.3s ease;
z-index: 999;
}

.filter-drawer.open {
right: 0;
}

.filter-toggle {
margin-bottom: 15px;
}

and add this JS too

document.getElementById(‘FilterToggle’).addEventListener(‘click’, function() {
document.getElementById(‘FilterDrawer’).classList.toggle(‘open’);
});