How to Install Justuno on Bigcommerce Blueprint Themes

Instructions for installing Justuno on Bigcommerce stores with a Blueprint Theme

At a Glance:

Introduction

Instructions for General Embed code

Adding the cart code

Adding Cart Conversion tracking script

Adding to mobile template

FAQ

Last updated 9/1/2021

Introduction

BigCommerce has two main frameworks for their themes. Blueprint and Stencil, the latter being the default now. For those still using the legacy Blueprint framework, the Justuno app will not automatically install on the site. This guide will go over how to add Justuno into your Blueprint theme.

If you are using a Stencil theme please use this article

Instructions for General Embed code

Enter the BigCommerce app Marketplace and search for the Justuno app to install it. Only the BigCommerce store owner will have access to install a new app. A guide on installing apps can be found here: Installing an app within the BigCommerce app Marketplace
You will then be prompted with the create account form.
1. If you already have an account, please click 'sign in' at the bottom and you can get logged in with your existing Justuno credentials.
When you are logged into your Justuno, click the settings section located in the bottom left hand corner and select 'embed code'
1. Copy the embed code found on the top part of the page. Here is a guide on how to find your embed code: Justuno general embed code install
Go back to your Bigcommerce dashboard and find Storefront Design. Under Design Options head to the themes tab and click HTML/CSS options
Once you are in the html editor head to the left hand side and in the upper section scroll down till you find footer.html
Paste the embed code on the bottom of the footer html page. Hit save and your all set! You can now use the app store to get into your Justuno Dashboard! Important note: Deleting your app within Bigcommerce does not cancel your account! You must walk through canceling your account within Justuno to ensure that billing will stop.

Adding the cart code

This is not required to get Justuno working but to get the most out of the platform it is recommended. By adding this you can make the most of our advanced rules for more in depth segmenting: Cart and Past order Rules | Justuno

Copy the following code into the template snippet called CartItem.html

<script type="text/javascript">

// Justuno related cart capture code

var ju_cart_arrary = ju_cart_arrary || [];

var juitem_pid = %%GLOBAL_ItemId%%;

var juitem_pr = parseFloat(('%%GLOBAL_ProductPrice%%').replace('$',''));

var juitem_prtotal = parseFloat(('%%GLOBAL_ProductTotal%%').replace('$',''));

var juitem_qty = Math.ceil(juitem_prtotal/juitem_pr);

var juitem_nm = "%%GLOBAL_ProductName%%";

ju_cart_arrary.push({ itemid: juitem_pid, quantity: juitem_qty, price: juitem_pr, name: juitem_nm });

</script>

Copy the following code into the template file called Cart.html

<script type="text/javascript">

var ju_cart_arrary = ju_cart_arrary || [];

window.juapp=window.juapp||function(){(window.juapp.q=window.juapp.q||[]).push(arguments)}

juapp(

'cartItems', 

'', 

ju_cart_arrary

);

</script>

If you are using the "Show Cart Suggestions" feature in your Bigcommerce store.

Copy the following code into the template file called FastCartThickBoxContent.html located in the Snippets folder.

<script>

window.juapp=window.juapp||function(){(window.juapp.q=window.juapp.q||[]).push(arguments)}  

try {

    

    // first parse the img html to get item ID

    var ju_item_img_html = '%%GLOBAL_fastCartProdImg%%';

    var ju_item_name_html = '%%GLOBAL_fastCartProdLink%%';

    var juitem_pid = ju_item_img_html.substring(ju_item_img_html.lastIndexOf("/products/") + 10, ju_item_img_html.lastIndexOf("/images/"));

    var juitem_nm = ju_item_name_html.replace(/<[^>]+>/g, '');

var juitem_qty = %%GLOBAL_fastCartQuantity%%;

var juitem_pr = parseFloat(('%%GLOBAL_fastCartProdTotal%%').replace(/[^\d.-]/g, ''))/juitem_qty;

    juapp(

      'cartItemAdd',

      juitem_pid,

       {

        name:juitem_nm,

        quantity:juitem_qty,

        price:juitem_pr

       }

    );

} catch(e){}

</script>

Adding Cart Conversion tracking script

Copy the following code into the Affiliate Conversion Tracking section of your BigCommerce store in order for us to track conversion and enhance the promotions analytic data. This is not required but is recommended to get the most out of the Justuno app: Setting up Conversion and Affiliate Conversion Tracking | BigCommerce

<script type="text/javascript"> 

window.juapp=window.juapp||function(){(window.juapp.q=window.juapp.q||[]).push(arguments)}

juapp(

'order',

'%%ORDER_ID%%',

{total:%%ORDER_AMOUNT%%,subtotal:%%ORDER_SUBTOTAL%%,currency:'USD'}

); 

</script>

Adding Justuno to mobile templates

Not all Blueprint templates are mobile responsive by default. These themes will have a separate mobile theme that will also need to be modified. The drawback of this mobile theme is that any HTML/CSS that has been added to the desktop version of the theme is not carried over to the mobile theme automatically.

Directions

Log into your Justuno account and copy the general embed code.
Head to your Bigcommerce dashboard and under Storefront Design and design options find the mobile tab
Follow this guide to access and edit your Blueprint mobile template: Blueprint themes | BigCommerce
Open the Footer.html within a text editor
Paste in the Justuno embed code at the bottom of your footer template file
Upload the footer.html file back into your BigCommerce theme
Hit save and you're set!

FAQ

Why am I still seeing the message "No conversion tracking code found on site"?

If the embed code is not detected within Justuno, please refresh your dashboard and the notification will go away! It can take up to 24 to 48 hours for the code to be detected.

It will also persist if there are no conversions associated with the promotion within the specified time frame.

How do I install in Stencil?

For stencil themes, you will only need to add the Justuno app within the BigCommerce app marketplace and this will install Justuno along with the cart code and conversion tracking automatically! No additional steps will be needed
More details can be found here: Installing Justuno on a BigCommerce Stencil theme

I cannot install the Justuno app within BigCommerce

Make sure that the user that is trying to install the app is logged in as the owner as only the owner can install a new app in BigCommerce
Try clearing your cache or opening again in an incognito window as sometimes this will cause app installation issues. You may also try to login a different browser and see if this will install the app successfully.