Add Fairing Question Stream

Updated 2 months ago by Jordan Graham

The Fairing Integration is only available on Tracking Pages built through the Shopify theme editor. Learn more here.

Adding the Fairing Integration is an easy and great way to get more zero party data from your customers and make the most of all the traffic that is sent to your tracking page.

Add a section file to your theme Files

In the Shopify admin navigate Online Store (1) -> Themes (2). For the theme you want to edit, select Actions (3) -> Edit Code (4).

In the new sidebar that appears on the left, find 'Sections' -> 'Add a new section'. Name the new section 'fairing' and click 'Create section'.

This will bring you to a file with some default code. Delete that code, then copy and paste the following code into the file and click save in the top right of the editor.

<script type="text/javascript">
document.addEventListener('wonderment:shipments_loaded', function(event) {
console.log('Shipments loaded event fired with shipments: ', event.shipments);

let container = document.createElement('div');
container.className = 'os-order-number';
container.innerHTML = `Order ${event.shipments[0].order.name}`;
container.style = 'opacity: 0; height:0;'
document.getElementsByClassName('tp-page-wrapper')[0].appendChild(container);

let orderNameContainer = document.createElement('div');
orderNameContainer.dataset.postPurchaseSurvey = ''
document.getElementsByClassName('tp-page-wrapper')[0].appendChild(orderNameContainer);

var tag = document.createElement("script");
tag.src = "https://app.enquirelabs.com/shopify/survey-script.js?k={{section.settings.fairing-key}}";
document.getElementsByTagName("head")[0].appendChild(tag);

})

</script>



<div data-post-purchase-survey ></div>

<style>
.content-box {
max-width: fit-content;
margin: 0px auto;
padding: {{section.settings.fairingpadding}}px 0px;
}
</style>

{% schema %}
{
"name": "Fairing Question Stream",
"tag": "section",
"settings": [
{
"type": "text",
"id": "fairing-key",
"label": "Fairing API Key"
},
{
"type": "range",
"id": "fairingpadding",
"min": 0,
"max": 50,
"step": 5,
"unit": "px",
"label": "Top and Bottom Padding",
"default": 25
}
],
"presets": [
{
"name": "Fairing Question Stream"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Add the section to your tracking page.

Access the Theme Editor by navigating to Themes -> Customize.

Navigate to that template your tracking page uses by clicking the drop down in the top nav and then pages.

Select the template from from the list that will appear. (It's probably called 'tracking').

Click 'Add Section' and look for 'Fairing Question Stream'. Select it and then provide your Fairing API key (found in your Fairing admin) to the field on the right of the theme editor. Click save.

To test it, visit your tracking page and look up a real order number or tracking number. As long as your question stream is active, it should appear on your page!


How did we do?