How To Build A Horizontal Filter - Backpack Demo
Written by the Divi Engine Documentation Team
Introduction
Follow these steps to build the horizontal filter from our Backpack Demo website. Click HERE to see the demo page.
Preview
Description.
How to create the horizontal filter from our Backpack Demo website.
Difficulty.
Easy.
Time
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.