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 Tag Flow.
Configuring a Dynamic Tag 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 flowbox_tags = '' %}
{% if section.settings.tag_selector_mode == 'collection' %}
{% if collection %}
{% assign flowbox_tags = collection.handle %}
{% endif %}
{% else %}
{% assign raw_tags = section.settings.manual_tags | split: ',' %}
{% assign clean_tags_array = '' %}
{% for tag in raw_tags %}
{% assign tag_cleaned = tag | strip %}
{% if clean_tags_array == '' %}
{% assign clean_tags_array = tag_cleaned %}
{% else %}
{% assign clean_tags_array = clean_tags_array | append: ',' | append: tag_cleaned %}
{% endif %}
{% endfor %}
{% assign flowbox_tags = clean_tags_array %}
{% 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 }}',
tags: '{{ flowbox_tags }}',
tagsOperator: '{{ section.settings.operator }}'
});
</script>
{% schema %}
{
"name": "dynamicTagFlow",
"class": "flowbox-section",
"settings": [
{
"type": "text",
"id": "flowKey",
"label": "Flow Key"
},
{
"type": "text",
"id": "flowLocale",
"label": "Locale",
"default": "en-EU"
},
{
"type": "select",
"id": "tag_selector_mode",
"label": "Tag Source",
"options": [
{ "value": "manual", "label": "Manual Tag" },
{ "value": "collection", "label": "Collection Handle" }
],
"default": "manual"
},
{
"type": "text",
"id": "manual_tags",
"label": "Manual Tags (comma separated)",
"info": "Enter a single tag or multiple tags separated by commas. Used only if 'Manual Tag' is selected."
},
{
"type": "select",
"id": "operator",
"label": "Operator (for multiple tags)",
"options": [
{ "value": "all", "label": "All the tags" },
{ "value": "any", "label": "At least one tag" }
],
"default": "any"
}
],
"presets": [
{
"name": "dynamicTagFlow"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
In this code, we're using a flow named 'dynamicTagFlow'. If you want to change the name, make sure to update both the "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 Collection 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 a tag source. You can either use a collection handle from Shopify or manually define one or more tags:
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. If you've selected manual tags, enter one or more tags, separated by commas:
12. If you've selected manual tags and specified more than 1 tag, specify the operator:
13. Drag the flow to where you want to position it on the page, and then click 'Save' to see a preview of your Flow.
