How to Install Justuno on Bigcommerce Blueprint Themes

Instructions for installing Justuno on Bigcommerce store equipped with a Blueprint Theme (in lieu of a Stencil Theme)

If you are using a Stencil theme please use this article

At a Glance:

1. Troubleshooting Tips

2. Video

3. Instructions

Troubleshooting Tips:

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. 

 

Video:

Here is a short video on how to install your basic Justuno embed code on your Bigcommerce site:

 

 

Instructions:


1. Go to your Bigcommerce store and find the apps section on the left then hit marketplace. Search for Justuno in the search bar on the left hand side.

search Justuno in Apps



2. Once in the Justuno page hit install and walk through the set up. If you have an account associated with Justuno already a prompt will occur asking you to enter in your password. If you'd like to create a new account use Option 2.

use or create an account



3. When you are logged into your Justuno account head to the settings section on the left and find the embed code tab. Then highlight and copy the embed code

find the embed code in dropdown menu
Embed code section


4. Go back to your Bigcommerce dashboard and find Storefront Design. Under Design Options head to the themes tab and click HTML/CSS options

Edit HTML/CSS in themes section



5. 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.

find footer.html



6. 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.

Where embed code should go




7. (optional but recommended): Please follow the below instructions to enable visitor cart tracking for use with promotion rules and personalization.

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>
Find CartItem.html

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>
Cart code image

 

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>​
Other template files

 

 

8. (optional but recommended): Please follow the below instructions to enable conversion tracking for use with promotion rules and analytics.

Copy the following code into the "Advanced Settings" > "Affiliate Conversion Tracking" section of your Bigcommerce dashboard underneath the code you just copied from above.

<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>

 

affiliate conversion tracking