Setup Fit Advisor on headless Shopify store

A few simple steps to get up and running with the WAIR Fit Advisor plugin in a headless environment

Before you begin

  • You will need access to https://app.getwair.com to copy scripts for your brand site. Please reach out at help@getwair.com to get added.
  • These instructions are for installing on a React site. If you are using a framework other than React, drop us a note and we can help with any specific questions.

Add Header Script using React Helmet

  1. Go to Fit Advisor dashboard (https://app.getwair.com)
  2. Navigate to Widget Install
  3. Copy the brandkey from the Widget install script
  4. In your react project, install React Helmet if not there already:
    npm install react-helmet
  5. Use the following code to add Fit Advisor script to head:
    // index.js file
    <Helmet>
    {/* Fit Advisor site tag (predict.v3.js) - WAIR */}
    <script>
    {
    var config = {
    "brandKey": "<<API_KEY>>"
    };
    (function (i, s, o, n, c, g, a) {
    for (var j = 0; j < n.length; j++) { a = s.createElement(o); a.id = n[j]; a.type = 'text/javascript'; a.async = 1; a.src = n[j]; var m = document.getElementsByTagName(o)[0]; m.parentNode.insertBefore(a, m) }
    i.addEventListener("onBodyBlockLoad", function () { window.predictWidget = BodyBlockV3.default.Predict.new(config); window.predictWidget.render() })
    })(window, document, 'script', ["https://predict.getwair.com/widget/static/js/predict.v3.js"]);
    }
    </script>
    </Helmet>

Add Product Page Placement

  1. Go to Fit Advisor dashboard (https://app.getwair.com)
  2. Navigate to Widget Install
  3. Copy "Product Page Placement" script (reference below):
    <div class="bb-recommendation" data-bb-product="{{product.handle}}" data-bb-product-name="{{ product.title | escape }}" data-bb-product-img="{{ product.featured_image | img_url: 'x600' }}"></div>
  4. Add the placement script to your Product Detail Page in the desired location for your product page. Typically this will be just above the size labels or just below the Add to Cart button.
  5. Update data-bb-* data attributes with the proper dynamic values. (NOTE: the product handle is the Shopify product handle)

    Add Checkout script

    1. Go to Fit Advisor dashboard (https://app.getwair.com)
    2. Navigate to Widget Install
    3. Copy "Checkout script"
    4. Go to your Shopify admin
    5. Navigate to Checkout page: Settings  > Checkout
    6. Paste script in Order Processing > Additional ScriptsScreen Shot 2020-09-17 at 1.58.52 PM