Adding a Top Banner

ShipScout can automatically add a top banner for you. Just configure it in the dashboard. Want some more control? You can create banners yourself then.

We recommend using the Top Banner setting in ShipScout to automatically place a banner on your website. Customizing your own banner is possible, but requires some coding knowledge.

1. Add this Javascript to your website just before the closing </head> tag:

<script>
window._shipScout = window._shipScout || [];
_shipScout.push(function (response) {
if (response.testType === 'threshold') {
if (response.freeShippingThresholdCents === 0) {
//message for free shipping on all orders
var bannerText = 'Free shipping on all orders';
} else {
//apply any exchange rates to currency if necessary
var thresholdCents = (window.Shopify && Shopify.currency && Shopify.currency.rate) ? response.freeShippingThresholdCents * Shopify.currency.rate : response.freeShippingThresholdCents;
//format currency
var currencyFormat = ShipScoutGetCurrency();
//get amount
var amount = ShipScoutFormatMoney(thresholdCents, currencyFormat);
//message for threshold shipping
var bannerText = 'Free shipping on orders over ' + amount;
}
//default parent
var parentEls = [document.body];
//check for section header
var sectionHeaderEl = document.getElementById('shopify-section-header');
if(sectionHeaderEl) {
parentEls = [sectionHeaderEl];
}
//insert banner(s)
for (var i = 0, len = parentEls.length; i < len; i++) {
var bannerEl = document.createElement("div");
bannerEl.innerHTML = bannerText;
bannerEl.className = 'shipscout-banner';
parentEls[i].insertBefore(bannerEl, parentEls[i].firstChild);
}
}
});
</script>

2. Add this CSS to your website:

.shipscout-banner {
color: #fff;
text-align: center;
padding: 7px;
background: #00aeaa;
}