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.
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.
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...
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.
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>tags. Then add this code directly to your site within the Settings → Code Injection page under the Header code injection area.
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
<form> <input type="text" id="st-search-input" class="st-search-input" /> </form>
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:
- From within the Squarespace Content Manager select Add Page → Create New Page → Page
searchis 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.
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.resultPageURLvariable be the URL to your results page. For the example pictured above you would update the variable to /search-results
<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!