|1. Signup||»||2. Connect||»||3. Analytics||»||4. Preview & Customize||»||5. Install for
Stencil or Blueprint
|»||6. IntelliSuggest for
Stencil or Blueprint
After you’ve connected your product data feed to SearchSpring, you can integrate SearchSpring Express. Integrating SearchSpring Express involves editing your theme files in your BigCommerce account and pasting in snippets of code.
1. Go to Search Preview
Go to the Search Preview page inside the SearchSpring management console. On the right hand side are the instructions for integrating SearchSpring Express, along with the code snippets that need to be pasted into your BigCommerce theme files.
2. Back-Up and Edit Your Theme
To get started, log into your BigCommerce Account and go to Storefront Design › My Themes. Before we edit the template files, we're going to create a backup of your current template. On the right, click Download Theme, then select whether you want to download Customized files only or All files.
Once that’s saved, on the right, click Edit HTML/CSS
Now you’re inside your theme's files. The left hand side shows you all the files that make up your theme in a tree of nested folders.
Go back to the SearchSpring search preview page and copy the code from step one.
The code snippet for step one goes pasted into the <head> section on your stores theme.
On the left panel in you BigCommerce editor page, open HTMLhead.html. Look for the opening <head> tag. Inside the <head> section, make a line of space and paste in the code from step one and hit save.
4. Insert the Search Results Code
Now go back to SearchSpring and copy the code for step 2.
This code snippet is for your search results and it goes wherever search results show up on your theme. The file name or location may be something different from this example based on your individual theme.
On the left panel open SearchPage.html. Paste the code from step 2
5. Set the Search Parameter
Now we need to replace the query parameter to match what is on your site. For BigCommerce sites, your query parameter will likely be "search_query". In the code snippet, replace "SEARCH_PARAMETER" with "search_query".
To be certain you have the correct parameter, you can find your query parameter is by performing a search on your site. When someone enters a search on your site, their search query is usually included in the url, along with the query parameter.
6. Remove the Default BigCommerce Results Template
Note: Please keep a copy of your templates saved in a secure location before attempting this step. If you need to uninstall SearchSpring, you will need to revert your templates back to their original state.
The goal for this step is to hide the native search results from BigCommerce so only the search results from SearchSpring appear. In this example, everything except our code from step 2 can be cleared out. Save your changes.
7. Insert the Autocomplete Code
Go back to SearchSpring and copy the code from step 3.
This code snippet is for autocomplete and it goes wherever your main search box is on your theme. The file name or location may be something different from this example based on your individual theme.
In your BigCommerce editor page, open headersearch.html. Look for the <form> tag and just before the closing </form> tag, paste in the code from step 3.
If your BigCommerce theme has it’s own autocomplete, you’ll want to clear it out so only the autocomplete results from SearchSpring show up.
8. Apply Your Theme
Save your changes. Now head back to your live site and enter a search query on main search box to test SearchSpring autocomplete and site search. If everything is working correctly, then you're all done.