Getting Started
About Stencil
Transitioning to Stencil
Installing Stencil
Authentication & Tokens
Running Stencil Locally
Advanced Installation Options
Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars and Stencil
Handlebars.js Overview
Handlebars Helpers
Stencil Object Model
Stencil Objects

Testing and Debugging Your Theme

Testing and Debugging Your Theme

The Stencil framework provides built-in debugging tools to aid in your custom front-end development. When you want to see what data is available on the page you are working on, you can simply add the debug query string to your store’s localhost URL. Here is an example:


This will return a list of all the objects available on the page, in JSON syntax.

If you want to view the available JSON objects and rendered page at the same time, simply change the debug value to bar. Here is an example:


Using Browsersync to Render the Store on Desktop/Tablet/Mobile for Testing

The Stencil framework uses Browsersync to help you rapidly test your storefront themes across devices of different viewports. After you launch Stencil with stencil start, your console window will display several IP addresses below the BigCommerce “B”.

                    `......`   `+ddddddd
                    -ddddddh-    ddddddd
                `   .yyyyyyo.  `+ddddddd
              .o/    `````    :ydddddddd
            -ohd+   `//////:` `.sddddddd
          -sdddd+   -ddddddds   `hdddddd
        :sdddddd+   .sssssso-   `ddddddd
      :ydddddddd+              -yddddddd

BigCommerce Stencil

[BS] Proxying: http://localhost:4001
[BS] Access URLs:
      Local: http://localhost:4000
         UI: http://localhost:3001
UI External:
[BS] Watching files...

Note the External IP address. You can copy/paste this URL to access the Browsersync server from multiple devices. Then, watch as scrolling and other actions sync up across devices. (Note: Firewalls and other security measures might interfere with this feature.)

To maximize the adoption of your themes, we recommend that you use such testing to design responsive themes that display and function well across multiple viewport sizes.