Knowledge Base

Bigcommerce Stencil Snippets

It's been some time that Bigcommerce has added to their themes the new Stencil templates. These templates need different codes (snippets) than the old ones - Blueprint templates. Bellow you will find them but also, if you are just starting, you will find them in your Soundest account. Please go to Campaigns > Create Campaign > Reach step Content > Click on Start Picking and you will get the modals with the codes. 

IMPORTANT: if you are changing template, you will need to add our snippet again. Do not add both snippets at once (Blueprint and Stencil), neither of them will work in such case. 

1. Add the code to Scripts tab in your Bigcommerce store

In order to use Product Picker or Soundest forms, add (or replace if you have already added it) the following code to your store's Stencil template. 

1. Copy the script below:

<div id="soundest-container"></div> 
<script type="text/javascript"> 
    // SOUNDEST-V3-1 
    // Do not remove these comments, they are super important! 
    window.SOUNDEST = window.SOUNDEST || {}; 
    SOUNDEST.shopID = "XXXXX"; 
    SOUNDEST.shopType = "bigcommerce"; 
    SOUNDEST.baseURL = ""; 
    SOUNDEST.version = new Date().toISOString().slice(0, 13);
    SOUNDEST.snippetVersion = 3;
    SOUNDEST.productID = "{{#if product}}{{}}{{/if}}"; 
    // Launcher 
    (function(e,t){try{if(e.length>0&&t.length>0){var n=document.createElement("script");n.type="text/javascript";"soundest-launcher";n.src=e+"inshop/bigcommerce-launcher.js?v="+t;var r=document.getElementById("soundest-container");r.parentNode.insertBefore(n,r)}}catch(c){}})(SOUNDEST.baseURL,SOUNDEST.version); 

You need to change "XXXXX" to you store id. You can find your id in the address bar when you are logged in to your store control panel.

Bigcommerce Snippet

2. Go to Storefront Design > Design Options , then click the Scripts tab.

3. Paste the script into the text area labeled Footer. If you have more than one script there, paste Soundest script below them, then click Save.

2. Add Sales Tracking code to Scripts tab above Google Analytics script

In order to enable sales tracking features, add (or replace if you have already added it) the following code above Google Analytics script.

1. Copy the script below:

<script type="text/javascript"> 
    // SOUNDEST-V3-2 
    // Do not remove these comments, they are super important!
    window.SOUNDEST = window.SOUNDEST || {}; 
    SOUNDEST.shopID = "XXXXX"; 
    SOUNDEST.shopType = "bigcommerce"; 
    SOUNDEST.eventsHost = ""; 
    // Sales 
    !function(e,t,n,a,o){try{if(window.location.pathname.match("finishorder")&&e.length>0&&t.length>0&&n.length>0){if(a=a.match(/[0-9]+/)?a.match(/[0-9]+/)[0]:"",0===a.length)if("undefined"!=typeof o){var r=o._addTrans;o._addTrans=function(e){a=e,r.apply(this,arguments)}}else window.pageTracker={_addTrans:function(e){a=e},_addItem:function(){},_trackTrans:function(){}};window.onload=function(){if(0===a.length)for(var o=new RegExp(/pageTracker\._addTrans\(\s+\'([0-9]+)\'/m),r=0;r<document.scripts.length;r++)if(""!==document.scripts[r].text){var i=document.scripts[r].text.match(o);if(i){a=i[1];break}}if(a.length>0){var d=document.createElement("img"),s=["timestamp="+(new Date).getTime(),"shopBaseURL="+window.location.protocol+"//"+window.location.hostname+"/","shopID="+e,"shopType="+t,"orderID="+a,"source=jsPixel"];d.src=n+"events/saveNewsletterOrder/?"+s.join("&"),document.body.appendChild(d)}}}}catch(i){}}(SOUNDEST.shopID,SOUNDEST.shopType,SOUNDEST.eventsHost,"%%GLOBAL_OrderId%%",window.pageTracker); 

2. Go to Advanced Settings > Web Analytics , then open the Google Analytics tab. If you do not see that tab, enable Google Analytics Package in Providers list (in that very same page) and click Save.

3. If Google Analytics (GA) tracking code is already added there, paste Soundest sales tracking code above GA tracking tag. Placing it below GA code will break the implementation.

3. Verify the codes

Please, make sure that the Store, where the Stencil template is used, is live before you Verify the codes, otherwise you will receive an error message, even though the snippet is embedded correctly.

If you are entering the codes from the modal in the Product Picker, please click the button Verify and Soundest will check whether you have added all codes correctly. If you have entered them manually, please contact our support team.

For Blueprint template codes please click here.

Which theme platform do you have: Stencil or Blueprint?

Was this article helpful?
Yes No
Thank you for your feedback!