Instant Search Widget doesn’t appear when BigCommerce pages load

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 Searchanise 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.

    Instant Search Widget doesn't appear when BigCommerce pages load

    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="//searchserverapi.com/widgets/bigcommerce/init.js?api_key=[api_key]"></script>

    Important info

    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. Instant Search Widget doesn't appear when BigCommerce pages load

  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.

    Instant Search Widget doesn't appear when BigCommerce pages load

  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.

    Instant Search Widget doesn't appear when BigCommerce pages load

  3. Go through the prompts.

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

Updated on October 23, 2023

Was this article helpful?

Related Articles

Back to top