Product Dev Back to Ghost

How to add Swiftype search to your Ghost blog

Note: You will need to edit your theme files to add Swiftype. If you're not familiar with how to edit your theme, please see our guide on making theme edits here.

Creating an account

To add Swiftype to your Ghost blog you will first need to register an account with Swiftype. Once your account has been created, you will be able to create a search engine for your blog by clicking on the blue, Create an Engine button from your SwiftType dashboard.

Creating your search engine

Next, you need to select a method to create a new search engine. For Ghost, select Create a search engine to continue.

On the next screen, you'll be prompted to enter in your Ghost blog's URL. Once entered, click Verify to continue.

Next, give your search engine a name and click Create Engine.

When the setup has been completed, you should be prompted to Complete Setup.

Installing the code

On the final screen, select, Install Swiftype On Your Website to display the installation instructions.

There are two snippets of code needed to make Swiftype work on your Ghost blog. The first snippet of code displays the search input field. Place this line of code anywhere within your theme, where you'd like the search bar to appear.

<input type="text" class="st-default-search-input">  

To give life to your search bar, you need to include the Swiftype install code. You can paste this code either directly into your theme, or add it to your blog via Ghost's code injection feature.

<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/v2/st.js','_st');

  _st('install','xx_xxxxxxxxxxxxxxxx','2.0.0');
</script>  

Once this script has been added, your Swiftype search should now have what it needs to function as a proper search for your blog.

Next steps

For tips on customizing the appearance of your Swiftype search, checkout their guide on customizing visual styles.