Custom off-canvas sidebar

You can enable an off-canvas sidebar when you create a custom shop page as well as you can do this for the default shop page layout. This option will hide the sidebar on selected devices (desktop, tablet, mobile) and show it only when you click on the special button.

Custom off-canvas sidebar functionality in our Layouts builder consists of three main elements: content column, off-canvas hidden sidebar column, and off-canvas sidebar button.

Here is a step-by-step instruction about how to activate it:

1. Add a row with two columns. One of them can contain the sidebar element or filter widgets. Another will have your products element.

2. Edit these two columns and set “Column role” options. One with the sidebar should be set as “Off-canvas column. And another one, with the content, will be the “Content column”. Also, specify which devices do you want to apply this on. IMPORTANT: both sidebar and content columns should have the same devices selected.

3. Add the “Off-canvas column button” element inside your “Content column”.