How to use the Flow Builder | Shopify

With ReConvert's Flow Builder, you can easily add beautiful upsells and cross-sells to your store in minutes.

The Flow Builder page is designed to allow you to manage upsells and cross-sells all over your store in a single place. On this page you will be able to see each page and step in your customers' purchase flow and decide what widgets to add and when.

This article will get you acquainted with the different parts of the Flow Builder page, so that you know how to use them to set up the right upselling and cross-selling flow for your store.

The page has 4 main areas:

1. Pages

On the left side of the page, you can find the Pages navigation menu. This menu allows you to navigate between the different pages in your store and edit the widgets you added to each of them.

To navigate to your desired page- hover over this menu and click the page of your choice.



In the first version of the Flow Builder, the only available page is Checkout, but we will be adding more as we create widgets for them, so this menu might look a little different in your store:

2. Conditions

One step right from the Pages menu, you can find the Conditions menu.

Conditions allow you to define specific cases in which specific widgets will be displayed to the customers.

For example: If the customer purchases product A, show them widgets X, Y, and Z.

Note: in ReConvert's legacy funnels, this was called triggers.



When you click a condition, 2 things happen on the page:
The Slots section shows the slots and widgets created for this condition
The Actions menu shows the condition details and allows editing them

Default condition

The default condition is automatically created for each page. This condition is there to catch all sessions that don't match any of your other conditions, to ensure a generic option so that each customer sees some widgets during their purchase flow.

You can't delete or move the default condition- it will always be at the bottom of your list of conditions for a page. You can leave the slots in this condition blank to not show anything by default, but it is not recommended.

Managing conditions

You can create as many conditions as you want per page in the Flow.

To create a condition, click Add condition:



In the Actions menu, edit your condition and click Save:



Once a condition is created, you will see it on your Conditions menu, and be able to click it to edit it as needed.



To learn more about how conditions work and how to use them, go to our Conditions help article.

3. Slots

To the right of the Conditions section, you will find the Slots section of the Flow Editor.

In this section, you can view and manage the slots for each condition- create, delete, and edit them.

What are slots?

Slots are containers of widgets- in a condition, each slot represents one or more widgets that can be placed on the page together.

Any new condition that you create will be created without any slots- to start adding widgets, you must create a slot to contain them.

Once the slot is created, and widgets are added to it, you can place it on the page in the Shopify editor.

To learn how to do that, see our article about placing slots in the Shopify editor.

Manage slots

In a new condition (or an empty default condition), click the Create a slot button:



A new slot will be created, and the ReConvert Editor will open up automatically, with a product upsell widget added to the slot.

In the editor, you can manage the widgets in the slot. You can edit the pre-created widget, remove it, add new widgets, etc.

An unlimited number of widgets can be added to each slot, but take into account that all of the widgets added to a specific slot will be added and grouped together on the page.



Read more about using the ReConvert editor here.

Once you finish editing your widgets, you can save them and exit the editor back to the Flow Builder.

You will be redirected back to the specific conditions you create the slot in, and you will now see the slot you've just created and the widgets card attached to it:



By clicking on the widgets card, you can edit or delete it, view analytics, and turn it on and off.

Each slot has a number and a name.

The slot number is automatically assigned when it's created and can't be changed- this number will be used to place the slot on the page in the Shopify editor, which will be explained later in this article.

The slot name is an internal name for your use- you can change it to represent the slot's contents in a way that makes sense to you.

To change the name, simply double-click it:



After creating your first slot for a condition, you can create more by clicking one of the Create a slot buttons.

You can create up to 10 slots per condition.

Placing slots in the Shopify editor

The last step, once you've created all of your slots, is to place them in the Shopify editor, where you want them to appear on the page.

This is a necessary step for your widgets to show up for your customers while they are shopping.

To learn how to do that, please read our article here on how to place slots in the Shopify editor.

4. Actions menu

At the far right side of the page, you will find the Actions menu.

This menu is where the settings of all of your elements can be viewed and edited- it is where you will take most of your actions on the Flow Builder page.

When you click on any element on the page, the actions menu will change to show relevant information and actions for this element.

When you click on a condition or create a new condition, the actions menu is where you will set up the condition:

Accessing the flow editor

When you click on a slot, you will be able to edit its widgets within the flow editor:



In the future, this menu will also allow you to control a page's general settings and view analytics.

To learn more about what you can do for each element on the page, you can click the help article linked at the top of the actions menu. This article changes depending on the element you are currently editing:

What's next?

This article is a basic introduction to the Flow Builder page, its different parts, and the actions you can take with it.

Now that you have a basic understanding of how to use this page, you can start by creating your first slot and adding widgets to it. Remember- there are help articles every step of the way, and our support team is always available when you need help.

Happy upselling!

Well, That’s a Wrap!

If this article did not solve your issue, our support team is available for you 24/7, just click the live chat button at the bottom-right corner of this page.

📢 Did you know we have a YouTube channel? Don’t forget to subscribe to the channel to keep in touch with us and our news and updates.
🙏 If you find our app useful, help other merchants find it by leaving us an honest review on the Shopify App Store! It means the world to us.
📧 Please let us know if you spot any typos, mistakes, or omissions via care@reconvert.com

Updated on: 12/12/2024