Shopify: embedding widgets on your Shopify store

Embed your Static, Dynamic Product, or Dynamic Tag Flow directly into your Shopify store โ€” no coding required โ€” using the Flowbox Shopify app.

Using the Flowbox Shopify app

The Flowbox Shopify app allows you to embed Flows directly into your store without any coding knowledge. The connection to Shopify is triggered from the Flowbox platform, as long as the feature is activated for your account. Before proceeding, make sure you have a Shopify account already connected to Flowbox. If you haven't done this yet, please follow the steps in Shopify: connect your Shopify account to Flowbox first.

For code-based integration, refer to the following developer guides instead: Shopify - Manual integration: Creating a Static Flow, Creating a Dynamic Product Flow, and Creating a Dynamic Tag Flow.

Embedding a Flowbox widget in Shopify

You can add four different types of Flows to your Shopify store:

  • Static Flow โ€“ typically used on the homepage or a community page.
  • Dynamic Tag Flow โ€“ ideal for an Instashop or category pages.
  • Dynamic Tag Flow with buttons โ€“ ideal for category pages with on screen navigation
  • Dynamic Product Flow โ€“ creates shoppable galleries on product pages.

To add a Flow, follow these steps in your Shopify admin:

  1. Click on your store, then click Edit theme.
  2. In the left-hand menu, click on Add a section.
  3. In the pop-up that appears, click on the Apps tab.
  4. Select Flowbox Static Flow, Flowbox Dynamic Product Flow, Flowbox Dynamic Tag Flow or Flowbox Dynamic Tag Flow with buttons.

Configuring a widget

In the Flowbox platform:

  1. Go to Visual Marketing โ†’ Flows.
  2. In the Flows list, click on the three-dot menu (โ‹ฏ) next to the Flow you want to embed.
  3. Click Copy Flow Key.

In the Shopify theme editor, select the Flow section you added in the steps above. In the left-hand configuration panel:

  1. Paste the Flow Key into the corresponding field.
  2. In the Locale field, enter the locale that matches the one used in your Flowbox Catalog. Language and region codes should be separated by a dash โ€” for example, en-EU (English, Europe) or sv-SE (Swedish, Sweden).

The locale serves two purposes:

  • It translates the widget's text and forms into the selected language.
  • It specifies which catalog Flowbox uses to fetch product data such as titles, links, and prices.

You can find your catalog's locale in the Catalogs section of your Flowbox dashboard.

  1. Click Save to apply the changes.

Special configuration: Dynamic Product Flow

When embedding a Dynamic Product Flow, you also need to specify the Product Identifier. This determines how products are matched between Shopify and Flowbox.

Select either Product ID or Variant SKU, making sure it matches the identifier used when importing your products into your Flowbox Catalog.

Click Save to apply the changes.

Special configuration: Dynamic Tag Flow

When embedding a Dynamic Tag Flow, you also need to configure two additional fields: Tag Source and Operator.

Tag Source โ€” choose between:

  • Manual tags: manually input the tags you want the Flow to use for fetching content.
  • Collection handle: the Flow will automatically use the Shopify collection handle to determine the tags.

Operator (only applicable when more than one manual tag is specified):

  • All the tags: only posts that contain all of the specified tags will be displayed.
  • At least one tag: posts that match at least one of the specified tags will be displayed.

Click Save to apply the changes.

Special configuration: Dynamic Tag Flow with buttons

When embedding a Dynamic Tag Flow with buttons, you also need to configure two additional fields: Filter button and All button text.

  • Filter button: add one button configuration per line, following the format Label|tag_value, where `Label` is the text to be displayed on the filter button and tag_value its corresponding tag configured in the Flowbox platform.
  • All button text - button label for โ€œAllโ€ tags (no filter applied)