Headless stores

ShipScout can run on headless stores with a little bit of setup.

Step 1: initialize ShipScout

You will need to configure ShipScout and load the ShipScout SDK. To do so, include the following html/javascript on your site before the closing </head> tag:

<script>

    window._shipScout = window._shipScout || [];
    window.Shopify = window.Shopify || {};
    
    /* 
    Replace mystore.mystore.com with the Shopify domain (should always include
    ".myshopify.com") excluding https:// 
    */
    Shopify.shop = 'mystore.myshopify.com';

    /*
    Replace mystore.com with your domain but do not include
    a leading dot or the subdomain
    */
    window.shipScoutCookieDomain = 'mystore.com';

</script>
<script async src="https://web.shipscout.app/app.min.js"></script>

Warning: the configuration (the code in the first script tag) must be run before the app.min.js is loaded. If the SDK loads before the configuration, ShipScout will not track conversions correctly.

Step 2: update cart items with ShipScout data

To track conversions, you will need to set a custom ShipScout attribute (sometimes referred to as a line item property) on each and every item that is added to a customer's cart. Set this attribute to window.ShipScoutLineItemProperty.

For example, if you are using the graphql api, here is a snippet of

// This is an illustration of the customAttributes section of the graphQl query
// If the above cookies exist then pass in those values as a customAttribute

customAttributes: [
   // Any existing custom attributes go here
   //  and add the new ShipScout custom attribute like this:
   {
      key: '_sc',
      value: (typeof window.ShipScoutLineItemProperty !== 'undefined' ? window.ShipScoutLineItemProperty : "")
   }
]

Step 3: track the add to cart event

Note: if you are using the /cart.js step, you can ignore this step.

If you're using the GraphQL Storefront API to manage the cart state, you will need to fire the "Add to cart" event by calling window.ShipScoutTrackAddToCart(). It is safe to call this function repeatedly on every add to cart; only the initial event will be tracked.

// Track the "Add to cart" event
if(typeof window.ShipScoutTrackAddToCart === "function") {
    window.ShipScoutTrackAddToCart()
}