Setting up a custom site search on your website

Visitors who come to your website knowing what they’re looking for, even if they just have a vague idea, will tend to bypass your well-thought-out category structure, skip the aimless browsing and head straight for your website’s search function. These users, due to the ease of searching on well-known websites such as Amazon, will expect your website’s search to provide them with quick, relevant results as soon as they begin typing. While your website won’t display this predictive custom site search by default, adding one to your website is easy and something you’ll want to strongly consider doing. After all, helping your customers to find things to purchase from you can only help to boost your revenue.

The stats behind why you need a good custom site search

While the basic search function that comes with your ShopWired website is great for providing accurate results once a full search term has been entered, it lacks the ability to offer the autocomplete element that your customers would love, and also it is not typo or synonym tolerant. With 43% of users, according to Forrester Research, skipping browsing and heading straight to your websites search, you'll want to make sure that you're making the experience as easy as possible for them. Additionally, since these visitors are typically on a mission to find something specific, it makes them about two - four times more likely to actually make a purchase from you. By quickly showing them what they're looking for and reducing the risk of not showing them any results at all, you'll be speeding along the process of converting them.

Doofinder and Expertrec - the benefits of both

While there are many different custom search options out there for you to use, we recommend that you use either Doofinder or Expertrec. Doofinder and Expertrec offer searches that are easy to set up (we've included instructions for both right here in this article) and have a price point that is attractive to businesses of all sizes. Here's how much each will cost you and what features they can bring to your website:

Costs

Doofinder
Doofinder offers a free plan which allows you up to 1,000 requests a month (note that one complete search can use multiple requests - check out this explanation of how requests are calculated) Their paid plans start at €29 + €6 for mobile version (about £30/month, including mobile version) which allows your site up to 10,000 requests a month.

Expertrec
For its most basic plan, Expertrec costs $9/month (about £7/month) with a one year commitment. All of Expertrec’s packages offer unlimited search queries, but limit how many pages of your website will be indexed. With their basic plan up to 2,000 pages can be indexed, so this package is ideal if your website is smaller. If you have a larger product catalogue then you might want to consider one of their other plans which allow from 5,000 - 20,000 pages to be indexed (the most expensive set plan costs $81/month when paying for a year upfront). 

Basic features of both

Head on over to Expertrec's website to check out more information about their features. If you like what you see, sign up for their free trial and read through our 'Setting up Expertrec' instructions below to get started.

Check out Doofinder's website for more information about what their search function can provide for you. Then if you're tempted by their free plan or free trial to give them a try, read through our instructions in the next section (just below) to help you seamlessly integrate their search on your website.

Setting up Doofinder

If you find that Doofinder's predictive custom search is the one that you would like to implement on your website, then here is how to set the search engine up:

Step 1 - Create an account

First, unless you already have one, you’ll need to create an account with Doofinder.

Step 2 - Supply site information

Once you’ve created your account, enter a name for your search engine and supply the specific site information that Doofinder requires from you. This will include things such as the URL for your website, the platform your website operates on (for this you should select 'Other - e-commerce'), which industry your business operates in and the language and currency for your website.

Step 3 - Configure your data feed

Next, Doofinder will ask you to configure your data feed. This is from where Doofinder will pull your product information in order to be able to accurately display it in the search results on your website. Any products missing from the feed you supply them will not be displayed in the results for any search query.

To provide them with an accurate data feed, we recommend that you install our free product XML feed app and configure the feed through the admin system. If you’re not sure how to configure the feed, that’s okay, just head over to our help guide for the product XML feed and copy the example feed content. Then return to the product XML feed admin page in your account and paste it in the ‘Content’ box:

Once you've configured the feed, access your data feed link by selecting 'Feeds' then 'Feed URLs' from the left menu in the admin system. Find the section named 'Product Feed' and copy the link then, where Doofinder asks you to enter your data feed URL, paste the link and click to process the URL:

Since the product XML feed is set to update once every 24 hours, you would need to wait until the following day for any results to start appearing in your website's search engine, so you might want to consider waiting until the feed has populated to move onto step 4.

Step 4 - Layer setup

Finally, you can use Doofinder’s setup wizard to configure the layer and retrieve the code you’ll need to input into your theme’s code to enable the search to work on your website. You won’t be able to properly use the setup wizard if you currently have the holding page on your account activated, so make sure you’ve turned it off before beginning the process. (If you're within your free trial period, then you'll need to select a plan in order to turn off your holding page.)

In the layer installer first enter your site’s URL and select ‘Other’ as your platform. Then choose how you want your search results to appear to your users. You can choose from fullscreen, classic or compact. As the option suggests, fullscreen would open up the search area to be the whole screen of the tab, and below are examples of how the classic and the compact options would appear on your website:

Classic

Compact

Next, on the live preview of your website that appears in the installer you will need to select on your website where your current search box exists so that the code can be generated to attach to it:

Select ‘Choose Search Box’ and click the search box on your website. Then select where a user would enter their search term. For the final step you can customise the layer if you want to. Once you’ve finished all four steps, select ‘Save’. The setup wizard will close and you’ll see some code on the ‘Layer Setup’ page, as shown in the example below, which you should copy:

This is the code you’ll need to paste into your theme’s HTML in order to get the search box to work.

Step 5 - Pasting the code into your live theme's files

To paste the code into your live theme's files, open your ShopWired account in a new tab and navigate to 'Themes' then 'Installed Themes' from the left menu. On the 'Installed Themes' page, open the page editor for your live theme:

Your coped HTML code needs to be pasted in the <head> section of every page of your website. This can easily be achieved by locating the 'master.twig' file in the page editor. To find this file open the 'Views' folder followed by the 'Templates' folder. Select the 'master.twig' file, so you can see the HTML code for the file. If you have no HTML experience this might look a bit confusing to you, but don't worry, you only need to paste your code in one simple section of the existing code. Within the code find the line that begins with '<head', like so:

This line is your opening <head> tag and your code will need to be pasted after this tag and before the closing tag (</head>). For simplicity, paste your code on the line directly after the opening <head> tag, like so:

Save the changes to your theme and then check your website to make sure the Doofinder search is working as expected. As we mentioned previously, if the data feed you supplied to Doofinder doesn't currently contain any of your product's information then the search won't be working yet. You'll need to wait until the XML feed has been generated.

Important things to remember when using Doofinder

• If you’ve chosen to supply your product data to Doofinder using the product XML feed link that we recommend, then remember that the feed updates once every 24 hours. You shouldn’t expect to see any newly created products in your search engine until the following day.
• If you determined that using the recommended product XML feed wasn't for you and you instead chose to supply your product data to Doofinder as a file, then you’ll want to make sure you update that file whenever you want the search terms on your website to be updated. If you add products to your website without uploading a new file containing them, then those products won’t appear in your website’s search.
• If you ever want to change the data feed you’ve supplied to Doofinder, select 'Indices' under the 'Setup' section of your Doofinder account, delete your current feed and select ‘Add source’ to add your new feed.
• Once you've followed all of the steps above, the Doofinder custom search will be linked to your live theme. If at any point you want to change your live theme, then the Doofinder search will not be installed by default. You will need to repeat steps 4 and 5 above to reinstall Doofinder on your new theme.

Setting up Expertrec

If Expertrec's custom site search appealed the most to you, then here are your step-by-step instructions for how to install their search on your website.

Step 1 - Creating an account

If you don't already have an Expertrec account, then you'll need to create one. When you create your account, supply Expertrec with the URL to your website. 

Step 2 - Allow Expertrec to crawl your website

Once you've created your account, Expertrec will immediately begin crawling your website, which is how they obtain information, such as product information, from your website. This allows them to accurately display your products in the custom search. Since the Expertrec crawlers need access to your full website they will not be able to find your products if you have your holding page turned on, so make sure you've turned off the page before Expertrec's crawl begins. This crawl will take a bit of time to be completed, and could take up to a full day if you have a large website with a lot of products.

Step 3 - Copying the HTML code from Expertrec 

To use Expertrec's custom search you will need to copy and paste some HTML code from your Expertrec account in your live theme's files on your ShopWired account. To access this code select 'Install' then 'Code' from the left menu of your Expertrec account:

Then copy the code that's in the box at the top of the page.

Step 4 - Pasting the code into your live theme's files

To paste the code into your live theme's files, open your ShopWired account in a new tab and navigate to 'Themes' then 'Installed Themes' from the left menu. On the 'Installed Themes' page, open the page editor for your live theme:

Your coped HTML code needs to be pasted in the <head> section of every page of your website. This can easily be achieved by locating the 'master.twig' file in the page editor. To find this file open the 'Views' folder followed by the 'Templates' folder. Select the 'master.twig' file, so you can see the HTML code for the file. If you have no HTML experience this might look a bit confusing to you, but don't worry, you only need to paste your code in one simple section of the existing code. Within the code find the line that begins with '<head', like so:

This line is your opening <head> tag and your code will need to be pasted after this tag and before the closing tag (</head>). For simplicity, paste your code on the line directly after the opening <head> tag, like so:

Save the changes to your theme.

Step 5 - Adding the search box

The final step is to add the search box to your website, but since your website already has a search box all you need to do is tell Expertrec to use your existing one. To do this return to the page in your Expertrec account where you obtained your code.  Select the 'Use Existing Search Box' tab and turn the setting on:

Then check your website to make sure the Expertrec search is working as expected. 

Important things to remember when using Expertrec

• Once you've followed all of the steps above, Expertrec's custom search will be installed on your live theme. If at any point you want to change the theme you're using, then the Expertrec search will not be installed by default. You should repeat steps 3, 4 and 5 above to reinstall the search on your new theme.
• To change the frequency at which Expertrec re-crawls your website select 'Crawl' then 'ReCrawl Frequency' from the left menu of your Expertrec admin account.
• Expertrec will only re-crawl your website in line with your settings or if you manually select for a re-crawl. If you create new products or update existing products the search will only display those changes when a re-crawl has occurred.