Updating Your BigCommerce Code for Stencil - Groove Commerce App Support

Adding HubSpot & BigCommerce Integration code to your cart and checkout template

Step 1 - Add Tracking Code to Footer Scripts

In Your Admin, Paste the Following in Storefront > Footer Scripts:

<script> window.Hubshoply = {}; Hubshoply.customerEmail = "{{customer.email}}"; (function(d,s,i) { if (d.getElementById(i)){return;} var n=d.createElement(s),e=d.getElementsByTagName(s)[0]; n.id=i; n.src='https://bigcommerce.hubshop.ly/shops/xxx.js'; e.parentNode.insertBefore(n, e); })(document,"script","hubshoply"); </script>

You will need to copy the unique identifier out of your old code and replace the 'https://bigcommerce.hubshop.ly/shops/xxx.js' link with your unique version which is available on My App HubSpot & BigCommerce Integration page on BigCommerce.

Step 2 - Add Abandoned Cart Tracking Tags

You Then Paste the Following Code in the cart.html Template:

{{#each cart.items}}<script type="application/vnd.hubshoply.cartItem"><img src="{{getImage image 'productthumb_size' (cdn ../../theme_settings.default_image_product)}}"/></script>{{/each}}

Step 3 - Add Tracking Code to Checkout Templates

Optimized One-Page Checkout

When using the BigCommerce Optimized One-Page Checkout edit the checkout.html template file and place the following scripts below the '{{{ checkout.checkout_content }}}' call.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Custom One-Page Checkout (Blueprint Checkout)

When using the BigCommerce Custom One-Page Checkout (for developers), also known as their legacy checkout, navigate to template editor in the admin via Storefront Design > Design Options > More > Template Files. From here, click on the three dots to the right of the file called checkout_express.html, and then click 'Edit'. Paste the following code before the closing 'body' tag. Additionally you must also place this code on the order.html template file before the closing 'body' tag found in Storefront Design > Design Options > More > Template Files.