How To Build A Search Results Page - Bookstore Demo

Written by the Divi Engine Documentation Team


Follow these steps to build the Search Results Page from our Bookstore Demo website. Click HERE to see the demo page.



How to create the Search Results Page from our Bookstore Demo website.




20 Minutes.

Step 1: Set It Up - Custom Loop Layout

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

1.) Add 2 Rows.

2.) Add the Thumbnail Module in the top Row, then the Price and Title Modules in the bottom Row.

Step 2: Set It Up - Search Page Layout

Go to Divi > Theme Builder and create a new Template assigned to Search Results. Add a Custom Body and to that add one Section, one Row and the Product Loop Module.

1.) Create a new Divi Theme Builder Template assigned to the Search Results.

2.) Add a Section.

3.) Add a Row.

4.) Add the Product Loop Module.

Step 3: Customize Settings - Custom Loop Layout Top Row

Customize the top Row (the row with the Thumbnail Module) by giving it a border.

1.) Click the Design Tab.

2.) Set the Border Width to 2px.

3.) Give the Border a colour of #f4f3ec.

Step 4: Customize Settings - Custom Loop Layout Price Module

Customize the Price Module by giving it some colour and a Text Before value.

1.) Change the Text Before to, "Price" - or add your own characters.

2.) In the Design Tab change the Price Font Weight to Semi Bold.

3.) Set the Price Text Color to be #c5a374.

Step 5: Customize Settings - Custom Loop Layout Title Module

Change the Title module by enabling the "Link Title to Single Page" button and the Product Title Text

1.) In the Content Tab of the Title Module, enable the "LInk Title to Single Page" button.

2.) Set the Product Title Text in the Design Tab to be settings of your choice. We suggest a size of 30px and colour black.

Step 6: Customize Our Settings - Product Loop Module

The Product Loop Module is an important element to customize. In the Content Tab set the Post Type, Loop Style, Loop Layout and the Layout.

1.) Set Post Type in Content Tab to be "Products."

2.) Assign the Loop Style to be Custom Layout.

3.) Find the Custom Loop Layout that you have just made in the "Loop Layout."

4.) Scroll down in the Content Tab and look for the Layout, change this to Grid.

5.) Set the Grid on the Desktop to be Four.

6.) Set the Grid on Tablet to be Two and Mobile One.

Step 7: Custom Code

No custom code here.

Step 8: Conclusion

To enable the search icon and functionality in your Primary menu, go to Appearance > Customize > Header & Navigation > Header Elements and check the box for "Show Search Icon."

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.