---
title: "Shopify - Manual integration: Creating a Dynamic Product Flow"
url: "https://kb.getflowbox.com/en/article/shopify-manual-integration-creating-a-dynamic-product-flow"
language: "en"
last_updated: "2026-07-02T15:55:40.287Z"
---

# Shopify - Manual integration: Creating a Dynamic Product Flow

A guide to creating a Dynamic Product Flow manually in Shopify

Once you have [created a Flow in the Visual Marketing > Flows menu](https://kb.getflowbox.com/en/article/manage-your-flows) of the Flowbox dashboard, you can display the Flow on your Shopify page.

You can create 3 different types of Flows in 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 Product Flow** – create shoppable galleries on your product pages.

This guide will focus on the *Dynamic Product Flow.*

## Configuring a Dynamic Product Flow

-   First, log in to your Shopify account and go to 'Online Store' and click on 'Themes':

![image.png (566×428)](https://cdn-assets.productfruits.com/fed4175c-f5b8-4382-b5d4-9bea4fe0b150)

-   Click on the 3 dots and 'Edit code':

![image.png (718×561)](https://cdn-assets.productfruits.com/3248fd44-ba60-4d2c-8cdd-981105a879db)

-   Click on 'Sections'. Right-click, and then click on 'New file...':

![](https://cdn-assets.productfruits.com/93a4ea3d-c2ba-4649-88b1-8a73eaee850f)

-   Name your file **'flowbox-dynamic-product.liquid'** and press enter. A file will be created in your 'sections' directory:  
    ![](https://cdn-assets.productfruits.com/74721086-f3c1-4e12-8c28-ab972fb23e35)

-   Copy paste the following code an click on 'Save' (top-right corner):

```
{% assign product_identifier = '' %}  
  
{% if section.settings.product_identifier == 'sku' %}  
  {% assign product_identifier = product.selected_or_first_available_variant.sku %}  
{% elsif section.settings.product_identifier == 'id' %}  
  {% assign product_identifier = product.id %}  
{% endif %}  
  
<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>  
  
<div id="js-flowbox-flow" style="display:block !important;"></div>  
  
<script>  
  window.flowbox('init', {  
    container: '#js-flowbox-flow',  
    key: '{{ section.settings.flowKey }}',  
    locale: '{{ section.settings.flowLocale }}',  
    productId: '{{ product_identifier }}'  
  });  
</script>  
  
{% schema %}  
{  
  "name": "flowboxDynamicProduct",  
  "class": "flowbox-section",  
  "settings": [  
    {  
      "type": "text",  
      "id": "flowKey",  
      "label": "Flow Key"  
    },  
    {  
      "type": "text",  
      "id": "flowLocale",  
      "label": "Locale",  
      "default": "en-EU"  
    },  
    {  
      "type": "select",  
      "id": "product_identifier",  
      "label": "Product Identifier",  
      "options": [  
        { "value": "sku", "label": "Variant SKU" },  
        { "value": "id", "label": "Product ID" }  
      ],  
      "default": "sku"  
    }  
  ],  
	"presets": [
    {
      "name": "Dynamic Product Flow",
      "category": "Flowbox Widgets"
    }
  ]
}
{% endschema %}  
  
{% stylesheet %}  
{% endstylesheet %}
```

> In this code example, we're using a flow named '**Dynamic Product Flow**'. If you want to change the name, make sure to update both "name" fields within the schema section of the code.

-   Click on the 3 dots on top and on 'Customize theme:

![](https://cdn-assets.productfruits.com/2dc4a915-b013-4b88-bfbe-904b90fefa1d)

-   You're currently on the Homepage. Switch to the Default Product page (or the page where you want to implement the flow):

![](https://cdn-assets.productfruits.com/ad23f5e3-b009-494e-920b-2c958871d61f)

-   To add the Flow to your page, click "Add section" and search your Flow by typing the name that was previously set up. Then, select it from the dropdown menu:

![](https://cdn-assets.productfruits.com/407cd277-5e15-4a32-a471-1423cd92fbe4)

-   Click on the newly added section:

![](https://cdn-assets.productfruits.com/9c174a63-6467-40a8-8d9c-8c8320aece86)

-   Add your flow-key, locale and choose which identifier method should be used to trigger the flow (Product ID or Variant SKU). This determines how products are matched between Shopify and Flowbox.

![](https://cdn-assets.productfruits.com/fa26704f-383f-4c63-8a8d-86d76f081f85)

> 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:  
> ![](https://cdn-assets.productfruits.com/1bbb2a23-8fc6-46fd-bd53-a0b52bd47ff9)

> You will see a default locale set to 'en-EU'. Please update this to match the locale used in [your Catalogs](https://kb.getflowbox.com/en/article/how-to-add-a-product-catalog-to-flowbox), as seen in [the "Catalogs"](https://app.getflowbox.com/commerce/catalogs) section from your Flowbox dashboard.  
>   
> The locale combines a language code and a region code, and serves two main purposes:  
>   
> 1\. Translate the widget's text and forms to the selected language.  
> 2\. Specify the catalog from which we should fetch data for assigned products, such as the product titles, product links and the product price's currency.  
>   
> If you wish to apply a different setup for a specific country, you can override the default settings as follows :  
>   
> 1\. Select the desired country:  
> ![](https://cdn-assets.productfruits.com/7a8cad08-9dd2-4fe5-8185-687a906c18ad)  
> 2\. Adjust the relevant settings (e.g., tags, locale, etc.):  
> ![](https://cdn-assets.productfruits.com/71b1b568-d690-4b02-a388-f4802b052056)  
> 3\. Click **Save** to apply the changes .

-   Drag the flow to where you want to position it on the page, and then click 'Save' to see a preview of your Flow.

## More Shopify manual guides

-   [Creating a Static Flow](https://kb.getflowbox.com/en/article/shopify-manual-integration-creating-a-static-flow)
-   [Creating a Dynamic Tag Flow](https://kb.getflowbox.com/en/article/shopify-manual-integration-creating-a-dynamic-tag-flow)
