Installation

In order to implement Flows in your store, please download and install the following app from the VTEX store: Flowbox UGC Platform

Please make sure to install the latest App version: 3.0.0

Implementing Flows on your store

To integrate Flows in the desired pages of your store (homepage and product or category pages) you first need to create them and customise them in Flowbox.

Once you have created the Flows, add a new "widget" line to the "blocks" section of the corresponding JSON template file. These files can be found in your workspace directories. As an example:

Homepage: "store > blocks > home > home.jsonc".
Product pages: "store > blocks > pdp > product.jsonc".
Category pages: "store > blocks > search.jsonc".

In order to style the placement of the "widget" properly, you might want to insert it within an already existing block (such as a "row" element):

"flex-layout.row#widget": {
  "children": ["widget"],
  "props": {
    "horizontalAlign": "center"
  }
}

In such case, you will need to instead add a new "flex-layout.row#widget" line within the template's "blocks" list:

Each new block added to a page template file will be displayed as a "Flowbox Widget" element in the sidebar of the site's visual editor, located in the section "Storefront -> Site Editor" within the VTEX Administration panel.

To rearrange the Flow in your layout, please change the order of the blocks in its corresponding template file (.jsonc).

Widget settings

Clicking on the block will unfold the Flowbox Widget configuration options. Depending on the "Flow Type" you select, different options will be displayed. Regardless of the one you select, all Flows require the Flow Key parameter.

You can retrieve the Flow Key in the Flowbox platform by going to the "Flows" section, clicking on the suspension point icon and clicking on "Copy Flow Key".

Integrating a Static Flow

This is the most basic kind of Flow, the one you might want to use in a Homepage. It displays the content that is manually distributed to it in the Flowbox panel. The only field it requires is the Flow Key.

Integrating a Dynamic Product Flow

This Flow only works in product page templates (i.e.: product.jsonc), as it fetches content that matches the specific product in the page. In order to set it up, you will need to access a product page through VTEX's Site Editor.

The required fields are the following:

Flow Key: unique Flow identifier.
Product Identifier: select the product identifier that matches the one that has been used in order to import your products in your Flowbox Catalog. The available options are:
- SKU
- SKU Reference ID
- Product ID
- EAN
- Reference
- Name Slug

In case of doubt, please check the "Products" section in your Flowbox account and compare the product's identifiers with the product data you have available in VTEX's Admin panel under the "Catalog > Products & SKUs" section. You need to choose the identifier that matches in both VTEX and Flowbox.

Integrating a Dynamic Tag Flow

The Dynamic Tag Flow is ideal for category pages, as it allows to fetch content that matches a specific, previosuly assigned Tag. Before integrating it, please make sure that your content has Tags assigned to them that match the Categories or Departments available in your VTEX site.

When integrating a Dynamic Tag Flow in your "search.jsonc" template, you can force it to appear only on Brand, Department, Category or Subcategory pages depending on where you add the "widget" block. In the following example, the Widget is only integrated in the Category pages:

"store.search#category": {
  "blocks": ["widget","search-result-layout"],
  "props": {
    "context": {
      "skusFilter": "ALL",
      "simulationBehavior": "skip"
    }
  }
},

The Dynamic Tag Flow allows for 2 main options in order to retrieve the Tags is going to use to fetch content from: "Automatic" or "Manual Tags".