Add Swiftype search

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Implement Swiftype on your Shopify store and provide a richer search experience for your visitors.

What this customization achieves

This customization integrates the Swiftype service in your store. Swiftype allows extremely fine-tuned control over search results, product ranking for individual searches, search analytics, and more.

You can view the full demo site for this article at http://swiftype.myshopify.com.

Where to get help

If you have problems with this customization, try posting a question on the Shopify forums. For issues and questions about Swiftype, contact Swiftype Support.

Implementing this customization

This is a multi-part tutorial. Follow the instructions carefully:

  1. Register for an account with Swiftype
  2. Add metatags to your theme
  3. Exclude content from searches
  4. Create your search engine
  5. Edit the search forms
  6. Edit the Swiftype include script
  7. Customize the styling

Obtaining a Swiftype account

  1. Visit the Swiftype site and register for a free account (for greater benefits you might want to get a paid account in the future.) Just click on CREATE A FREE ACCOUNT and add your email and password information.

    Swiftype signup
  2. Add your account information, then check your email and confirm your account.

  3. Once you have your account set up, you'll be invited to create your first search engine, but it's important that you pause before doing this.

    Do not create the search engine at this stage, but stop as soon as you see this screen:

    Swiftype enter url1
  4. Open a new browser tab and go to the admin of your Shopify store.

Adding metatags to your Shopify theme

Before you create your search engine, you need to add some metatags to your theme so the crawler can gather better information about your products:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click theme.liquid to open the file for editing.

  4. Copy the following metatags to get you started (you might want to adjust these over time to better suit your own needs.)

    Note

    Product results are by far the most important to suggest, so here you're setting the priority to 2 (the default is 1).

    
    {% if template contains 'product' %}
    <meta property='st:title' content='{{ product.title | strip_html | escape }}' />
    <meta property='st:section' content='{{ product.description | strip_html | escape }}' />
    <meta property='st:section' content='{{ product.vendor | strip_html | escape }}' />
    <meta property='st:section' content='{{ product.type | strip_html | escape }}' />
    {% for tag in product.tags %}
    <meta property='st:section' content='{{ tag | escape }}' />
    {% endfor %}
    <meta property='st:image' content='{{ product.featured_image | product_img_url: "medium" }}' />
    <meta property='st:popularity' content='2' />
    {% endif %}
    
    {% if template contains 'collection' %}
    <meta property='st:title' content='{{ collection.title | strip_html | escape }}' />
    {% if collection.image %}
    <meta property='st:image' content='{{ collection.image | collection_img_url: "thumb" }}' />
    {% endif %}
    {% endif %}
    
    
  5. Paste this block of metatags into the <head> section of your theme.liquid file, just before the closing tag:

    Closing head theme liquid
  6. Click Save.

Excluding content from searches

The next step is excluding content from your site crawl.

To exclude content from being crawled, Swiftype has a data attribute that you can add to blocks of content throughout your shop. The attribute looks like this:

data-swiftype-index="false"

Excluding portions of your site from being crawled takes some detective work and time. It might take several recrawls of your site to get this part completed to your satisfaction, and you shouldn't expect it to be perfect the first time.

What to exclude

Go through your theme and think about what you'd like to be indexed and what you might not.

You're likely to want to exclude the following content from searches:

  • header
  • footer
  • navigation
  • portions of your product template including the product form.

Example

As an example on our testing site, we wanted to exclude the navigation. It was in the header section of the template so we added the data-swiftype-index="false" attribute to the header tag in our theme:

<header data-swiftype-index="false">

To exclude the sidebar from indexing we changed this:

<div id="sidebar" class="three columns">

to this:

<div data-swiftype-index="false" id="sidebar" class="three columns">

Creating your search engine

When you've added your metatags and you're happy with your exclusions, you can create your search engine and get your first site crawl.

Note

Make sure that your Shopify store is not password protected, or the crawler will not be able to index your products and site content.

  1. Return to Swiftype in your other browser tab, and continue with the creation of your search engine. For your search engine method choose Web Crawler.

    Swiftype enter url
  2. You'll be asked to verify your website so Swiftype knows you're the owner. Type in your URL and click VERIFY.

    Swiftype verify url
  3. Give your engine a name (anything you like), then click INDEX MY WEBSITE. Your site will immediately be crawled.

Depending on the size of your shop, the initial site crawl may take a little while.

Editing the search forms

Take your time in this section and follow each step carefully.

Swiftype uses its own form code and a small javascript include to pull the results from their servers. When your first site crawl is complete, the INSTALL tab in your Swiftype account panel becomes active, and you'll see the Swiftype form code and script to include in your store.

Swiftype7
  1. Copy all the code under the INSTALL tab in your Swiftype account panel window. This is the code you'll add to your theme.

  2. Head back to your Edit HTML/CSS page and find your search form in the theme.liquid template. Press ctrl + F on a PC or command + F on a Mac and do a quick search in your template for the term search. This should find your main search form or get you very close.

    Swiftype find search
  3. Once you find your search form, wrap it with a comment tag:

    
    {% comment %}
    <form action="/search" method="get" class="search-form" role="search">
    <input type="hidden" name="type" value="product" />
    <input type="submit" id="search-submit" class="icon {% if settings.light_search_icon %}light{% endif %}" />
    <input class="search" placeholder="Search" name="q" type="text" id="search-field"  />
    </form>
    {% endcomment %}
    
    
  4. Below your old form code, paste the entire block that you copied from the Swiftype install tab:

    Swiftype paste code
  5. The Swiftype form code is quite simple and will look like this:

<form>
<input type="text" id="st-search-input" class="st-search-input" />
</form>

You should edit this to match the default form from your shop, so you can retain the styles and behaviors that were built into it for your theme.

Tags for id, class, and role

If your form has an id, or class or role, you must apply it to the Swiftype form tag:

<form class="search-form" role="search" >
<input type="text" id="st-search-input" class="st-search-input" />
</form>

If your search input has a class, you must also add this to the Swiftype input. You can see that we added the extra class of search from our theme below simply by adding it before the class provided by Swiftype:

<form class="search-form" role="search">
<input type="text" placeholder="Search" id="st-search-input" class="search st-search-input" />
</form>

Buttons and icons

If your form has additional elements such as a submit button or icon, you must add these to the Swiftype form code as well. This might take a little time.

In our example from the Simple theme, there's an icon that's also used as a submit button so we need to add that back to the new form:

<form class="search-form" role="search">

And to add back the search icon:


<input type="submit" id="search-submit" class="icon {% if settings.light_search_icon %}light{% endif %}" />
<input type="text" placeholder="Search" id="st-search-input" class="search st-search-input" />
</form>

When you've edited the form to match your theme's form, you might want to inspect and test the new search form on your site:

Swiftype testing the form

At this point, you might want to remove any links to your search page. As an alternative, you can edit the Swiftype script and your search.liquid template a little, so that you have seamless searching on your /search page. This will ensure a smooth workflow for your site visitors.

Editing search.liquid to include Swiftype support

To add the search form from Swiftype to your search.liquid template:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click on search.liquid and find the search form block.

  4. Once again, you'll be replacing this with the form and results container that you got from Swiftype. You won't need to include the script again, because it's already included in your theme.liquid template. In our demo shop, we've replaced the existing search form with the one from Swiftype. You might need to edit this again to match classes as called for in your theme.

    Note

    You must adjust the id of the search form and the search results container. We've changed our example by simply appending -search to the end of each, to indicate that these are reserved for the search page.

    The search results container from Swiftype had an id of st-results-container which we changed to st-results-container-search. Do this for both the form id and class, and the search results container.

    <form>
    <input type="text" id="st-search-input-search" class="st-search-input-search" />
    </form>
    <div id="st-results-container-search"></div>
    

Once you have replaced the theme's search form with the Swiftype one, and added the results container div, you can go back to your index.liquid template to make a few changes to the Swiftype script.

Editing the Swiftype include script

To account for the new form and results area that you created in your search.liquid template:

  1. In your Swiftype script, locate the line that reads something like this:

    Swiftype.key = 'pgyspWiYhEisqnrqU2EK'.
    
  2. Replace everything below that line with the following:

    
    Swiftype.inputElement = '#st-search-input';
    Swiftype.additionalInputElements = ['#st-search-input-search'];
    
    {% if template == 'search' %}
    Swiftype.resultContainingElement = '#st-results-container-search';
    {% else %}
    Swiftype.resultContainingElement = '#st-results-container';
    {% endif %}
    Swiftype.attachElement = '#st-search-input';
    {% if template == 'search' %}
    Swiftype.renderStyle = "inline";
    {% else %}
    Swiftype.renderStyle = "overlay";
    {% endif %}
    
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = "//swiftype.com/embed.js";
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
    }());
    </script>
    
    
  3. Save your changes.

  4. Go to your store's website and test the search page to make sure everything works.

Styling

Swiftype offers full styling through CSS hooks. For more on styling your form or search results, visit: https://swiftype.com/documentation/tutorials/custom_styles

Refining and reindexing

Swiftype is a very powerful tool, one that given some tweaks can really make a difference to how your customers find products on your site. Visit your Swiftype admin panel often, check the analytics to see what visitors are searching for, and then tweak the search results to better serve them.

Make sure that you reindex when you add new products. If you don't reindex, it may take a while for the new products to show up in your search results. Recheck your excludes after you index the first few times. You might find other areas that you want to remove from search results. Like most services that offer a great deal of power, you need to be involved with your account to get the most value from it.

Swiftype conclusion

Want to discuss this page?

Visit the Shopify Community