All Collections
Installing Flowbox
Plugin guides
Shopify plugin guide: Installation & configuration
Shopify plugin guide: Installation & configuration

A guide to installing and using the Flowbox plugin for Shopify

Helena Nordh Myhrman avatar
Written by Helena Nordh Myhrman
Updated over a week ago

Plugin installation 👷‍♂️

1. Log into your Shopify account. Go to the Apps section, search for Flowbox and install the app from Shopify by clicking on 'Install app'.

2. That’s it! Now once installed, you’ll be able to set up your Flows and Checkout script and implement them in your store.


Implementing Flowbox 🏗

After installation and setup are completed, you can implement Flowbox on your Shopify Store pages.

First, you need to click on the installed app and you’ll see the Flowbox application landing page.

When you click on 'Configure Flow' in your Flowbox app, you can create five different types of Flows:

  1. Static Flow – typically used on the home page and/or a community page.

  2. Dynamic Tag Flow – perfect for an Instashop or category pages.

  3. Dynamic Tag Flow with filtering options – the filtering options will enable visitors to switch what content they see, and works very well for Inspiration pages where you want to showcase a lot of content.

  4. Dynamic Product Flow – create shoppable galleries on your product pages.

  5. 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.


Configuring a Static Flow

To create a Static Flow, you need to click on ‘Static Flow’ and follow these next steps:

1. Click on ‘Next.’

2. A new box ‘Configure Static Flow’ will appear.

3. Enter your Static Flow name (you can choose any name but note it cannot have any spaces) and then click on ‘Next’.

4. Insert the Flowbox Flow key, and then click on ‘Next’.

To find your 'Flow Key', log into Flowbox and select your Flow, then click on the meatball (three-dot) menu to copy the key:


5. 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.

6. 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.

7. Your Static Flow will appear under the Shopify Active Flows in the Static Flows section.

8. Now it’s time to customize your Static Flow and add it to your Shopify pages.


Managing a Static Flow in Shopify

1. First, you need to open your Shopify store in order to manage your Flows. Once you’ve logged in, go to 'Online Store' and click on 'Themes'.

2. Click on ‘Customize’ to edit your site.

3. Now you are on the 'Home Page'.

4. To add the Flow to your Shopify store, click on 'Add section', and from the dropdown menu, select your Flow.

5. You’ll now see your Flowbox content displayed in the store.


Configuring Dynamic Tag Flow

The steps to set up a Dynamic Tag Flow are the same as described above for a Static Flow:

  • Open the Flowbox application landing page and select 'Dynamic Tag Flow'.

  • Enter the Dynamic Tag Flow name (any name, minus spaces).

  • Insert the Flow key.

  • Enter Locale information.

  • And click on the 'Create Flow' button.

Your new Dynamic Tag Flow will appear under the Shopify Active Flows in the Dynamic Tag Flows section.

Now you can go into your Shopify store to customize and add your Dynamic Tag Flow.


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.

If you want the Tag Operator to be set to 'All', then you have to include the tags you want to be fetched in the free text field.

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 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

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.

  • Enter Locale information.

  • And click on 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.

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.


Configure a Dynamic Product Flow

To set up the Dynamic Product Flow you need to go back to the Flowbox plugin.

In order to configure a Dynamic Product Flow, you will need to carry out the same steps as for a Static Flow and Dynamic Tag Flow, with the exception of one extra step 'Select Identifier':

  • Open the Flowbox application landing page and select 'Dynamic Product Flow'.

  • Enter the Dynamic Product Flow name (any name, minus spaces).

  • Insert the Flow key.

  • Enter Locale information.

  • Select your Identifier from the dropdown menu. Note: Make sure to choose the same identifier used on the import of product catalogs to Flowbox.

After you have selected the Identifier, you can click on the 'Configure Flow' button.

Your Dynamic Product Flow will appear under the Shopify Active Flows in the Dynamic Product Flows section.

Now you can log in to your Shopify app to customize your Dynamic Product Flow.


Managing a Dynamic Product Flow in Shopify App

You can now add this Flow as a section on your product page. The Flowbox plugin will automatically get the product id from the product page you are on, in order to show your custom Product Flow.

You can also manually select a product or collection for your Product Flow, in case you only want to display the Flow on a single product and/or collection. Note: by selecting a product on the right-hand side, the Flow will be visible for this product only.


Configuring Dynamic Product Flow in product gallery

To set up the Dynamic Product Flow in gallery you need to go back to the Flowbox App.

In order to configure a Dynamic Product Flow in gallery, you will need to carry out the same steps as for a Dynamic Product Flow':

  • Open the Flowbox plugin landing page and select 'Dynamic Product Flow'.

  • Enter the Dynamic Product Flow name (any name, minus spaces).

  • Insert the Flow key.

  • Enter Locale information.

  • Select your Identifier from the dropdown menu. Note: Make sure to choose the same identifier used on the import of product catalogs to Flowbox.

After you have selected the Identifier, you can click on the ‘Configure Flow' button.

Your Dynamic Product Flow in gallery will appear under the Shopify Active Flows in the Dynamic Product Flows in gallery section.

Now you can log in to your Shopify app to customize your Dynamic Product Flow in gallery.

Managing a Dynamic Product Flow in gallery in Shopify App

You can now add this Flow as a section on your product page.

The Flowbox plugin will automatically take the product ID and insert your tagged content from Flowbox and place it into the gallery view (slider) of the product itself.

In the menu on the left-hand side you can customize the look and feel of your Flowbox content. You can choose the number of posts you want to display in the gallery and decide if you want to add social credits and likes.

In comparison to the image above, you can see now the Instagram handle and likes at the top. You can change the background color and move this bar to the bottom if you wish. If you want to hide the social credit and likes, then you can set the font color as transparent.

If you want to remove the Flowbox posts from your gallery then you can remove the section from Shopify. This will not remove your product feed images (non-Flowbox content).


Embedding and implementing the Checkout script

The first step is making sure that you fulfill these requirements:

  • You have the Commerce product enabled and a Product List uploaded to Flowbox.

  • You have collected posts with products connected in Moderate.

  • You have the Checkout Script API Key. Ask your Client Success Manager about this.

1. First, in the Flowbox plugin start page, click on the ‘Configure Checkout Script’ button.

2. Enter your API key and your Identifier. Note: the Identifier must be the same as specified in your uploaded product catalog in Flowbox. For Item Group ID see our note below.

3. Click on ‘Configure’.

4. You will now see a Checkout script in the box. Click to copy this script.

5. Now log into your Shopify admin panel and click on Setting >> Checkout >> Additional scripts. Paste your Checkout script.

6. And that’s it! Now your Checkout script is fully configured.

If you are planning on using Item Group ID as the main identifier when importing your product catalog to Flowbox, furthermore as a parameter in our different scripts, you should be aware of potential limitations with the Flowbox app for Shopify – given that Shopify doesn’t natively support Item Group ID as of today. Please contact support or your dedicated Client Success Manager to discuss a workable solution.

Did this answer your question?