How to add Swiftype to a Tumblr

With Swiftype, you can add a fast, modern search box to your Tumblr site. Swiftype has special support for Tumblr that allows us to index all your content accurately and completely, and gives you full-text search, not just search on tags.

Copy and paste this install code into your Tumblr theme before the closing </head> tag, then save your theme.

Step 4: Configure your search

For best results with Tumblr, choose the Overlay style.

If you don't have a search box

If you don't have a search box, you'll need to add one. First, figure out where you would like your search box.

In this example using the Papercut theme, the search box will be added to the bottom of the header.

After finding where you would like the search box to appear, choose the "My website needs a search box" option and update your configuration, then copy and paste in the code into your Tumblr theme where you'd like the search box to appear.

It will look something like this (the Swiftype code is outlined):

Save your theme, and you've added a search box powered by Swiftype!

If you already have a search box

If your theme already has a search box, choose the "My website already has a search box" option and enter the CSS selector for the search box:

form[action="/search"] input[type=text]

Save the configuration, and your search is now powered by Swiftype!

Removing Search Options

Some themes have options to search "My blog" or "All of Tumblr".

After installing Swiftype, these options will no longer work because Swiftype only searches your Tumblr site.

Therefore, you should find and remove the code that shows those options. Here is an example from the Redux theme.

Advanced Installation

Swiftype can be installed many different ways to suit your needs. Review the installation types your Search Engine's installation page.

If you can edit your Tumblr theme, you can get any of them installed by changing the given install code to match your theme.

Customizing the look

The autocomplete drop down and results display are styled in a general way that looks good across a wide range of sites. To customize their appearance, you can use CSS.

All of the elements injected into the page have CSS classes you can target by including a more specific selector. For example, to change the font of the autoselect drop down, you could add this code to your theme: