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 (static)
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 Static Flow, so that you can place it on your desired page(s).
Embed a Static Flow in a Page
It’s very easy to embed a Static Flow on a Page in Shopify. This would be a great way to create a Community and/or Inspiration page to show off your fans and link to products.
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:
<div id="js-flowbox-flow"</div>
<script>
window.flowbox('init', {
container: '#js-flowbox-flow',
key: 'Flow-key',
locale: 'en-GB'
})
</script>
{% schema %}
{
"name": "Inspiration-Page-Flow",
"class": "Inspiration-Page-Flow",
"settings": []
,
"presets": [
{
"name": "Inspiration-Page-Flow",
"category": "Flowbox Flows"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
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 press ‘Save’.
5. Now that your 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 new Inspiration/Community page set up with an embedded static Flow in Shopify. 🚀
All updates and edits to your Flowbox Flow (content, styling, tags) need to be made in your Flowbox Admin account.