Links

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.
Property
Value Type
Example
Description
testId
integer | null
1
The test number.
variant
string | null
A
The variant this user is in.
thresholdCents
integer
5000
Only present if threshold is true.
The amount, in cents, required to get the threshold rate.
thresholdMetRateAmountCents
integer | null
0
Only present if threshold is true. The shipping price, in cents, if threshold amount is met
shippingPriceCents
integer
1000
The price, in cents, of shipping.
threshold
boolean
true
If there's a free shipping threshold for this user.
testType
string | null
threshold
The value can either be "threshold", "flat-rate" or "new-vs-returning".
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.
Testing the SDK without a live test
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',
}
})