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: Using Swiftype with Squarespace

How to add Swiftype to your Squarespace Site

Squarespace is a web based platform that allows you to create attractive and functional websites in a snap! This tutorial will guide you through both the Overlay and New Page install methods for installing your Swiftype search box into a Squarespace design template.

What You'll Need

  • A paid plan with Squarespace (required to be able to publish your site to the public web).
  • Knowledge of HTML

Step 1: Create a Swiftype Account

You can create a Swiftype account for free, and you will use this account to control your search engine once it is installed.

Step 2: Create a Search Engine

To create your search engine, from the main Swiftype dashboard click the Create Search Engine button in the upper right corner.

Create Search Engine

From here we'll select Web Crawler as our search engine type. Next you'll be able enter the URL of your Squarespace site into the site validation field. Once the validation process completes, you'll be able to name your engine.

Create Search Engine

Now, our system will crawl your Squarespace site and create the search engine in real-time, showing you our progress along the way.

Step 3: Choose your Install Type

Once the crawl is complete, click the Install tab in your Swiftype Dashboard. From here you'll be able to select your preferred installation method.

We'll start first with the...

Overlay Method


The easiest of the two methods is the Overlay method. The most direct way to go about it is to add your javascript embed snippet to any portion of your site where you can add content, and would like a search box.

  • From the pop-up window that appears when adding a content, you'll scroll down to the MORE section and choose the </> CODE Content Block.

  • Now, in the Edit Code window that appears, paste in your embed snippet.
    HTML Code Content Block

  • Click Save, publish your changes, and voilà! You have a Swiftype powered search form on your page.

Another approach to the overlay install is to:

  • From the Overlay Install tab, copy everything between and including the <script> </script> tags. Then add this code directly to your site within the Settings → Code Injection page under the Header code injection area. Header Code Injection
    Doing this will include the code for your Swiftype search engine throughout every page of your Squarespace site.

  • Now, instead of pasting in the complete embed snippet wherever you want your search box (as shown above), you'll have to insert only the following into your </> CODE block:

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

New Page

If opting for a dedicated search results page instead of our results overlay, you can follow the default instructions within the New Page Install tab in addition to these steps:

NOTE: search is a reserved slug name in the Squarespace Layout Engine. You can configure the name of the New Page to be anything you'd like, but you will need to make sure that the link name is not search. Example pictured below.

Rename Slug

  • Add your Swiftype New Page install code snippet from Step 1 of the Install tab into a </> CODE content block in your Squarespace site.

  • Update the snippet's Swiftype.resultPageURL variable be the URL to your results page. For the example pictured above you would update the variable to /search-results

  • Add <div id="st-results-container"></div> to a </> CODE content block in the main area of your dedicated results page where you'd like your results to display.

Similar to the second Overlay install method mentioned above, you can use Header Code Injection to install your Swiftype widget script across your Squarespace site. Then add form inputs where ever you'd like your search box to appear!