Flowbox is partnered with leading ecommerce platform Shopify, to offer a first-class visual marketing experience for ecom sites.
Before you begin
Before we begin, make sure that you have a copy of your Flowbox 'Flow key'.
To find your 'Flow Key', log into Flowbox and select your Flow, then click on the meatball (three-dot) menu to copy the key:
Once you have the ‘Flow key’, it’s time to get started.
Embedding Flowbox Flows
The first step to embedding Flows in Shopify is including the flowbox.js script in the HTML <head> section, in order to call the function across your site.
In order to do this, follow these steps:
1. Log in to your Shopify account. Note: make sure you have full permission levels to access the admin settings.
2. Navigate to the ‘Themes’ menu on the right-hand side, and under the ‘Actions’ drop-down menu, click on ‘Edit code’.
3. Under ‘Layout’ select your theme.liquid file.
4. Paste the following code snippet into the <head> section:
<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>
Done! Now it’s time to create a Section in Shopify to hold your Dynamic Tag Flow, so that you can place it on your desired page(s).
Embed a Dynamic Tag Flow in a Page
It’s very easy to embed a Dynamic Tag Flow on a Page in Shopify. This is a great way to pull in and show off lots of content with different tags in one space.
1. Go to the ‘Edit Sections’ and then click ‘Add new section’.
2. Name your new section, and click ‘Create section’.
3. Paste this code into your section:
<script type = "text/javascript">
function updateFlow(tag) {
window.flowbox('update', {
key: 'js-flowbox-flow-tag'
})
}
</script>
<div align=center>
<button type="button" onclick="updateFlow()">all</button>
<button type="button" onclick="updateFlow('football')">Football</button>
<button type="button" onclick="updateFlow('workout-clothes')">Workout Clothes</button>
</div>
<div id="{{ section.settings.container }}"></div>
<script>
window.flowbox('init', {
container: '#js-flowbox-flow-tag',
key: 'YOUR FLOW KEY',
locale: 'language-COUNTRY',
})
</script>
{% schema %}
{
"name": "Dynamic-Tag-Flow",
"class": "tag-flow",
"settings": []
,
"presets": [
{
"name": "Dynamic-Tag-Flow",
"category": "Flowbox Flows"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
The buttons refer to the tag buttons at the top of the Flow. A tag button is created in this way:
<button style="margin: 5px;" data-tag="TAG" class="active">NAME OF BUTTON</button>. Note: the tag name in the script must match the tag in Flowbox. If you wish to create an ‘All’ button, then leave the TAG field empty, like this:<button style="margin: 5px;" data-tag="" class="active">ALL</button>.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. See instructions at the top of the article on how to retrieve it from your Flowbox account.
Under %schema% make sure you enter the “name” of your Section so that you can find it in the next step.
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.
4. Remember to click ‘Save’.
5. Now that your Dynamic Tag Flow Section is created, it’s time to go back to your ‘Customize theme’ page.
6. In the menu on the left-hand side, click ‘Add section’ to search for your newly created Section.
7. Add your Section, drag it to where you want to position it on the page, and then click ‘Save’ to see a preview of your Flow.
That’s it! 🚀 You now have a page set up with an embedded Dynamic Tag Flow in Shopify.
You can see our Flow in action below:
All updates and edits to your Flowbox Flow (content, styling, tags) need to be made in your Flowbox Admin account.
More resources