Product Flows are a great way to dynamically enhance your product pages by pulling in content connected to a product.
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.
Note: you will need to make sure you have uploaded your product catalog to Flowbox and tagged your posts with products.
Embedding a Dynamic Product Flow
In order to do embed the Dynamic Product Flow script 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 ‘Sections’ select your product-template.liquid file. This is a default section.
4. Copy and paste this snippet in the product-template.liquid file. Remember to insert your Flow key and your locale information.
<div id="js-flowbox-flow-product"></div>
<script>
window.flowbox('init', {
container: '#js-flowbox-flow-product',
key: 'YOUR FLOW KEY',
locale: 'language-COUNTRY',
productId: '{{ current_variant.sku }}'
})
</script>
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.
ProductID is a variable referring to the product identifier. It must be a string in the final output, and should not be edited.
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.
Please also make sure to use language-COUNTRY instead of language_COUNTRY.
The Dynamic Product Flow snippet needs to be inserted into the main code of this file and not in the {% schema %} section.
Note on placement
The Flow will render wherever you put this container and accompanying script. So, as you can see in our example, the Flow will render at the bottom of the page before the footer as the code snippet has been inserted at the bottom of the main code section.
5. Remember to press ‘Save’.
6. That’s it! You have embedded the Dynamic Product Flow script in Shopify. 🚀 This will now be automatically loaded and updated on all your product pages.
All updates and edits to your Flowbox Flow (content, styling, tags) need to be made in your Flowbox Admin account.
More resources