This checkout implementation guide is deprecated. Shopify recommends integrating checkout tracking scripts by creating a Pixel through their "Customer Events" feature. You can find a guide on how to do so in this link.
By embedding the Flowbox checkout script on your ecommerce site, you will be able to track and measure KPIs including your conversion rate, assisted order share and your sales directly attributable to Flowbox. You can read more about our Commerce insights and analytics here.
Before you begin
The first step is making sure that you fulfill these requirements:
You have the Commerce product enabled and a Product List uploaded to Flowbox.
You have collected posts with products connected in Moderate.
You have your individual Checkout Script API Key. Ask your Client Success Manager about this.
How to embed the Checkout script in Shopify
1. Log in to your Shopify account. Note: make sure you have full permission levels to access the admin settings.
2. First, from the ‘Home’ menu navigate to ‘Settings’ by clicking on the cogwheel button in the bottom left-hand side.
3. In ‘Settings’, click on ‘Checkout script’.
4. Scroll down to the ‘Additional scripts’ section and paste the following script snippet.
The only thing you need to change in this snippet is ‘YOUR API KEY’. You will need to get this unique key from your Flowbox Client Success Manager.
<script>
!function(e, t) {
var o = document.createElement("script");
o.type = "text/javascript", o.readyState ? o.onreadystatechange = function() {
("loaded" === o.readyState || "complete" === o.readyState) && (o.onreadystatechange = null, t())
} : o.onload = function() {
t()
}, o.src = e, document.getElementsByTagName("head")[0].appendChild(o)
}("//connect.getflowbox.com/bzfy-checkout.js", function() {
let products = []
{% for line_item in order.line_items %}
products.push({
id: {{ line_item.sku }},
quantity: {{ line_item.quantity }}
})
{% endfor %}
window.flowboxCheckout.checkout({
apiKey: 'YOUR API KEY',
products: products,
orderId: {{order.id}}
})
});
</script>
5. Scroll down and click ‘Save’ to update. And now you’re done!
How to make sure that your Checkout Script is working
Once embedded, we strongly recommend that you carry out a test order to verify the connection. Once the test order has been placed, you will need to wait for 24hrs to see if the purchase has been registered in Flowbox. You should see data registered in your Commerce Insights menu.
If it doesn't seem to work, please perform the troubleshooting process detailed in the following guide to confirm that it's working:
More resources