This document will work you through how you can using a Shopify App called Flow Buddy to help you trigger a workflow in Shopify Flow.

This tutorial involves some code development, so if you are not a programmer / web developer, then you might struggle with this document. Otherwise, read on.

What are we building

We will build a very simple way for us to add a product variant to a customer metafield. This workflow will be similar to adding a product to a customer wishlist. First, let’s review the workflow in Flow using Shopify Flow and Flow Buddy apps.

Overview

This is an overview of what the flow will look like

This workflow will start with a storefront trigger. Then we will parse the data passed from the event with the Run code action block. We will add a conditional that checks to see if the event name is wishlist. If it is then we will append a value to the customer metafield. Finally, we will log the output. Both the storefront trigger and the append customer metafield action are from the Flow Buddy app, which adds a number of additional triggers and actions to build robust workflows in Flow.

Now that the workflow is set up, we have to add some code to our theme to ensure that the storefront can communicate to the Flow app.

Add code to theme

For demonstration purposes, I added a button to my theme on the home page hero section:

I added some code in Javascript that passes data to Flow Buddy app when I click my test Trigger Flow button:

<button
  id="triggerFlow"
  class="
    size-style
    button-secondary
    button-secondary--AakZMVm5pNE55V1RkO__button_H9gpTf
  "
  style="--size-style-width: fit-content;--size-style-height: ;--size-style-width-mobile: fit-content; --size-style-width-mobile-min: fit-content;"
>
  Trigger Flow
</button>
...

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const triggerFlowBtn = document.querySelector('#triggerFlow');
    triggerFlowBtn.addEventListener('click', () => {
      const body = JSON.stringify({
        name: 'wishlist',
        data: {
          type: 'track',
          c_id: {SOME_CUSTOMER_ID},
          variantIds: ['gid://shopify/ProductVariant/{SOME_VARIANT_ID_NUMBER}'],
        },
      });
      const config = {
        body,
        method: 'POST',
      };
      fetch(`https://${window.Shopify.shop}/a/t/storefront`, config)
        .then((r) => r.json())
        .then((j) => {
          alert('STARTED A WORKFLOW IN SHOPIFY FLOW');
          console.log(j);
        })
        .catch((e) => {
          alert('FAILED TO TRIGGER FLOW');
          console.log(e);
        });
    });
  });
</script>

Notice in the code that the click function has a body variable. For demonstration purposes, I have hardcoded data here. The storefront trigger expects there to be a name and data property in the POST body. Any data passed here will be passed along to Shopify Flow.

Also take note of the URL. Requests must be sent here to trigger Flow with Storefront Trigger.

Set up customer metafield definition

One more thing is needed for this demonstration and that is the creation of a customer metafield definition. Go to Shopify admin > Settings > Metafields and metaobjects > Customers > Add definition. Now create a metafield key and namespace (and take note of the key and namespace because you’ll need them later). The type should be a list of Product Variants.

Run code explanation

Before we click the Trigger Flow button, let’s explain what happens in more detail in the Run code and Append customer metafield action blocks, which are back in Shopify Flow.