Setting up Smart navigation through BigCommerce categories for Stencil themes

In this article, you’ll learn how to set up Smart Navigation for Stencil themes used in new BigCommerce stores by default. If you use a classic Blueprint theme, you should look for the appropriate instructions here.

Steps:

  1. Go to BigCommerce admin panel > Storefront > Themes > Current theme.
  2. Make a copy of the current theme to create a backup. It will help you revert the changes if necessary.

    Setting up Smart navigation through BigCommerce categories for Stencil themes

  3. Click the Advanced drop-down menu of the current theme to view the list of actions.
  4. Select Edit Theme Files and the Theme Editor will open.

    Setting up Smart navigation through BigCommerce categories for Stencil themes

    Important info

    If you don’t see the Edit theme files option, you have a default theme from the marketplace. To edit the theme code you’ll 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.

  5. Open the templates/pages/category.html file in the Theme Editor.
  6. Find the code for displaying categories between the {{#partial "page"}} and  {{/partial}} tags.

    The code displaying a collection

  7. Copy and paste the following Searchanise code instead (you should leave the category name, category image, category description, and breadcrumbs code untouched):

    <div class="snize" id="snize_results"></div>
    
    <style type="text/css"><!--
    /* Load spinner */
    #snize-preload-spinner {
        height: 100px;
        width: 32px;
        margin: 0 auto;
        background-position: 0px center;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,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);
    }
    --></style>
    
    <script>// <![CDATA[
    (function(window, undefined) {
        var sXpos = 0, sIndex = 0, sTotalFrames = 12, sInterval = null;
    
        if (document.getElementById('snize_results').innerHTML != '') {
            return;
        }
    
        document.getElementById('snize_results').innerHTML = '<div id="snize-preload-spinner"></div>';
        sInterval = setInterval(function()
        {
            var spinner = document.getElementById('snize-preload-spinner');
            if (spinner) {
                document.getElementById('snize-preload-spinner').style.backgroundPosition = (- sXpos) + 'px center';
            } else {
                clearInterval(sInterval);
            }
    
            sXpos  += 32;
            sIndex += 1;
    
            if (sIndex >= 12) {
                sXpos  = 0;
                sIndex = 0;
            }
        }, 30);
    }(window));
    // ]]></script>
    Tip

    The theme code varies from one theme to another. If you are not sure where to paste the Searchanise code, don’t hesitate to contact us. We will be happy to assist.

  8. Click the Save & Apply file button and confirm the action to save the changes.
  9. Go to the Searchanise control panel > Smart Navigation section.
  10. Select the Navigating through embedding HTML code into the BigCommerce template option.
  11. Select the suitable option in the Category Product List depending on whether you want to display products from the current category only or display products from its subcategories as well.
  12. Apply the changes.

That’s it. The Smart navigation feature is now set up on categories pages in your BigCommerce Stencil theme.

Important info

If the content of categories pages loads slowly after installing Smart Navigation, we recommend you accelerate the loading of the app’s scripts using this guide.

If you have any trouble setting up Smart Navigation, you can contact us. We will be glad to help.

Enjoying your experience with Searchanise?

We’d appreciate it if you could take some time to leave a review.

Updated on June 22, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Back to top