Skip to main content

How to Install AddSearch on Your Squarespace Website

AddSearch can be integrated into Squarespace sites using the basic installation method with preconfigured views. This guide walks you through adding a dedicated search results page to your Squarespace site.

For an easier setup, consider using the Search Designer tool to customize your search results page and generate installation code.

Using Squarespace Developer Platform (Advanced)​

If you want a more customized implementation and have development experience, you can use the Squarespace Developer Platform to install AddSearch.

Create a Dedicated Search Results Page​

Squarespace does not allow adding custom search fields directly to the site navigation bar. However, you can add a dedicated search page and link it in your main navigation.

Note: Squarespace reserves the /search URL path for its built-in search feature. Avoid using this path for your AddSearch results page.

Steps to Add a Search Results Page​

  1. In your Squarespace dashboard, go to the Pages section.
  2. Click the + icon in the Primary Navigation area to add a new page.
  3. Choose Blank Page and name it (e.g., "Search" or "Search Results").
  4. On the new page, add a Code Block to the content area.
  5. Insert the search form HTML into the Code Block. Make sure the form's action attribute matches your dedicated results page URL (for example, /search.html). The input field's name attribute must match the search query parameter configured in your Search Designer (default is search).

Example search form:

<!-- Form's action must be the results page's URL -->
<form method="get" action="/search.html">
  <!-- Search field's name must match your Search Designer's query parameter (default: 'search') -->
  <input type="text" name="search" placeholder="Search" />
</form>

If your site already has a search form, you may only need to update the name attribute to match the query parameter.

Add Search Results Page Script​

  1. Use the Search Designer tool to customize your search results page settings.
  2. Copy the generated installation script from the tool.
  3. Paste the script snippet into the Code Block on your dedicated search results page.

Example script snippet:

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

Replace xxxxxx with your AddSearch site key.

Additional Notes​

  • Review the Basic Installation guide for other ways to install AddSearch.
  • Squarespace disables scripts while in editing mode. To test your search implementation, preview your site in safe mode, log out, or open the site in an incognito/private browser window.
  • To add the newly created search page to your navigation menu, see the Squarespace guide on Adding pages to your navigation.

If you encounter any issues or need more advanced features, consider the Squarespace Developer Platform integration mentioned above.