How To Build A Horizontal Filter - Backpack Demo

Written by the Divi Engine Documentation Team


Follow these steps to build the horizontal filter from our Backpack Demo website. Click HERE to see the demo page.



How to create the horizontal filter from our Backpack Demo website.




15 Minutes.

Step 1: Set It Up - Custom Loop Layout

Start off by creating a Divi Library Custom Loop Layout containing one Section with one Row and the modules you see in the image below.

1.) Add 1 Row.

2.) Add the Thumbnail, Title, Price and View Product modules.

Step 2: Set It Up - Filter Posts & Product Loop Modules

Head over to the page of your choice and add the Filter Posts and Product Loop modules.

1.) Add the Filter Posts module above the Product Loop module.

Step 3: Customize Settings - Filter Posts Module

In the Filter Posts module you will need to enable the side by side button and select the fullwidth column. After doing this, add two filter items, one for your product categories and one for your product tags.

1.) Enable the side by side button in the Main Options section of the main settings.

2.) Select the fullwidth column in the Layout Options of the main settings.

3.) Add a Filter Item and assign it to filter by product categories.

4.) Add a Filter Item and assign it to filter by product tags.

Step 4: Customize Settings - Product Loop Module

Make sure that the Loop Style is set to Custom Layout and then assign your Custom Loop Layout.

1.) Select Custom Layout as Loop Style.

2.) Select the Custom Loop Layout that you have already made.

3.) Enable the Is Main Loop feature.

4.) Enable the Show Orderby Menu feature.

5.) Enable the Show Results Count feature.

Step 5: Add Custom Code

No custom code here.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.