search mobile facets autocomplete spellcheck crawler rankings weights synonyms analytics engage api customize documentation install setup technology content domains user history info home business cart chart contact email activate analyticsalt analytics autocomplete cart contact content crawling custom documentation domains email engage faceted history info install mobile person querybuilder search setup spellcheck synonyms weights engage_search_term engage_related_content engage_next_results engage_personalized_results engage_recent_results success add arrow-down arrow-left arrow-right arrow-up caret-down caret-left caret-right caret-up check close content conversions-small conversions details edit grid help small-info error live magento minus move photo pin plus preview refresh search settings small-home stat subtract text trash unpin wordpress x alert case_deflection
Swiftype Documentation / tutorials: How to upgrade to the Swiftype Search Widget Designer

How to upgrade to the Swiftype Search Widget Designer

Before mid-April 2015, configuring the appearance of your Swiftype search results required customizing the install code. The new Swiftype Search Widget Designer allows you to customize the apperance of your search results, as well as change how your search behaves without writing any code. If you are using an older version of the Search Widget install code, you can upgrade to the new Search Widget Designer install code by following these instructions.

First, determine which Swiftype Search Widget install code your site is using.

2013 Swiftype Search Widget install code

The original Swiftype install code (available until August 2014) was configured using JavaScript that you needed to modify.

This version of the install code looked similar to this:

<form>
  <input type="text" id="st-search-input" class="st-search-input" />
</form>
<script type="text/javascript">
var Swiftype = window.Swiftype || {};
  (function() {
    Swiftype.key = 'YOUR_ENGINE_KEY';

    /** DO NOT EDIT BELOW THIS LINE **/
    var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
    script.src = "//s.swiftypecdn.com/embed.js";
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
  }());
</script>

To upgrade to the Search Widget Designer, follow these instructions.

2014 Search Widget install code

The 2014 Search Widget install code (available from August 2014 until April 2015) looks similar to this:

<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');

  _st('install','YOUR_INSTALL_KEY');
</script>

Note that the path to the install is /install/v1/st.js and that no version parameter is specified in the _st function call.

To upgrade the 2014 Search Widget install code to the Search Widget Designer, follow the link in the Install tab to upgrade and follow the prompts to get your new install code. Once you have the new Search Widget Designer install code, replace your existing install code with the new code.