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 using our plugin.
Make sure to have the Flowbox plugin for Shopify installed on your Shopify page. If you don't have it yet, check the Installation guide first.
You can create five different types of Flows in the Flowbox plugin for 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 Tag Flow with filtering options – a special type of Dynamic Tag Flow where the filtering options will enable visitors to switch what content they see. It works very well for Inspiration pages where you want to showcase a lot of content based on the user's button selection.
Dynamic Product Flow – create shoppable galleries on your product pages.
Dynamic Product Flow in gallery – serve content dynamically based on a product. But instead of being its own element on the product page, the content will be automatically incorporated in the product gallery/slider.
This guide will focus on the Dynamic Tag Flow and Dynamic Tag Flow with filtering options.
Configuring a Dynamic Tag Flow
1. First, click on the installed app and you’ll see the Flowbox application landing page.
2. Click 'Configure Flow'.
2. Select 'Dynamic Tag Flow' and click ‘Next.’
It's important to choose the same Flow type here that you created on the Flowbox dashboard. If you want to use a 'Dynamic Tag Flow' from the Visual Marketing > Flows menu in the Flowbox dashboard, make sure you select 'Dynamic Tag Flow' in the Shopify plugin to configure it correctly.
3. A new ‘Configure Dynamic Tag Flow’ box will appear.
4. Enter your Flow name (you can choose any name but note it cannot have any spaces) and then click on ‘Next’.
5. Insert the Flowbox Flow key, and then click on ‘Next’.
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.
6. The next step is to enter your Locale. You can start typing the language you want and the dropdown menu will offer you possible locales and regions. Click here for a full list of supported regions in Flowbox.
7. Once you’ve chosen the necessary Locale you can click the ‘Create Flow’ button. You can add multiple locales at this point and the plugin will create a new Flow for each one.
8. Your Flow will appear under the Shopify Active Flows in the Dynamic Tag Flows section.
9. Now you can customize your Flow and add it to your Shopify pages.
Managing your Dynamic Tag Flow in Shopify
1. Open your Shopify app to manage any Flow by selecting 'Online Store' and clicking on 'Themes'.
2. Click on ‘Customize’ to edit your page.
3. Now you are on the 'Home Page'.
4. To add the Flow to your Shopify App click on 'Add section' and choose your Flow from the dropdown menu.
5. Your new Dynamic Tag Flow will now appear in the left-hand sidebar.
6. Now you can customize your Dynamic Tag Flow:
You can determine whether you prefer the tagOperator to be set to 'all' or 'any'.
You can determine visibility options, in case you only want to display the Flow on a single product and/or collection.
Include the tags you want to be fetched in the free text field, separated by comma.
As an example, if you set the tag: ‘food’ and press save, Shopify will fetch ALL Flowbox posts which include the tag ‘food’.
You can add one another tag, ‘nature’, and save this change. Now it will fetch ALL posts which include both the tags ‘food’ and ‘nature’.
If you change tagOperator to 'ANY' this will mean that Shopify will fetch ANY post that has the tag ‘food’ or ‘nature’ or a combination of these tags.
Dynamic Tag Flow with filtering options
In addition to a regular Dynamic Tag Flow, you can create Dynamic Tag Flows with filtering options with buttons at the top to select what content to display. This type of Flow will fetch tag-specific content dynamically based on the selected button's tag.
The steps to set up a Dynamic Tag Flow with filtering options are the same as described above for a Dynamic Tag Flow:
Open the Flowbox application landing page and select 'Dynamic Tag Flow with filtering options'.
Enter the Dynamic Tag Flow name (any name, minus spaces).
Insert the Flow key of a Dynamic Tag Flow from Flowbox.
Enter the locale information.
And click the 'Create Flow' button.
Your new Dynamic Tag Flow with filtering options will appear under the Shopify Active Flows in the Dynamic Tag Flows with filtering options section.
Now you can go into your Shopify store to customize and add your Dynamic Tag Flow with filtering options to your site.
Managing your Dynamic Tag Flow with filtering options in Shopify
1. Open your Shopify app to manage any Flow by selecting 'Online Store' and clicking on 'Themes'.
2. Click on ‘Customize’ to edit your page.
3. Now you are on the 'Home Page'.
4. To add the Flow to your Shopify App click on 'Add section' and choose your Flow from the dropdown menu.
5. Your new Dynamic Tag Flow with filtering options will now appear in the left-hand sidebar.
6. To add the filter buttons to your Dynamic Tag Flow, you will first need to add a new section from the main menu on the left-hand side.
7. Click to add ‘tag’ and ‘filter’.
8. If you want to display filter buttons for the tags ‘food’ and ‘nature’, click on ‘Tag’ in the menu and you’ll now be able to add the ‘Tag Name’ and 'Button Label’ on the right-hand side.
‘Tag name’ – the tag label in this field must match the tag in Flowbox, in order to display the correct posts.
‘Tag Button label’ – insert your preferred button name which will be displayed in your Flow.
Note: ‘Tag name’ & ‘Tag button label’ can have the same value or you can pass a different ‘Tag button label’ name from your 'Tag name'.
For example, you can use the Tag Button Label ‘Nature’ (to display posts tagged with ‘Nature’) and use the Tag name ‘Cool Nature’ in the frontend.
Every time you want to add a new tag you have to do it through the menu in the left-hand sidebar.
You can also easily edit the look of your filter buttons. You can edit the background and text color, as well as create a highlight color for the ‘Active state’.
To delete a ‘Tag’ or ‘Filter’, simply click on ‘Remove block’, and it will be removed.