Shipping banner configuration

Using ShipScout, you can add shipping banner(s) to your website. The banner will dynamically render text depending on the customer's state.

Layout and placement

There are two out-of-the-box ways to layout the shipping banner: floating widget and top bar. We recommend using the floating widget, since it is well supported in all themes. The top bar layout works for most themes but for certain themes, ShipScout might not be able to determine where to place the shipping banner.

You can add the following code in your theme where you would like ShipScout to place this shipping banner:

<div class="shipscout-placeholder"></div>

You can add as many of these elements as you need and we will replace them all with top bars.

The banner text

The banner text will render differently for each of the following scenarios:

• When there is a threshold-based promotional rate

• When there is a flat rate, but no threshold-based promotional rate

• When shipping is always free

For each scenario, you can set a separate text template:

Configuring text templates in the shipping banner settings

Within each template, you can use template variables to dynamically render currency values (denoted with curly braces. e.g. {threshold_value}):

Template variables	Definition
threshold_value	The order value or the item count that must be met to trigger the special shipping pricing
threshold_met_shipping_price	The shipping price when the threshold amount is met
shipping_price	The flat rate pricing that is available when the threshold amount is unmet, or when using flat rate shipping pricing

Hide the shipping banner based on visitor location

If you're running a split test, for example, only in the Germany & Austria then you likely will not want visitors from other countries to see a "Free shipping over €50" banner.

Below we have some javascript you can include that will hide the banner for all visitors from outside of Germany or Austria.

You will need to modify line #4 so that it's an array of the countries included in the current test.

We recommend placing this script just before the closing </head> tag but it can safely be placed anywhere including an external javascript file.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>

<script type="text/javascript">

/* Set these variables */
var shipScoutIncludedCountryCodes = ["DE", "AT"] //include alpha-2 country codes https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2

/* Do not modify code below */
var shipScoutProcessCountry = function(countryCode) {
  window._shipScout = window._shipScout || [];
  _shipScout.push(function(response) {
    // Check to see if the visitor's country is NOT in the included countries list
    if (shipScoutIncludedCountryCodes.indexOf(countryCode) === -1) {
      //hide the ShipScout banner
      console.log("ShipScout: Banner hidden for visitors in " + countryCode)
      document.querySelectorAll('.shipscout-banner').forEach(function(banner) {
        banner.style.display = 'none'
      })
    }
  })
}

//Check for "sc_country" cookie
if (Cookies.get('sc_country')) {
  shipScoutProcessCountry(Cookies.get('sc_country'))
} else {
  // Make a request to ipinfo
  var shipScoutXhr = new XMLHttpRequest();
  shipScoutXhr.open("GET", '/browsing_context_suggestions.json');
  shipScoutXhr.onreadystatechange = function() {
    if (this.readyState === XMLHttpRequest.DONE) {
      if (this.status === 200) {
        var data = JSON.parse(shipScoutXhr.responseText)
        if (data && data.detected_values && data.detected_values.country && data.detected_values.country.handle) {
          shipScoutProcessCountry(data.detected_values.country.handle)
          Cookies.set('sc_country', data.detected_values.country.handle)
        } else {
          console.log('ShipScout: Error with country lookup')
        }
      } else {
        console.log('ShipScout: Error with country lookup request')
      }
    }
  }
  shipScoutXhr.send();
}

</script>