All Collections
UGC - Developer Guides
eCommerce integrations
VTEX
VTEX plugin guide: installation and configuration
VTEX plugin guide: installation and configuration

A guide to installing and implementing Flowbox on VTEX

F
Written by Fernando Valdivielso
Updated over a week ago

Installation

In order to implement Flows in your store and the conversion tracking script, please download and install the following apps from the VTEX store:

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 template file. These files can be found in your workspace directories:

  • Homepage: "store > blocks > home > home.jsonc".

  • Product pages: "store > blocks > pdp > product.jsonc".

  • Category pages: "store > blocks > search.jsonc".

Each new block added to a page file will be displayed in the sidebar of the site's visual editor, located in the section "Store setup -> CMS -> Site Editor" within the VTEX administration panel.


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

Clicking on the block name will unfold the Flowbox Widget (Flow) configuration options, where you must enter the Flow Key of the Flow you want to display on the page.

The "Enable product types" setting has no use for homepage Flows (as this page is not associated with any specific category or product) but can be enabled for Flows on product pages and category pages:

  • On category pages, enable it so that the Flowbox widget (Flow) displays images and videos that have been linked to products in the category being viewed.

  • On product pages, enable it to include images and videos linked to other products in the same category as the product being viewed.

Implementing the Checkout script

After installing the Flowbox UGC Platform app, access the settings and enter your API key you received during the onboarding. If you don't have it at hand, please contact your Customer Success Manager and they'll provide it for you.
โ€‹

Did this answer your question?