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:
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 â 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.
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.
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.