How to Add a Product Search Feature Using OzSpeed hPanel

A Product Search feature enhances user experience by allowing visitors to quickly find the products they’re looking for on your website. Adding a search bar can help increase sales, improve navigation, and reduce bounce rates by making it easier for customers to locate specific items. With OzSpeed’s Website Builder, you can easily add and customize a product search bar on your site. Here’s how to set it up step by step.

---

Step 1: Access the Website Editor #

To begin adding a product search feature, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page where you want to place the search bar, such as the Homepage, Shop Page, or Header.

Tip: #

• Placing the search bar in the header ensures it is easily accessible on every page of your website.

---

Step 2: Add a Search Block #

OzSpeed’s Website Builder includes a Search Block that you can easily drag and drop onto your page.

How to Add a Search Block: #

1. Click Add Element or + Add New Section in the editor toolbar.
2. Select Search Bar from the list of elements.
3. Drag the Search Block to the desired location on your page.
4. Click Insert to add it.

Tip: #

• Position the search bar prominently, such as at the top of your homepage or in the main navigation menu.

---

Step 3: Enable Product Search #

Configure the search feature to look specifically for products on your website.

How to Enable Product Search: #

1. Click on the Search Block to open the settings panel.
2. Toggle on the Product Search option.
3. Select the product categories you want to include in the search results (e.g., “Electronics,” “Clothing”).
4. Click Save.

Tip: #

• Including relevant product categories in the search settings ensures that users find accurate and useful results.

---

Step 4: Customize the Search Bar Design #

You can style the search bar to match your website’s branding.

How to Customize: #

1. Click on the Search Block to open the Design Settings.
2. Adjust the width, background color, and border style.
3. Change the placeholder text (e.g., “Search for products…”).
4. Click Save.

Tip: #

• Use a simple, clear placeholder text to guide users on what they can search for.

---

Step 5: Set Up Search Results Page #

Customize the appearance of the search results page to provide a user-friendly experience.

How to Configure the Results Page: #

1. Go to Website Settings > Search Results in hPanel.
2. Choose how the results will be displayed (e.g., grid view, list view).
3. Enable product filters (e.g., price, category) to help users narrow down their search.
4. Click Save.

Tip: #

• Display product images, prices, and brief descriptions in the search results for quick reference.

---

Step 6: Preview and Test the Product Search #

Before publishing, preview the search feature to ensure it works correctly and displays accurate results.

How to Preview: #

1. Click Preview in the top toolbar.
2. Test the search bar on both desktop and mobile views.
3. Enter a few product names or keywords to verify that the search results are relevant.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 7: Publish the Changes #

Once you’re satisfied with the product search feature, publish your updates to make it live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Announce the new search feature on your website or in your email newsletter to let your customers know they can now search for products more easily.

---

Troubleshooting Tips #

1. Search Results Not Displaying Correctly:
   • Ensure the Product Search option is enabled in the settings.
   • Check that the product categories are correctly selected.
2. Slow Search Performance:
   • Optimize your product database by regularly updating product information and removing outdated items.
   • Use caching in hPanel to speed up search performance.
3. Search Bar Not Responsive on Mobile:
   • Use the responsive design settings to adjust the size of the search bar for mobile devices.
   • Test the search feature on multiple devices to ensure it displays correctly.

---

Additional Tips: #

• Include Filters: Adding filters like price range, categories, or brand can help users refine their search and find products faster.
• Optimize for SEO: Use descriptive product names and tags to improve search relevance and visibility.
• Monitor Search Analytics: Use tools like Google Analytics to track what users are searching for, and update your product listings accordingly.