fbpx
Optimize the Impresee search bar experience in your Shopify store
October 7, 2020
Author: Camila Álvarez
I'm a co-founder at Impresee. I like researching deep learning techniques and their applications in the style and apparel industries. You can contact me at camila.alvarez@impresee.com
Optimize Search bar Shopify

Are you looking to optimize your search bar experience for your Shopify store?

We understand that the speed at which an installed app loads into your storefront is incredibly relevant to you, specially when it is such an important feature like a search bar.
As a results, in this post we want to teach you how to optimize the search bar experience in your Shopify store, specially focusing on the loading times of your “Creative Search Bar”.

 

Shopify App

To begin you must install the app “Impresee Creative Search Bar & Filters” from the Shopify App Store.

Once you install the app you’ll have to go thorugh a short onboarding process (you can find more details here: https://impresee.com/install-visual-search-for-shopify/), which will then lead you to your Impresee dashboard.

Optimize your search bar

Step 1: Activate the search bar in your storefront

To achieve this you only need to click on the swicth so that it turns green (and has the word ON on it)

Status screen dashboard Impresee Shopify

Step 2: Start editing your theme

Don’t worry, this is completely risk free process. Firstly, Start by opening the “Themes” menu under “Online Store

Theme menu shopify

Secondly,  open the “Actions” drop down and click on “Edit code

Step 3: Create your integration snippet

Scroll down until you find the “Snippets” folder, and then click on it. After that you should see an “Add a new snippet” label. I need you to click on that.

You should now see a popup asking you to name your new snippet. You’ll name it impresee-theme-integration, and then you’ll click on “Create snippet

Creating Snippet Shopify Theme

Step 4: Write the integration code

Now you have to write the following code into your newly created file:

<script src="https://cdn.impresee.com/shopify-script-tags/{your store .myshopify.com url}.into-theme.js?shop={your store .myshopify.com url}&origin=theme" defer></script>

Where {your store .myshopify.com url} is your actual Shopify Store URL (which is [your-shop-name].myshopify.com).
For example, in my case, my store is called impresee-vsearch-demo, which means that my Shopify Store URL is: impresee-vsearch-demo.myshopify.com. So, for my store, my code would look like this: 

<script src="https://cdn.impresee.com/shopify-script-tags/impresee-vsearch-demo.myshopify.com.into-theme.js?shop=impresee-vsearch-demo.myshopify.com&origin=theme" defer></script>

After writing the code you must click on the “Save” button located at the top right corner of your browser

Save Snippet in Shopify Editor

Step 5: Include the code in your theme

Firstly, you need to find your main theme file. This file is typically named “theme.liquid” and it is located under the “Layout” folder.

Secondly, open it and locate the <head> tag.

Theme file Shopify

Thirdly, below all <meta> tags (if there are some there) write the following code:

{% include 'impresee-theme-integration' %} 

Finally, click on the “Save” button.

Step 6: Active the “Into theme integration mode” in the Creative Search Bar app.

We have now reached the final step on how to optimize the search bar experience in your Shopify store!

So, go to Apps > Impresee Creative Search Bar & Filters.

Click on the “Configuration” option on the navigation bar. After that, find the “Integrate into your theme:” option under the “Features” section, and activate the switch. Finally, click on the “Save” button.

Enable Impresee integration in Shopify theme

Step 7: Enjoy!

Now your search bar will load quickly alongside your store!
In short, it is time for you to have a happy searching!

Impresee Search results on Shopify

And of course, don’t forget to get the most out of your search bar by making use of our Dashboard PRO feature.

Impresee Dashboard in Shopify App admin