Theme customizations using ShipScout data

You can access ShipScout information about the current customer using the ShipScout JavaScript SDK. This is useful for updating shipping related copy throughout your shop.

Include the following JavaScript wherever you'd like (we recommend somewhere before the closing </head> tag). It will execute as soon as ShipScout has loaded and will inform you on which test the current user is in.

<script>
window._shipScout = window._shipScout || [];
_shipScout.push(function (response) {

    /*
        example response object
        {
            testId: 1,
            testType: 'threshold',
            variant: 'B',
            threshold: true,
            thresholdCents: 5000,
            thresholdMetRateAmountCents: 0,
            shippingPriceCents: 1000,
            lineItemProperty: 0467e6f7-8d66-4610-a939-da76dd9f7a68_1_B
        }
    */
    
    //apply any exchange rates to currency if necessary
    var thresholdCents = (window.Shopify && Shopify.currency && Shopify.currency.rate) ? response.freeShippingThresholdCents * Shopify.currency.rate : response.freeShippingThresholdCents;
    var flatrateCents = (window.Shopify && Shopify.currency && Shopify.currency.rate) ? response.shippingPriceCents * Shopify.currency.rate : response.shippingPriceCents;

    
    //format currency
    var currencyFormat = ShipScoutGetCurrency();
    
    //get threshold amount with currency symbol
    var thresholdAmount = ShipScoutFormatMoney(thresholdCents, currencyFormat);

    //get flat rate amount with currency symbol
    var flatrateAmount = ShipScoutFormatMoney(flatrateCents, currencyFormat);

    //==== insert your code below to dynamically update elements ====//

    //example updating an element on the page dynamically with the threshold amount
    var el = document.getElementById("foo-bar");
    
    if(response.freeShippingThresholdCents === 0) {
        el.innerHTML = "FREE!";
    } else {
        el.innerHTML = thresholdAmount;
    }
    
});
</script>

Here's a description of the properties and values to expect in the response object.

If there's no test live but you do have a Default Shipping Rate set in ShipScout the rate settings will still be returned by the JS SDK. The following 3 properties will be null however: testId, testType, and variant.

You can append ?shipscout_preview=yes to any URL on your website to test your SDK integration without a live test. Appending this URL will simulate these hard-coded values for the SDK:

testType: 'threshold',
threshold: true,
freeShippingThresholdCents: 0,
testId: 'preview',
variant: 'A',
shippingPriceCents: 500

If you need to overwrite these hard-coded preview values to simulate a different setup or variant you can do that like this:

window._shipScout = window._shipScout || [];
_shipScout.push(function (response) {

   //Temporarily overwrite the response for testing
   response = {
      ...response,
      freeShippingThresholdCents: 5000,
      variant: 'B',
   }

})

Last updated