To display a Flow you've created in Flowbox on your Shopify site, you need to add a small snippet to your site's templates.

1. Open your Shopify admin and click 'Online Store'.

2. Click 'Actions' and then 'Edit code'.

3. Open your theme.liquid file.

4. Including the flowbox.js script on your page. Copy this snippet and paste it in the <head> element:

<title>My webpage</title>
(function(d, id) {
if (!window.flowbox) { var f = function () { f.q.push(arguments); }; f.q = []; window.flowbox = f; }
if (d.getElementById(id)) {return;}
var s = d.createElement('script'), fjs = d.scripts[d.scripts.length - 1]; = id; s.async = true;
s.src = '';
fjs.parentNode.insertBefore(s, fjs);
})(document, 'flowbox-js-embed');

5. Click 'Save'.

Then, you can go ahead and use the window.flowbox function to display your Flows. To render a Flow on your webpage, copy and paste this snippet wherever you want the Flow to show up:

<div id="js-flowbox-flow"></div>
window.flowbox('init', {
container: '#js-flowbox-flow',
key: 'Your-Flow-Key',
locale: 'language-COUNTRY'

  • The container property refers to an element on your page, in this case the div element with id js-flowbox-flow .
  • The key property is the Flow key. The easiest way to find this is by copying it from the "Copy Flow Key" option in the meatball (triple dot) menu in Moderate in Flowbox:

  • The locale needs to have both a language and a country code to work correctly: e.g. sv-SE or da-DK. In order to get a correct translation, you will have to pick a locale from the list of supported locales. If you pass in an unsupported locale, buttons and text will be displayed in English.
  • NOTE: Please also make sure to use language-COUNTRY instead of language_COUNTRY. For more info on which languages we support, please visit this page.

Additional resources

Did this answer your question?