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 Dynamic Product Flow.
Configuring a Dynamic Product Flow
1. First, log in to your Shopify account and 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):
{% assign product_identifier = '' %}
{% if section.settings.product_identifier == 'sku' %}
{% assign product_identifier = product.selected_or_first_available_variant.sku %}
{% elsif section.settings.product_identifier == 'id' %}
{% assign product_identifier = product.id %}
{% endif %}
<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 }}',
productId: '{{ product_identifier }}'
});
</script>
{% schema %}
{
"name": "dynamicProductFlow",
"class": "flowbox-section",
"settings": [
{
"type": "text",
"id": "flowKey",
"label": "Flow Key"
},
{
"type": "text",
"id": "flowLocale",
"label": "Locale",
"default": "en-EU"
},
{
"type": "select",
"id": "product_identifier",
"label": "Product Identifier",
"options": [
{ "value": "sku", "label": "Variant SKU" },
{ "value": "id", "label": "Product ID" }
],
"default": "sku"
}
],
"presets": [
{
"name": "dynamicProductFlow"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
In this code example, we're using a flow named 'dynamicProductFlow'. 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 currently on the Homepage. Switch to the Default Product page (or the page where you want to implement the flow):
8. To add the Flow to your page, click "Add section" and search your Flow by typing the name that was previously set up. Then, select it from the dropdown menu:
9. Click on the newly added section:
10. Add your flow-key, locale and choose which identifier method should be used to trigger the flow (Product ID or Variant SKU). This determines how products are matched between Shopify and Flowbox.
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 .
11. Drag the flow to where you want to position it on the page, and then click 'Save' to see a preview of your Flow.