Filter Drawer Animation - Open on the left side.

[prvmesquita]

H Community,

I am using Dawn theme with the default filter that open from right to left.

How can I move it to the left side of the screen and tweak the animation to open it from left to right.

Another thing I would like know is if there is any way to open the filter with all the options expanded.

Cheers

Paulo

[Promer-Alena]

Hi @prvmesquita

To move the filter drawer on the left side and change the animation to open left to right, you will need to alter the CSS in your theme files. In the Dawn theme, locate the collection-filter-drawer component within your theme.css or base.css and set the right: 0 property to left: 0, and modify the animation keyframes (like translateX) to slide in from the left and not the right. This does take some proprietary coding, so if you’re not prepared to dive into CSS, I would recommend that you hire a Shopify developer to do it elegantly. In terms of opening the filter with all the options available, you can modify the JavaScript that controls the filter’s accordion, search for the collapsible or details elements in the filter code and set them to open by default.

[EBOOST]

Hi @prvmesquita ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. Add code below to end of file

.js body .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
	transform: translate(-105vw);
}

body .mobile-facets__close {
	left: 1rem;
	right: auto;
}

body .mobile-facets__inner {
	margin-left: 0;
	margin-right: auto;
}

.js body .mobile-facets__submenu {
	transfrom: translate(-100%);
}

[prvmesquita]

Thank you very much. That worked very well.

Now I have to find out how to open with expanded options like this: