Purpose & scope
This document is a practical, repeatable checklist and playbook for converting any Shopify Thank You page to the Thank You page in Shopflo Checkout. It serves as a structured guide for diagnosing and resolving issues during and after migration, ensuring that all scripts, data, and integrations work correctly in Shopflo’s environment.
It covers:
Reproducing and isolating issues.
Validating data from backend APIs.
Verifying execution of imported scripts.
Ensuring correct front-end rendering for both web and mobile views.
Preventing common pitfalls such as duplicate firing, missing data, or incorrect container class usage.
The goal is to make migrations smooth, integrations reliable, and debugging consistent across all teams.
Prerequisites / access needed
Merchant Shopify store admin access
Shopflo dashboard access (merchant account) Support access
Shopify Additional Script File
Test payment methods or COD / Discount in order to generate Test Transaction
Ensure that the Order Status page has been created on the Shopify Online Store page section. Refer here
Step-by-step debugging steps
1) Import Shopify Additional Scripts into Shopflo Demo Store
Navigate to Shopflo Dashboard → Settings → Integrations → Additional Script tab in the Shopflo Demo Store.
Import all Shopify Additional Scripts here — never add directly to a merchant’s account without validating in the test environment.
This tab can only handle contents inside <script> tags.
Once scripts are imported, place a COD order to generate the Thank You page for testing.
While converting or adding any scripts from Shopify to Shopflo, add console loggers for each and every script to verify execution during debugging.
<script>
console.log('******** Script : gtag conversion *********');
gtag('event', 'conversion', {
'send_to': 'AW',
"value": 456,
'currency': '$',
'transaction_id': '1111111'
});
</script>
2) Verify script loading in backend
After generating the Thank You page, check whether all imported scripts have loaded correctly in the backend.
3) Critical backend API check for Thank You page data
Must be accessed with order as the parent object.
Here in below example, total_price, currency are accessed from the above API using order key.
<script>
console.log('******** Script : gtag conversion *********');
gtag('event', 'conversion', {
'send_to': 'aaaaaaaaaa',
"value": {{ order.total_price }},
'currency': '{{ order.currency }}'
});
</script>
If data is missing, use fallback endpoint:
In scripts, accessed via window.Shopflo.
Consider below example to capture the transaction details which is not available in Thankyou-page data, hence it has been accessed from the post-order-details api using the window.Shopflo as the parent object.
<script>
console.log('******** Script : Payment Tracking *********');
let email = '{{ order.email }}';
let phone = `{{ order.customer.last_order.shipping_address.phone }}`.replace(' ', '');
const transactions = window.Shopflo?.checkout?.fms_orders?.[0]?.transactions || [];
console.log({
transactionID,
email,
phone
});
</script>
4) Handle scripts inside {% if first_time_accessed %}
Why Shopify uses this: In Shopify, the first_time_accessed condition ensures that certain scripts (e.g., analytics, surveys, tracking pixels) run only once per order — preventing duplicate conversions when a customer refreshes or revisits the Thank You page.
How to adapt for Shopflo: Shopflo doesn’t have the same Liquid variable, so replicate the behavior by checking for the flo-checkout-token-id in local storage before running scripts.
<script>
(function() {
const t = localStorage.getItem("flo-checkout-token-id");
if (!t) return;
// script content
})();
</script>
This approach ensures scripts only execute for the current order context, similar to Shopify’s original first_time_accessed guard.
5) Handle scripts inside <noscript>
<noscript> provides fallback content for browsers that don’t support JavaScript or have it disabled. It’s a safety net for non-JS environments.
Turning <noscript> into <script> would try to run JavaScript where JavaScript is intentionally not running—defeating the entire purpose of <noscript>.
Injecting fallback HTML or image pixels (often found inside <noscript>) breaks that contract and wouldn’t function in a JS-only rendering flow anyway.
We omit the <noscript> content and leave a clear comment so the intent is documented in the output.
// Removed <noscript> block: not applicable in Shopflo’s script-only rendering.
<!-- <noscript> is not supported in Shopflo's rendering logic; keeping original markup commented out for reference.
<noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=236308604172638&ev=PageView&noscript=1"/> </noscript> -->
6) Validate container classes for correct view
Ensure only one of the following is present:
flo-thank-you-container-web (web view)
flo-thank-you-container-mobile (mobile view)
Both must never exist together.
This prevents fallback issues for custom integrations.
Examples: Grapevine Survey App, Zigpoll Survey App.
7) Example: Grapevine Survey script placement
This script conditionally ensures Grapevine Survey loads in the correct container based on device type:
<script>
console.log('******** Script : Grapevine Tracking *********');
(function () {
const isMobile = window.innerWidth <= 768;
const target = isMobile
? document.querySelector('.flo-thank-you-container-mobile-content .flo-order-status')
: document.querySelector('.flo-thank-you-container-web-left .flo-order-status');
const container = document.createElement('div');
container.id = 'grapevine-container';
container.style.color = 'black';
if (target && target.parentNode) {
target.parentNode.insertBefore(container, target.nextSibling);
}
})();
</script>
8) Example: Zigpoll Survey rendering
Refer to Zigpoll Placeholder for a video demonstration on how Zigpoll can be positioned for mobile or web view.
9) Enabling Continue Shopping Redirection:
For continue shopping add below script in the additional script section and also locate window.location.href in below snip and add the redirection url.
The CSS properties can also be modified in the below snippet itself.
<script>
window.onload = function () {
// Create the button element
var continueButton = document.createElement('button');
continueButton.className = 'continue-shopping-button';
continueButton.innerHTML = `
<span>Continue Shopping</span>
<i class="ph-bold ph-arrow-up-right"></i>
`;
// Apply styling
continueButton.style.color = '#FFFFFF';
continueButton.style.backgroundColor = '#596F89';
continueButton.style.display = 'flex';
continueButton.style.flexDirection = 'row';
continueButton.style.justifyContent = 'center';
continueButton.style.alignItems = 'center';
continueButton.style.gap = '4px';
continueButton.style.padding = '12px 24px';
continueButton.style.borderRadius = '8px';
continueButton.style.border = 'none';
continueButton.style.outline = 'none';
continueButton.style.cursor = 'pointer';
continueButton.style.marginRight = '12px';
// Navigate on click
continueButton.onclick = function () {
window.location.href = '{{Store URL}} eg: www.myshopifystore.com';
};
// Insert before the mailto <a> inside .flo-help-and-support
var supportContainer = document.querySelector('.flo-help-and-support');
var mailtoLink = supportContainer.querySelector('a[href^="mailto:"]');
if (supportContainer && mailtoLink) {
supportContainer.insertBefore(continueButton, mailtoLink);
}
};
</script>
10) GPT Model to convert Shopify Script into Shopflo Compatible Script
In order to convert Shopify Script into Shopflo Compatible Script Try using ScriptConvertor