How to add a searchbox in Webnode website or e-shop?

Would you like a searchbox (searchbar) on your e-shop/website from WEBNODE?

Are you looking for a simple and stylish search box that you can put on your website or e-shop in Webnode?

Video-tutorial

Videotutorial is only in Slovak language.

In tutorial How to add a custom search box to the web? – Google Custom Search i have shown a simple searchbox from Google.

In this tutorial i will show you external searchbox SearchIQ, which will automatically load all the pages of your website / e-shop

and then provide you with the HTML code of the searchbox, which you can simply insert into your website or e-shop.

If you do not have more than 2000 pages on your website or e-shop (eg product pages or other pages of the website), then you do not have to pay anything for this app SearchIQ.

IT’S FREE.

In the FREE variant, support is also available through the forum.

SearchIQ also offers free search term statistics, which you can check directly online in their user interface.

SearchIQ is suitable as a product search engine in an e-shop or a search engine for a classic website or blog.

I am using the SearchIQ search engine on my Wpromotions.eu website. If you want to try it, please use the search engine on this website.

Lets divide this tutorial in 3 parts:

1. Registration and getting codes
2. Embedding codes on your website
3. Customize it (enlarge SearchIQ)

The first part – registration & getting codes

1. The first step is to register with the external SearchIQ service. You can register on the official website: https://www.searchiq.co/

   Start by clicking the “Get Started” button.

3. Verify your email address by clicking on the link they sent you.
If the email doesn’t coming – take a look at SPAM or Advertising.

After verifying your email, sign in.

4. After logging in to the service, select the “No, its something else” option.

5.Fill in URL of your site and click on “Add Site“

6.  When its done, the application automatically redirects you to the “Interface” and “Installation” sections, where you will find 3 codes that need to be pasted into your website or e-shop in order for the SearchIQ search engine to work properly.

The second part – embedding codes on your website or e-shop

Paste the first code provided by the application into the HTML Header section on all pages of your website.

Choose how to embed the first code – depending on which Premium Plan you use in WEBNODE.

Great – you successfully pasted the first SearchIQ code.

The second code must be pasted where you want the web search box to appear.

TIP: In the second code, you can edit the text that will appear in the search engine.

Change the predefined “Type here to search…” in the code to your own like “Search” etc.

You should now see a small search box in the published version of your website.

Paste the third code SearchIQ on a separate page, e.g. Search results.

Publish it!

Go to the SearchIQ app and in the section “Interface” – “Result Page” in the field “Result Page URL” add the URL of your results page.

Great – you have the SearchIQ search engine set up correctly in the basic small look.

The last step is now to customize the look and enlarging SearchIQ searchbox with a little bit of CSS magic. 

The third part – customizing the look 

SearchIQ allows you to customize the look of the search box by adding your own CSS code.

In order for the search box to look exactly as it looks on my DEMO website, you need to add your own CSS code to SearchIQ.

Subscribe to Wiliam Promotions News and get a ready-made CSS code that will customize the look of your SearchIQ search engine.

And where to put my CSS code?

In the SearchIQ application, go to the “Interface” – “General” page and paste my code into the “Custom CSS” field.

Save it.

DONE – Great, you have successfully completed the last step and your search box is displayed in a new coat 🙂

You will see the change in the appearance of the search engine immediately in the published version of your website.

I hope that everything went smoothly without any problems.

If you struggle with this do not hesitate to create a new ticket in my Free Webnode Support Center.

Please write to me in the comments your feedback 🙂

More awesome tutorials