How to add Expertrec Search to Squarespace Commerce

Rate this article

Share this article
Share on facebook
Share on twitter
Share on linkedin
Share on email

Expertrec’s Smart Search Bar can be added to the header in your Squarespace or Squarespace Commerce websites without any extension with below easy steps. Before going through these steps, make sure that you have signed up to Expertrec with this link.

Quick Steps

This is the demo squarespace commerce website to which we are going to add Expertrec search bar at the end of this guide.

1. Copy the API Key / Site ID

Now, lets add our search bar after the navigation menu and just before the cart icon. Once you are done with the Signup, go to the expertrec dashboard and copy your API KEY / SITE ID.

2. Add the code to your website – Done

Add the copied API key to below code on the line 7 by replacing the text ‘API_KEY_HERE’.

<!-- Adding Jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Expertrec search bar -->
<script>
/* Expertrec Integration */
(function() {
var id = 'API_KEY_HERE'; //PASTE YOUR API KEY HERE
var ci_search = document.createElement('script');
ci_search.type = 'text/javascript';
ci_search.async = true;
ci_search.src = 'https://cse.expertrec.com/api/js/ci_common.js?id=' + id;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ci_search, s);
})();
/* Inject search bar to desktop & mobile */
$(document).ready(function(){
/* REPLACE THE SELECTOR IF .header-nav DOESN'T WORK */
$('<ci-search class="er-search-bar-desktop"></ci-search>').insertAfter(".header-nav");
/* REPLACE THE SELECTOR IF .header-menu-nav-item DOESN'T WORK */
$('<ci-search class="er-search-bar-mobile"></ci-search>').insertAfter(".header-menu-nav-item:last-child");
});
<!-- style for mobile & desktop search bar -->
</script>
<style>
@media(max-width:799px){
.er-search-bar-desktop {
display:none;
}
}
.er-search-bar-mobile{
margin-top:20px;
}
</style>

Copy the above code and paste it in squarespace dashboard > Settings > Advanced > Code Injection > Header field as shown below.

Click on ‘Save’ button on the top left and you can see the Expertrec search bar installed on your squarespace website

<p style=”text-align: center;”><a class=”fasc-button fasc-size-xlarge fasc-type-glossy fasc-rounded-medium ico-fa fasc-ico-before fa-search” target=”_blank” style=”background-color: #fc2e05; color: #ffffff;” rel=”noopener” href=”https://cse.expertrec.com/?platform=cse&fr=squarespace_com_manual_guide_blog”>Start Expertrec free trial</a></p>

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

You may also like