Instant search widget doesn't appear on page load Print

Modified on: Wed, Nov 10, 2021 at 12:44 PM


If you have a Stencil theme, there is a chance you may experience a problem with loading the Searchanise widgets. As they are loaded only after the whole page is loaded, sometimes the Searchinise widgets may not be displayed right after the page is opened.

To load the widgets faster, you can insert the Searchanise widgets' code into the theme template. To do that, follow these steps:

  1. Go to the BigCommerce admin panel > Storefront > MyThemes.
  2. Open the Advanced drop-down menu of the current theme. A list of actions for the theme will appear.
  3. Select the Edit Theme Files option. You’ll be redirected to the Theme Editor
    Note
    If you don't see the Edit theme files option in the list, that means you have a default theme from the marketplace. To edit theme code you need to make a copy of it and apply the copied theme to your storefront. 
    Copied themes are considered custom themes and will not receive Marketplace Theme Updates.
  4. Open the templates/layout/base.html file there and insert the following Searchanise widgets' code before the closing </head> tag:
    <script src="//www.searchanise.com/widgets/bigcommerce/init.js?api_key=[api_key]"></script>
    Important
    Replace [api_key] with the API Key of the Searchanise engine for your store. You can find it in the Searchanise control panel > Dashboard section
  5.  Click the Save & Apply file button and confirm the action to save the changes.

That's it. You can go to your storefront and check how the widgets work.

Making a theme copy

  1. Go to the BigCommerce admin panel > Storefront > MyThemes.
  2. Open the Advanced drop-down menu of the current theme. A list of actions for the theme will appear.
  3. Select the Make a Copy option. 
  4. Enter a Theme name and click the Save a copy button. The process of copying will start. It may take a few seconds.

That's it. You now have a copied version of your theme. Next, you should apply it to your storefront.

Applying a theme to storefront

  1. Go to the copied theme in the My Themes section.
  2. Click the action button > Apply. 
  3. Go through the prompts.

That's it. The copied theme is live, and you can edit its code.



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.