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 Shopify account and pasting in snippets of code.
1. 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 Shopify theme files.
2. To get started, log into your Shopify account and go to Online Store › Themes. Before we edit the template files, were going to create a backup of your current theme. Go to the options dropdown and select Duplicate.
Once it’s saved, go to the options dropdown again and 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.
3. 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 your Shopify editor page, open theme.liquid. Look for the opening <head> tag. Just before the closing </head> tag, make a line of space and paste in the code from step one and hit save.
4. 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 Search.liquid. Paste the code from step 2.
5. Now we need to replace the query parameter to match what is on your site. For your Shopify site, your query parameter will just be "q". In the code snippet, replace "SEARCH_PARAMETER" with "q".
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. The last part for this step is to clear out the native search results from Shopify so only the search results from SearchSpring show up. So for this theme, everything except our code from step 2 can be cleared out. Now hit save.
7. Go back to SearchSpring and copy the code from step 3.
The last 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 the Shopify editor page, open Snippets › Search-form.liquid. Look for the <form> tag and just before the closing </form> tag, paste in the code from step 3.
If your Shopify theme has it’s own autocomplete, you’ll want to clear it out so only the autocomplete results from SearchSpring shows up.
8. Preview your changes on the editor page. 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.