AddSearch can be installed on Squarespace sites using our basic installation method for readymade views. If you would like to create a dedicated search page on your Squarespace site, we recommend using the Separate Results Page view. For easy implementation check out the Search Designer tool.

For advanced Squarespace users seeking a more customized implementation, it is possible to install AddSearch with the Squarespace Developer Platform.

Search Result Page installation on Squarespace

While it’s not possible to add a search field to the Squarespace navigation, a dedicated search page can be added as a navigation link. To read more about how to do this, visit the Squarespace help guide.

Note: Squarespace reserves the /search path for its built-in search feature.

To create a dedicated search page, click the + icon in the Primary Navigation section of your Squarespace dashboard and create a blank page. On this page, add a Code Block to the Content Area. Please note that the form’s action parameter needs to match your results page’s URL. In this example the URL is “/search.html”:

From here, you can add the Results page code:

<!-- Form's action must be the results page's URL -->

<form method="get" action="/search.html">
<!-- Search field's name must be the same as the search query parameter entered in the Search Designer. The default name is search. -->
<input type="text" name="search" placeholder="Search" />
</form>

 

If you already have a form that submits the search query, you might only need to change the name attribute of the form or even keep it untouched if the name is correct.

Use our Search Designer tool to configure the results page according to your needs and copy the installation script. Then paste the script to your results page. Here is an example of how the script snippet might look like:

<script> 
window.addsearch_settings = { 
"asw_01": { 
"results_box_opening_direction": "right", 
"show_search_suggestions": false, 
"search_suggestion_position": "left", 
"default_sortby": "relevance", 
"analytics_enabled": false, 
"automatic_filter_results_by_site_language": false, 
"display_date": false, 
"display_meta_description": false, 
"display_result_image": true, 
"link_target": "_self", 
"hide_logo": false, 
"direction": "ltr" 
} 
} 
</script> 
<script src="https://cdn.addsearch.com/v4/addsearch-ui.min.js?key=xxxxxx&id=asw_01"></script>

Where the xxxxxx placeholder should contain your sitekey instead.

For more installation options, visit our Basic Installation guide.

Note: While in editing mode, Squarespace will disable the script, but you can preview it in safe mode. You can see it in action by logging out or visiting your site in another or incognito browser.

Was this helpful?

Need more help?

We’re always happy to help with code or other questions you might have. Search our documentation, contact support, or connect with our sales team.