Once you have created a Flow in the Visual Marketing > Flows menu of the Flowbox dashboard, you can display the Flow on your Shopify page.
You can create 3 different types of Flows in Shopify:
Static Flow – typically used on the home page and/or a community page.
Dynamic Tag Flow – perfect for an Instashop or category pages.
Dynamic Product flow– create shoppable galleries on your product pages.
This guide will focus on the Static Flow.
Configuring a Static Flow
1. Log in to your Shopify account, go to 'Online Store' and click on 'Themes':
2. Click on the 3 dots and 'Edit code':
3. Click on 'Sections' and 'Add a new section':
4. Name your file and click on 'Done':
5. Copy paste the following code an click on 'Save' (top-right corner):
<script>
(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];
s.id = id;
s.async = true;
s.src = 'https://connect.getflowbox.com/flowbox.js';
fjs.parentNode.insertBefore(s, fjs);
})(document, 'flowbox-js-embed');
</script>
<div id="js-flowbox-flow" style="display:block !important;"></div>
<script>
window.flowbox('init', {
container: '#js-flowbox-flow',
key: '{{ section.settings.flowKey }}',
locale: '{{ section.settings.flowLocale }}'
});
</script>
{% schema %}
{
"name": "staticFlow",
"class": "flowbox-section",
"settings": [
{
"type": "text",
"id": "flowKey",
"label": "Flow Key"
},
{
"type": "text",
"id": "flowLocale",
"label": "Locale",
"default": "en-EU"
}
],
"presets": [
{
"name": "staticFlow"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
In this code, we're using a flow named 'staticFlow'. If you want to change the name, make sure to update both "name" fields within the schema section of the code.
6. Click on the 3 dots on top and on 'Customize theme':
7. You're now on the Homepage. To add the Flow to your Shopify store, click "Add section" and search your Flow by typing the name that was previously set up. Then, select it from the dropdown menu:
8. Click on the newly added section:
9. Add your Flow key and locale.
Get the Flow Key by copying it from the 'Copy Flow Key' option in the meatball (three-dot) menu in the Visual Marketing > Flows menu in the Flowbox dashboard.
You will see a default locale set to 'en-EU'. Please update this to match the locale used in your Catalogs, as seen in the "Catalogs" section from your Flowbox dashboard.
The locale combines a language code and a region code, and serves two main purposes:
Translate the widget's text and forms to the selected language.
Specify the catalog from which we should fetch data for assigned products, such as the product titles, product links and the product price's currency.
If you wish to apply a different setup for a specific country, you can override the default settings as follows :
Select the desired country.
Adjust the relevant settings (e.g., tags, locale, etc.).
Click Save to apply the changes
10. Drag the flow to where you want to position it on the page, and then click 'Save' (top-right corner) to see a preview of your flow.
More Shopify manual guides