How to add Expertrec Search to Squarespace Commerce

Rate this article

Share this article

Adding Expertrec’s smart search bar to Squarespace websites is easy. Below are 2 easy steps with screenshots that guide you on how to add a search bar to Squarespace websites in just 5 minutes.

Quick Steps

Below is the view of the demo Squarespace commerce website homepage we are going to use for this tutorial that doesn’t have a search bar. Let’s add the Expertrec search bar just before the cart icon in the header.

1. Copy the code from the dashboard

Login to Expertrec or if you have not signed up yet, you can signup from here. Go to ‘Install code’ section in Expertrec dashboard, you should now see the below view.

In the ‘Install code’ section, select ‘CSS SELECTOR’ tab, add the selector ‘.header-nav’ in the input field, click on update and copy the code.

2. Paste the code to your website

Now, go to the Squarespace dashboard of your website where you are installing Expertrec search bar, go to Settings > Advanced > Code Injection > Header field. Now you should see a view like below, add the code copied from step 1 of this tutorial in the ‘Header field’.

Click on the ‘Save’ button on the top left corner of the Squarespace dashboard and reload your website. You can now see the Expertrec search bar on your Squarespace website.

Note: If it didn’t work, you can try replacing the CSS Selector that you added in step one in the Expertrec dashboard with ‘.header-menu-nav-item:last-child’ or a custom CSS Selector of your theme’s header menu.

Start Expertrec free trial

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like