Updating Filter format

[RivaajEthnic]

Hi All,

Currently we have added filters and it shows on the left pane which is static. We wish to change this to a format where in filters are displayed on the left pane only when when someone clicks on filter button (something like a collapsible section).

Our website URL:

https://www.rivaajethnic.com/collections/kurtas

Please find below reference images for ease of explanation.

Reference image 1 (we are fine with filter button on right side in our website) :

Reference image 2:

After clicking on image the filter window opens on the left side and gives option to select the filters.

Many Thanks!

[EBOOST]

Hi @RivaajEthnic ,

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

@media(min-width: 1025px){
		.template-collection.open-mobile-sidebar {
			overflow: visible!important;
		}

		.template-collection:not(.open-mobile-sidebar) .page-sidebar {
			transform: translate3d(-100%, 0, 0) !important;
		    width: 0;
		    overflow: hidden;
		}

		.template-collection.open-mobile-sidebar .page-sidebar {
			opacity: 1;
			visibility: visible;
			transform: translateZ(0)!important;
		}

		.template-collection.open-mobile-sidebar .background-overlay {
			display: none!important;
		}

		.template-collection .toolbar > .toolbar-wrapper.toolbar-mobile:first-child {
			display: block!important;
			transform: none;
			opacity: 1;
		}

		.template-collection .toolbar > .toolbar-wrapper.toolbar-mobile:first-child  + .toolbar-wrapper {
			flex: inherit;
		}

		.template-collection:not(.open-mobile-sidebar) #CollectionProductGrid {
			width: 100%;
			padding-left: 0;
		}

	}