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