first attempt

.gitignore

@@ -0,0 +1,16 @@
+.DS_Store
+
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# misc
+.env
+.venv
+.lock
+.chainlit/
+/data/vectors/

Dockerfile

@@ -0,0 +1,29 @@
+# Get a distribution that has uv already installed
+FROM ghcr.io/astral-sh/uv:python3.13-bookworm-slim
+
+# Add user - this is the user that will run the app
+# If you do not set user, the app will run as root (undesirable)
+RUN useradd -m -u 1000 user
+USER user
+
+# Set the home directory and path
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH        
+
+ENV UVICORN_WS_PROTOCOL=websockets
+
+
+# Set the working directory
+WORKDIR $HOME/app
+
+# Copy the app to the container
+COPY --chown=user . $HOME/app
+
+# Install the dependencies
+RUN uv sync && uv add websockets
+
+# Expose the port
+EXPOSE 7860
+
+# Run the app
+CMD ["uv", "run", "chainlit", "run", "app.py", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,24 @@
+import chainlit as cl
+from qdrant_client import QdrantClient
+from rag_graph import RagGraph
+
+@cl.cache
+def get_qdrant_client():
+  from qdrant_client import QdrantClient
+  return QdrantClient(path='data/vectors')
+
+@cl.on_chat_start
+async def on_chat_start():
+  qdrant_client = get_qdrant_client()
+  rag_graph = RagGraph(qdrant_client)
+  rag_graph.create_rag_graph()
+
+  cl.user_session.set("rag_graph", rag_graph)
+
+@cl.on_message
+async def on_message(question: cl.Message):
+  msg = cl.Message(content="")
+  await msg.send()  # Initialize the message first
+  
+  rag_graph = cl.user_session.get("rag_graph")
+  await rag_graph.stream(question.content, msg)  # Update the message when streaming is complete

chainlit.md

@@ -0,0 +1,14 @@
+# Welcome to Chainlit! 🚀🤖
+
+Hi there, Developer! 👋 We're excited to have you on board. Chainlit is a powerful tool designed to help you prototype, debug and share applications built on top of LLMs.
+
+## Useful Links 🔗
+
+- **Documentation:** Get started with our comprehensive [Chainlit Documentation](https://docs.chainlit.io) 📚
+- **Discord Community:** Join our friendly [Chainlit Discord](https://discord.gg/k73SQ3FyUh) to ask questions, share your projects, and connect with other developers! 💬
+
+We can't wait to see what you create with Chainlit! Happy coding! 💻😊
+
+## Welcome screen
+
+To modify the welcome screen, edit the `chainlit.md` file at the root of your project. If you do not want a welcome screen, just leave this file empty.

crawler.py

@@ -0,0 +1,20 @@
+import asyncio
+import logging
+from scraper.async_crawler import AsyncCrawler
+
+logging.basicConfig(
+  level=logging.INFO,
+  format='%(asctime)s - %(levelname)s - %(message)s'
+)
+
+async def main():
+  try:
+    start_url = "https://shopify.dev/docs/apps/build/flow"
+    crawler = AsyncCrawler(start_url)
+    await crawler.run()
+  except Exception as e:
+    logging.error(f"Crawler failed: {str(e)}")
+    raise
+
+if __name__ == "__main__":
+  asyncio.run(main())

data/flow/projects/Fraud-protection-for-gift-order.json

@@ -0,0 +1,87 @@
+{
+  "f05032018172f8f0dbe0b75152de0622e23ce6b10b6821a203bc2ef19aecbc42": {
+    "__metadata": { "version": 0.1 },
+    "root": {
+      "steps": [
+        {
+          "step_id": "33bd9630-3d9c-11ef-a96f-2dc942027bf2",
+          "step_position": [900, 1100],
+          "config_field_values": [],
+          "task_id": "dca67f51-b1b3-4c3e-b3cb-c38f32edf26d",
+          "task_version": "1.0",
+          "task_type": "TRIGGER",
+          "description": null,
+          "note": null,
+          "name": null
+        },
+        {
+          "step_id": "3b3a3e40-3d9c-11ef-a96f-2dc942027bf2",
+          "step_position": [1260, 1080],
+          "config_field_values": [
+            { "config_field_id": "order_id", "value": "order.id" },
+            { "config_field_id": "reason", "value": "inventory" },
+            { "config_field_id": "email", "value": "false" },
+            { "config_field_id": "refund_items", "value": "false" },
+            { "config_field_id": "refund_shipping", "value": "false" },
+            { "config_field_id": "restock", "value": "true" }
+          ],
+          "task_id": "shopify::admin::cancel_order",
+          "task_version": "0.1",
+          "task_type": "ACTION",
+          "description": "Cancel the order with high potential of fraud order",
+          "note": null,
+          "name": null
+        },
+        {
+          "step_id": "5f723f10-3d9c-11ef-a96f-2dc942027bf2",
+          "step_position": [1620, 1080],
+          "config_field_values": [
+            { "config_field_id": "customer_id", "value": "order.customer.id" },
+            { "config_field_id": "tags", "value": "[\"fraud\"]" }
+          ],
+          "task_id": "shopify::admin::add_customer_tags",
+          "task_version": "0.1",
+          "task_type": "ACTION",
+          "description": "Add tag \"fraud\" to the customer. This tag can be used with other flows to block those customers.",
+          "note": null,
+          "name": null
+        },
+        {
+          "step_id": "e4e18440-e8a4-11ef-b3d8-7ffa6d7e8da1",
+          "step_position": [1980, 1080],
+          "config_field_values": [
+            { "config_field_id": "condition", "value": "" }
+          ],
+          "task_id": "shopify::flow::condition",
+          "task_version": "0.1",
+          "task_type": "CONDITION",
+          "description": null,
+          "note": null,
+          "name": null
+        }
+      ],
+      "links": [
+        {
+          "from_step_id": "33bd9630-3d9c-11ef-a96f-2dc942027bf2",
+          "from_port_id": "output",
+          "to_step_id": "3b3a3e40-3d9c-11ef-a96f-2dc942027bf2",
+          "to_port_id": "input"
+        },
+        {
+          "from_step_id": "3b3a3e40-3d9c-11ef-a96f-2dc942027bf2",
+          "from_port_id": "output",
+          "to_step_id": "5f723f10-3d9c-11ef-a96f-2dc942027bf2",
+          "to_port_id": "input"
+        },
+        {
+          "from_step_id": "5f723f10-3d9c-11ef-a96f-2dc942027bf2",
+          "from_port_id": "output",
+          "to_step_id": "e4e18440-e8a4-11ef-b3d8-7ffa6d7e8da1",
+          "to_port_id": "input"
+        }
+      ],
+      "patched_fields": [],
+      "workflow_name": "Fraud protection for gift order"
+    }
+  }
+}

data/scraped/_sitemap.json

@@ -0,0 +1,59 @@
+{
+  "https://shopify.dev/docs/apps/build/flow.txt": [
+    "https://shopify.dev/docs/apps/build/flow/triggers",
+    "https://shopify.dev/docs/apps/build/flow/templates/create-a-template",
+    "https://shopify.dev/docs/apps/build/flow/migrate-legacy-extensions",
+    "https://shopify.dev/docs/apps/build/flow/track-lifecycle-events",
+    "https://shopify.dev/docs/apps/build/flow/templates",
+    "https://shopify.dev/docs/apps/build/flow/actions"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/triggers.txt": [
+    "https://shopify.dev/docs/apps/build/flow/triggers/reference",
+    "https://shopify.dev/docs/apps/build/flow/triggers/create"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/migrate-legacy-extensions.txt": [],
+  "https://shopify.dev/docs/apps/build/flow/templates/create-a-template.txt": [
+    "https://shopify.dev/docs/apps/build/flow/templates/reference"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/track-lifecycle-events.txt": [
+    "https://shopify.dev/docs/apps/build/flow/triggers",
+    "https://shopify.dev/docs/apps/build/flow/actions",
+    "https://shopify.dev/docs/apps/build/flow/triggers/create",
+    "https://shopify.dev/docs/apps/build/flow"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/templates.txt": [
+    "https://shopify.dev/docs/apps/build/flow/templates/create-a-template"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/actions.txt": [
+    "https://shopify.dev/docs/apps/build/flow/configure-complex-data-types",
+    "https://shopify.dev/docs/apps/build/flow/actions/build-config-ui",
+    "https://shopify.dev/docs/apps/build/flow/actions/create"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/triggers/reference.txt": [
+    "https://shopify.dev/docs/apps/build/flow/configure-complex-data-types",
+    "https://shopify.dev/docs/apps/build/flow/triggers/create"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/triggers/create.txt": [
+    "https://shopify.dev/docs/apps/build/flow/actions",
+    "https://shopify.dev/docs/apps/build/flow/configure-complex-data-types",
+    "https://shopify.dev/docs/apps/build/flow/track-lifecycle-events",
+    "https://shopify.dev/docs/apps/build/flow"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/configure-complex-data-types.txt": [],
+  "https://shopify.dev/docs/apps/build/flow/templates/reference.txt": [],
+  "https://shopify.dev/docs/apps/build/flow/actions/build-config-ui.txt": [
+    "https://shopify.dev/docs/apps/build/flow/actions"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/actions/create.txt": [
+    "https://shopify.dev/docs/apps/build/flow/actions/endpoints",
+    "https://shopify.dev/docs/apps/build/flow/triggers",
+    "https://shopify.dev/docs/apps/build/flow/actions/build-config-ui",
+    "https://shopify.dev/docs/apps/build/flow/configure-complex-data-types",
+    "https://shopify.dev/docs/apps/build/flow/triggers/create",
+    "https://shopify.dev/docs/apps/build/flow/track-lifecycle-events"
+  ],
+  "https://shopify.dev/docs/apps/build/flow/actions/endpoints.txt": [
+    "https://shopify.dev/docs/apps/build/flow/actions",
+    "https://shopify.dev/docs/apps/build/flow/actions/build-config-ui"
+  ]
+}

data/scraped/clean/flow.txt

@@ -0,0 +1,90 @@
+
+
+[Shopify Flow](https://apps.shopify.com/flow) is an app that allows merchants to customize their store through automation. As a developer, you can integrate your app with the Flow platform through custom tasks, such as triggers and actions.
+
+![A workflow for a low stock notification displaying a trigger, condition, and action](/assets/apps/flow/example-workflow-inventory-quantity-changed.png)
+
+This guide introduces you to the different extensions you can create, building a Flow trigger and action, and considerations when making changes to your extensions.
+
+## Why build for Flow
+
+Building for Flow can help you to increase the value of your app by allowing merchants to automate their business processes. For example, suppose that you have a review app. After a review is created, merchants might want to send a notification (using email, Slack, or SMS), award loyalty points, and more. If you build the `Review created` trigger, Flow allows merchants to do any of those actions with your app. By integrating with Flow, you can:
+
+- **Improve integrations between your app, Shopify, and other apps**: Any task you build can be used with the triggers and actions that Flow already provides, which immediately connects your app to thousands of new features.
+- **Save development time**: Rather than building and maintaining direct integrations with many other apps, you can integrate with Flow and provide similar value to your merchants.
+- **Improved visibility**: Merchants can discover your templates or tasks in Flow, even if they don't have your app installed. Additionally, when you integrate with Flow, you receive a **Works with Flow** badge on your listing in the Shopify App Store. Your app will also be listed in the [Flow app directory](https://apps.shopify.com/collections/connectors-for-shopify-flow).
+
+## What you can build
+
+As a Partner you can build one or more tasks related to your app for your merchants to use. These merchants need to have both your app and Shopify Flow installed. Shopify Flow includes the following task types:
+
+| Extension type | Description | Example |
+|---|---|---|
+| [Trigger](/docs/apps/build/flow/triggers) | An event that starts a workflow, and can be something that happens in a store or in an app. | A new order is created in a merchant's online store. |
+| Condition | A rule that determines whether an action will be taken. As a developer you cannot create a condition task. | A condition is set to check whether the total amount paid for the order is over $200.00. |
+| [Action](/docs/apps/build/flow/actions) | A task that's executed in a store or in an app when certain conditions are met. | If the total amount paid for the order is over $200.00, then a tag is added to the customer account that placed the order. |
+| [Template](/docs/apps/build/flow/templates) | An example that demonstrates how your task works for a key use case. Templates are available through Flow's template library. | A workflow that sends an internal email when your trigger runs. |
+
+## Plans supported
+
+Flow is an optional app that's available to Shopify merchants on any paid plan. Flow is widely adopted by Shopify merchants, especially those with stores on Shopify Plus.
+
+Flow features [differ by plan](https://help.shopify.com/en/manual/shopify-flow). For apps, the primary difference is that if you have a [custom app](https://help.shopify.com/en/manual/apps/app-types/custom-apps), your Flow app extensions are available only to a [Shopify Plus](https://www.shopify.com/plus) store that has your app installed.
+
+## Templates
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  [create a template](/docs/apps/build/flow/templates/create-a-template)  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+## Getting started
+
+<div class="resource-card-grid">
+    <a class="resource-card" href="/docs/apps/build/flow/triggers" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/authentication"
+     data-alt-src="/assets/resource-cards/authentication-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image">    <h3 class="resource-card__title">
+      Learn more about triggers
+    </h3>
+    <p class="resource-card__description">Connect your app to Shopify Flow so that your app can send an event that starts a workflow.  </a>
+</div>
+<p>  <a class="resource-card" href="/docs/apps/build/flow/actions" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/star"
+     data-alt-src="/assets/resource-cards/star-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image">    <h3 class="resource-card__title">
+      Learn more about actions
+    </h3>
+    <p class="resource-card__description">Connect your app to Shopify Flow so that your app receives data when a workflow action runs.  </a>
+</div>
+<p>  <a class="resource-card" href="/docs/apps/build/flow/templates" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/filesystem"
+     data-alt-src="/assets/resource-cards/filesystem-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image">    <h3 class="resource-card__title">
+      Learn more about Flow templates
+    </h3>
+    <p class="resource-card__description">Create workflow templates to showcase your triggers and actions.  </a>
+</div>
+<p>  <a class="resource-card" href="/docs/apps/build/flow/track-lifecycle-events" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/changelog"
+     data-alt-src="/assets/resource-cards/changelog-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image">    <h3 class="resource-card__title">
+      Lifecycle events
+    </h3>
+    <p class="resource-card__description">Get notified about events related to your Flow triggers and actions.  </a>
+</div>
+<p>  <a class="resource-card" href="/docs/apps/build/flow/migrate-legacy-extensions" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/cli"
+     data-alt-src="/assets/resource-cards/cli-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image">    <h3 class="resource-card__title">
+      Migrate legacy Flow extensions
+    </h3>
+    <p class="resource-card__description">Learn how to migrate your existing extensions from the Partner Dashboard to CLI-managed.  </a>
+

data/scraped/clean/flow_actions.txt

@@ -0,0 +1,16 @@
+
+
+## How actions work
+
+An action is a workflow component in Shopify Flow. It represents a task that's executed in a store or in an app when certain conditions are met. You can connect your app to Shopify Flow so that your app receives data when a workflow action runs.
+
+This guide shows you how to add an action to your app so that merchants can use it in their workflows.
+
+![A diagram that show how third party actions interface with Flow ](/assets/apps/flow/action_diagram.png)
+
+## Next steps
+
+- Follow our step by step guide on [how to create and test a Flow action](/docs/apps/build/flow/actions/create).
+- Check out our action endpoint guide for more information on how to setup an [execution endpoint](/docs/apps/build/flow/actions/endpoints#flow-action-execution), a [custom configuration page preview endpoint](/docs/apps/build/flow/actions/endpoints#custom-configuration-page-preview) and [custom validation](/docs/apps/build/flow/actions/endpoints#custom-validation).
+- Learn more about how to [return complex data](/docs/apps/build/flow/configure-complex-data-types) in a Flow action.
+- Interested in building a custom configuration page? Follow this [guide](/docs/apps/build/flow/actions/build-config-ui) to learn more.

data/scraped/clean/flow_actions_build-config-ui.txt

@@ -0,0 +1,264 @@
+
+
+To give merchants a more seamless action configuration experience, and to allow them to manage resources that are external to Shopify Flow, you can embed a page from your app in the Shopify Flow editor.
+
+In your Shopify Flow action configuration, merchants see a preview with an image and text that's fetched from your [custom configuration page preview URL](/docs/apps/build/flow/actions/endpoints#custom-configuration-page-preview). Merchants can click the button to access the custom configuration page.
+
+<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/flow/ccp-preview-d0bce046a2f45d366041698ab3e42abbf3ebd3a191696e16acaecb7718da5afb.png" class="lazyload" alt="A custom configuration page preview with an "Edit Email" button." width="899" height="737"></figure>
+
+Your custom configuration page is then displayed in a frame in the Shopify admin.
+
+<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/flow/ccp-app-bridge-a41ecd52945725531037786df500785ea47a89f16b7df392e19be619bd133f64.png" class="lazyload" alt="The custom configuration page is rendered with an App Bridge title bar." width="1253" height="756"></figure>
+
+In this tutorial, you'll learn how to render a custom configuration page in Shopify Flow, customize the page frame, and access data relevant to your action in the custom configuration page context.
+
+## Requirements
+
+- You've created a [Partner account](https://www.shopify.com/partners).
+- You've [created an app](/docs/apps/build/scaffold-app).
+
+## Resources
+
+To implement this feature, you'll use the following:
+
+- [Shopify App Bridge](/docs/api/app-bridge)
+- App Bridge components
+- App Bridge actions specific to the custom configuration page
+
+## Implementing a custom configuration page
+
+To build a custom configuration page, you'll [use Shopify App Bridge to render a page from your app page in Shopify Flow](#use-shopify-app-bridge-to-render-your-app-page).
+
+From the context of the custom configuration page, you can then [access step and property information](#access-action-information) that you can use to display the appropriate information.
+
+You can also [add additional buttons](#add-buttons-to-the-app-bridge-title-bar) to the App Bridge title bar, or [trigger a redirect to the previous page](#return-to-the-previous-page).
+
+## Use Shopify App Bridge to render your app page
+
+> Note:
+> The specifics of the Custom Configuration Page integration varies between Shopify App Bridge versions. Make sure you implement the integration specific to your Shopify App Bridge version.
+
+To render your custom configuration page, you need to integrate Shopify App Bridge on the route that you want to render. To learn about setting up Shopify App Bridge, refer to one of the following pages:
+
+- [Getting started with Shopify App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup)
+- [Getting started with App Bridge React](/docs/api/app-bridge-library#react)
+
+### Access action information
+
+In the context of the custom configuration page, Shopify Flow makes the following action information available:
+
+- **A `step_reference` search parameter**: `step_reference` is a unique ID for the step within a workflow, and can be used to identify the resource that the merchant is requesting.
+- **Property data**: Properties contains the extension fields data that make up your [action payload schema](/docs/apps/build/flow/actions/endpoints#request). The properties are passed as an object containing the properties as key-value pairs:
+
+                                                                    
+        
+
+    ```json
+    {
+      <property-name>: <property-value>
+    }
+    ```
+
+        
+
+### Shopify App Bridge integration for versions 4.X.X and up
+
+#### Register to the Custom Configuration Page's intent
+
+To access property data with Shopify App Bridge version 4.X.X and up, you will need to use the `shopify.intents` API. The following example code allows you to register to the Custom Configuration Page's intent:
+
+```jsx
+import { useAppBridge } from '@shopify/app-bridge-react'
+
+const Application = () => {
+  const shopify = useAppBridge()
+  const [intent, setIntent] = useState({})
+
+  useEffect(() => {
+    const cleanup = shopify.intents.register((intent) => {
+      setIntent(intent)
+    })
+
+    return () => cleanup()
+  }, []);
+
+  return <>...</>
+}
+```
+
+The `intent` object will contain the following data:
+
+| Field   | Data Type | Description                                                                                           |
+| ------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| action  | `string`    | The action that has been registered for. In the case of the Custom Configuration Page, it will always be set to `configure`.     |
+| type    | `string`    | A GID with the following structure: `gid://flow/stepReference/<step-reference>`.                     |
+| data    | `object`    | An object that contains the `properties` data.                                                            |
+| finish  | `method`  | A function that allows you to navigate to the previous page.                                      |
+
+The register method also returns a cleanup function, which you can use to unregister from the intent when your component is unmounting.
+
+#### Return to the previous page
+
+By default, the title bar of the custom configuration page includes an **Exit** button that the user can use to return to the previous page. You can choose to trigger a redirect to the previous page using the `intent.finish()` method:
+
+```jsx
+<Button
+  primary
+  onClick={() => {
+    intent.finish()
+  }}
+>
+  Go back to Flow
+</Button>
+```
+
+#### Add buttons to the App Bridge title bar
+
+You can add more actions to the navigation bar by using the **[ui-title-bar](/docs/api/app-bridge-library/web-components/ui-title-bar)** element. Only primary and secondary actions are supported.
+
+```jsx
+function Page() {
+  return <ui-title-bar>
+    <button variant="primary" onClick={() => console.log('Primary action')}>
+      Primary action
+    </button>
+    <button onClick={() => console.log('Secondary action')}>
+      Secondary action
+    </button>
+  </ui-title-bar>
+}
+```
+
+### Shopify App Bridge integration for versions 3.X.X and down
+
+#### Request property data
+
+To access property data, you need to subscribe to `APP::APP_FRAME::PROPERTIES_EVENT`, and then request the properties by triggering the `APP::APP_FRAME::REQUEST_PROPERTIES` event. The following example code subscribes to the properties event and requests the action properties in React:
+
+```jsx
+import { useAppBridge } from '@shopify/app-bridge-react'
+
+const Application = () => {
+  const app = useAppBridge()
+  const [propertiesData, setPropertiesData] = useState({})
+
+  useEffect(() => {
+    const unsubscribeToPropertiesEvent = app.subscribe(
+      'APP::APP_FRAME::PROPERTIES_EVENT',
+      payload => {
+        setPropertiesData(payload['properties'])
+      },
+    )
+
+    return unsubscribeToPropertiesEvent
+  }, [app])
+
+  useEffect(() => {
+    app.dispatch({
+      type: 'APP::APP_FRAME::REQUEST_PROPERTIES',
+      group: 'AppFrame',
+    })
+  }, [])
+
+  return (...)
+}
+```
+
+#### Return to the previous page
+
+By default, the title bar of the custom configuration page includes an **Exit** button that the user can use to return to the previous page. This might be the Shopify Flow editor. However, you can choose to trigger a redirect to the previous page using `APP::APP_FRAME::NAVIGATE_BACK`:
+
+```jsx
+app.dispatch({
+  type: 'APP::APP_FRAME::NAVIGATE_BACK',
+  group: 'AppFrame',
+})
+
+```
+
+#### Add buttons to the App Bridge title bar
+
+You can add more actions to the App Bridge title bar in one of two ways:
+
+- Using `@shopify/app-bridge`: Use the [`Button.create`](/docs/api/app-bridge/previous-versions/actions/button#create-a-button) initializer to create the buttons, then pass them to the [`Titlebar.create`](/docs/api/app-bridge/previous-versions/actions/titlebar#plain-javascript) initializer to set the buttons. You need to keep a reference to the Titlebar instance if you wish to do additional updates after the initialization.
+- Using `@shopify/app-bridge-react`: Pass the primary and secondary actions to the [`TitleBar`](/docs/api/app-bridge/previous-versions/actions/titlebar#react) React component.
+
+Only primary and secondary actions on the TitleBar are supported. Other App Bridge actions are ignored.
+
+```js
+import { TitleBar, Button } from '@shopify/app-bridge/actions'
+
+// create the buttons
+const primaryBtn = Button.create(app, {
+  label: 'Button 1',
+})
+const secondaryBtn = Button.create(app, {
+  label: 'Button 2',
+})
+
+// add click handlers
+primaryBtn.subscribe(Button.Action.CLICK, () => {
+  console.log('button 1 clicked')
+})
+secondaryBtn.subscribe(Button.Action.CLICK, () => {
+  console.log('button 2 clicked')
+})
+
+const titleBar = TitleBar.create(app, {
+  title: '',
+  buttons: {
+    primary: primaryBtn,
+    secondary: [secondaryBtn],
+  },
+})
+
+// update buttons after initialization
+const newPrimary = Button.create(app, {
+  label: 'New button',
+})
+newPrimary.subscribe(Button.Action.CLICK, () => {
+  console.log('new primary button clicked')
+})
+
+titleBar.set({
+  buttons: {
+    primary: newPrimary,
+    secondary: [secondaryBtn],
+  },
+})
+
+```
+```jsx
+import { TitleBar } from '@shopify/app-bridge-react'
+
+function Page() {
+  const buttons = {
+    primaryAction: {
+      content: 'Button 1',
+      onAction: () => {
+        console.log('button 1 clicked')
+      },
+    },
+    secondaryActions: [
+      {
+        content: 'Button 2',
+        onAction: () => {
+          console.log('button 2 clicked')
+        },
+      },
+    ],
+  }
+
+  return <TitleBar title="" {...buttons} />
+}
+```
+
+## Next steps
+
+- Add [custom configuration page preview URL](/docs/apps/build/flow/actions/endpoints#custom-configuration-page-preview) and [custom validation](/docs/apps/build/flow/actions/endpoints#custom-validation) endpoints to your app.
+
+- Add your custom configuration page preview URL, custom configuration page URL, and custom validation URL to [your Shopify Flow action configuration](/docs/apps/build/flow/actions).
+
+> Note:
+> To add a custom configuration page to your action, you also need to add a custom validation endpoint.
+

data/scraped/clean/flow_actions_create.txt

@@ -0,0 +1,180 @@
+
+
+To create an action that merchants can use in their workflows, you need to add the action to your app. The action needs to contain the following information:
+
+- The fields that the merchant needs to complete when they add the action to their workflows
+- The URL that Shopify Flow uses to send (POST) the contents (JSON payload) of the action to your app
+
+You also need to configure your app to process the data from the POST request when it arrives and to send status codes back to Shopify Flow.
+
+To enhance the merchant experience and more closely integrate external systems, you can also [build a custom configuration page](/docs/apps/build/flow/actions/build-config-ui). To improve the reliability of your action, you can add [custom validation](/docs/apps/build/flow/actions/endpoints#custom-validation) for action properties.
+
+## Requirements
+
+- You have the following:
+  - A test web server that has access to the Internet, so that it can receive POST requests from Shopify Flow
+  - A test app that works with the test web server
+  - A development store that has [Shopify Flow](https://apps.shopify.com/flow) and the test app installed
+
+## Step 1: Create a Flow Action
+
+To give your Flow action a meaningful name, use the following guidelines:
+
+- Use a present-tense verb + object acted on format. For example, `Place auction bid`.
+- Use sentence case.
+- Don't use punctuation.
+- Separate words using spaces.
+
+### Using Shopify CLI
+
+Use the Shopify CLI to generate a new extension:
+
+1. Navigate to your app directory.
+2. Run the following command:
+
+```bash
+#!/bin/bash
+shopify app generate extension
+```
+
+3. Select the `Flow Action` as the type of extension.
+4. Provide a meaningful name for your extension.
+
+After you've followed the prompts, Shopify CLI generates the extension’s file representation in your app's `/extensions` directory and gives you a success message. You can then go into your app's `/extensions` directory and start editing your new extension.
+
+The file structure of your extension should look like the following:
+
+```
+/place-auction-bid
+  shopify.extension.toml
+```
+
+To learn more about the extensions file structure, refer to [App structure](/docs/apps/build/cli-for-apps/app-structure) and the documentation for your extension type.
+
+### Using the Partner Dashboard
+
+1. In your Partner Dashboard, click [Apps](https://partners.shopify.com/current/apps).
+2. Select the app that you want to add your Shopify Flow action to.
+3. Click **Extensions**, then click **Create** or **Create extension**.
+4. Under the **Flow** tab, click **Flow/Actions**.
+5. In the **Extension name** field, name your action, such as `Place auction bid`. This name is used only for internal purposes.
+6. Enter a title and description for the action. In the **Action Preview** area, you can see how the title and action display to merchants when they're choosing actions in Shopify Flow.
+7. Enter the URL for the action execution endpoint that you created. Shopify Flow sends the action's JSON payload to this endpoint when it's about to execute your action.
+
+## Step 2: Customize a Flow action configuration file
+
+In this section you'll use the default action template and update it to be a functional extension example. Once you have generated a Flow extension using Shopify CLI, follow the instructions below:
+
+1. Change the description to `Place a bid on an auction`.
+2. Update the `extensions.runtime_url` to an endpoint where you can receive the runtime request.
+3. On the second `settings.fields` field, update the following values:
+  - `type` to `number_decimal`
+  - `key` to `amount`
+  - `name` to `Bid Amount`
+  - Add a `description` property and set it to `The amount of the bid`
+
+```bash
+[[extensions]]
+name = "Place Auction Bid"
+type = "flow_action"
+handle = "place-bid"
+description = "Place a bid on an auction"
+runtime_url = "https://your-server-domain/path/to/action/handler"
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+  required = true
+
+  [[settings.fields]]
+  type = "number_decimal"
+  key = "amount"
+  name = "Bid Amount"
+  description = "The amount of the bid"
+  required = true
+```
+
+## Step 3: Configure your web server
+
+To build a Shopify Flow action, you need to add a service to your web server to listen for the JSON payload that Shopify Flow sends when the action runs.
+
+Optionally, you can also add the following:
+
+- An endpoint to validate actions
+- A [custom configuration page](/docs/apps/build/flow/actions/build-config-ui), and an endpoint that lets merchants preview your custom configuration page
+
+Add the following API endpoints to your server:
+
+| Endpoint | Purpose |
+| --- | --- |
+| [Flow action execution](/docs/apps/flow/actions/endpoints#flow-action-execution) | The endpoint where the automation tool sends your action's payload. The payload contains data that you can use to execute the action in your app.|
+| [Custom configuration page preview](/docs/apps/flow/actions/endpoints#custom-configuration-page-preview) | An endpoint that provides data about your [custom configuration page](/docs/apps/build/flow/actions/build-config-ui) to display in the automation tool. This endpoint is required if you want to use a custom configuration page.|
+| [Custom validation](/docs/apps/flow/actions/endpoints#custom-validation) | An endpoint that validates the contents of merchant-configurable properties in an action payload when an action is saved. This endpoint is required if you want to use a custom configuration page.|
+
+To learn more about the endpoint requirements for your server, refer to [Action endpoints](/docs/apps/build/flow/actions/endpoints).
+
+To learn how to create a custom configuration page, refer to [Build a custom configuration page](/docs/apps/build/flow/actions/build-config-ui).
+
+## Step 4: Enable the draft version of your action
+
+Running [`app dev`](/docs/api/shopify-cli/app/app-dev) allows changes made to local files to update the draft version of your Flow task extensions. The draft version is only available in your development store.
+
+> Note:
+> When [`app dev`](/docs/api/shopify-cli/app/app-dev) is running and "Development store preview" is enabled, the draft version of a task will appear in your development store _in place_ of the deployed version. Other shops will continue to see the deployed version of your task (if one exists). Draft versions can be identified by the "draft" badge. To see the deployed version of the task in your development store, turn off "Development store preview" in the "Extensions" section of your app in [Shopify Partners](https://partners.shopify.com/).
+
+1. Navigate to your app directory.
+2. Run the following command to start using draft versions of your extension(s):
+
+```bash
+#!/bin/bash
+shopify app dev
+```
+
+3. Follow the prompts.
+
+## Step 5: Test the action
+
+After you've created an action in the Partner Dashboard and added support for it in your web server, you can test the action in Shopify Flow on your development store.
+
+1. In your development store, create a [workflow](https://www.shopify.com/admin/apps/flow) that uses the action. For example, add the trigger that you created in the [Triggers guide](/docs/apps/build/flow/triggers/create) and this action to a workflow.
+
+2. If you created a custom configuration page, then ensure that the preview displays and that the custom configuration page is accessible.
+
+3. If you added any custom validation, then ensure that it works as expected.
+
+4. Trigger the workflow. For example, in your web server, run the event that sends the trigger information to Shopify Flow.
+
+When the workflow completes, your web server has sent data to Shopify Flow because of the trigger. Shopify Flow has sent this data to a web server that logged the information to its console because of the action.
+
+## Step 6: Deploy your extension
+
+> Note:
+> Deploying extensions using the `app deploy` command also publishes the extensions. We recommend testing changes by using [`app dev`](/docs/api/shopify-cli/app/app-dev) or deploying to a test app before deploying them to a production app.
+
+Use Shopify CLI to deploy your extensions:
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the prompts.
+
+When you receive confirmation that the deploy was successful, your extensions have been released.
+
+## Verifying requests
+
+For security reasons, make sure that you verify the following elements in each request:
+
+- The POST request's HMAC header (either `x-shopify-hmac-sha256` or `http-x-shopify-hmac-sha256`). The HMAC header should be verified before you process the payload. For more information, refer to [Verifying requests](/docs/apps/build/flow/actions/endpoints#verifying-requests).
+- The payload `handle`. This ID should match the `handle` of the action that you created, and can be retrieved from the payload preview.
+
+## Next steps
+
+- Connect your app to Shopify Flow so that events that occur in your app can [trigger workflows](/docs/apps/build/flow/triggers).
+- Learn how to receive [lifecycle events from Shopify Flow](/docs/apps/build/flow/track-lifecycle-events) about the stores that are using your triggers in enabled workflows.
+- Learn more about how to [return complex data](/docs/apps/build/flow/configure-complex-data-types) in a Flow action.

data/scraped/clean/flow_actions_endpoints.txt

@@ -0,0 +1,408 @@
+
+
+Before your app can receive communication from Flow actions, you need to create one or more standardized API endpoints on your web server. Review the information for each endpoint to understand its requirements, the format of the payload, and the expected response. You'll also learn how to avoid processing duplicate requests, identify an action by its ID, and verify requests for security purposes.
+
+| Endpoint | Purpose |
+| --- | --- |
+| [Flow action execution](/docs/apps/flow/actions/endpoints#flow-action-execution) | The endpoint where the automation tool sends your action's payload. The payload contains data that you can use to execute the action in your app.|
+| [Custom configuration page preview](/docs/apps/flow/actions/endpoints#custom-configuration-page-preview) | An endpoint that provides data about your [custom configuration page](/docs/apps/build/flow/actions/build-config-ui) to display in the automation tool. This endpoint is required if you want to use a custom configuration page.|
+| [Custom validation](/docs/apps/flow/actions/endpoints#custom-validation) | An endpoint that validates the contents of merchant-configurable properties in an action payload when an action is saved. This endpoint is required if you want to use a custom configuration page.|
+
+## General endpoint requirements
+
+The requirements for Shopify Flow action endpoints are as follows:
+
+| Rule / concern | Type / requirement |
+| --- | --- |
+| API format | REST |
+| Content type | JSON |
+| Security mechanism | [HMAC / Signed requests](#verifying-requests) |
+| Protocol | HTTPS (app domain requires valid SSL certificate) |
+
+## Flow action execution
+
+When a workflow that contains your action is executed, Flow sends an HTTP request to your Flow action execution endpoint (runtime URL). The request contains a payload that matches the payload schema that you configured for your action.
+
+### Request
+
+<script data-option="filename" data-value="POST <Flow action HTTPS request URL>">```
+
+```json
+{
+  "shop_id": "gid://shopify/Shop/1",
+  "shopify_domain": "{shop}.myshopify.com",
+  "action_run_id": "xxxx-xxxx-xxxx-xxxx",
+  "action_definition_id": "Place auction bid",
+  "handle": "place-auction-bid",
+  "properties": {
+    "customer_id": "123456",
+    "amount": "10.00",
+    "step_reference": "320d4f8a-aaab-40ff-9ed2-2bc079633705"
+  }
+}
+```
+
+The payload contains the following parameters:
+
+| Property Name       | Property Usage                                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------------------------ |
+| `shop_id`             | The ID of the store.                                                                                    |
+| `shopify_domain`      | The myshopify.com domain of the store.                                                                  |
+| `action_run_id`       | An ID that represents an instance of an action being run. [Learn more](#prevent-apps-from-processing-duplicate-requests).                                   |
+| `handle`              | The extension’s handle. We recommend using this property to identify your actions.                     |
+| `step_reference`      | A unique ID for the step within a workflow. This property only appears if you’ve set a [Custom Configuration Page](/docs/apps/build/flow/actions/build-config-ui). |
+| `action_definition_id` | A unique ID for the action. The ID is based on the action name in the Partner Dashboard. |                                                                       |
+| `properties`          | The fields that you selected as part of the action configuration.                   |
+
+To learn how to configure the payload schema, refer to [Shopify Flow actions](/docs/apps/build/flow/actions).
+
+### Expected response
+
+After the automation tool sends a POST request to your web server, it waits for a maximum of 10 seconds for an [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes).
+
+If after 10 seconds the automation tool hasn't received a response from your web server, then the automation tool closes the connection to your web server and resends the request later.
+
+When the automation tool receives a response, it processes the codes as displayed in the following table:
+
+<table>
+  <tr>
+    <th>Status codes</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>200 Success</td>
+    <td>The automation tool assumes that the POST request has been processed by your web server.</td>
+  </tr>
+  <tr>
+    <td>202 Success</td>
+    <td>The automation tool assumes that the POST request has been accepted but not processed by your web server. The automation tool will resend the POST request at increasing intervals for up to 36 hours.
+    </td>
+  </tr>
+  <tr>
+    <td>4XX Client errors</td>
+    <td>
+      <p>If your web server sends a 429 status code without a <code>Retry-After</code> header, then the automation tool resends the POST request at increasing intervals for up to 36 hours.      <p>If your web server sends a 429 status code with a <code>Retry-After</code> header that specifies a wait time, then the automation tool resends the POST request after the wait time (formatted in seconds) has passed.      <p>If your web server sends any other 4XX code, then the automation tool assumes that there was a failure and it doesn't resend the POST request. Merchants see a notification in the automation tool that includes the raw contents of your web server's response.      <p><strong>Example</strong>: <code>400 Bad Request { "error1": "server unresponsive" }</code>      <p>You can provide a  merchant-friendly description of the error by adding a key named <code>message</code>. For example:      <p><strong>Example</strong>: <code>{ "message": "Finish the onboarding on our website." }</code>
+    </td>
+  </tr>
+  <tr>
+    <td>5XX Server errors</td>
+    <td>The automation tool resends the POST request at increasing intervals for up to 36 hours.</td>
+  </tr>
+  <tr>
+    <td>Other status code</td>
+    <td>If your web server returns a code that isn't described in this table, then the automation tool assumes that there was a failure and it doesn't resend the POST request.</td>
+  </tr>
+</table>
+
+### Prevent apps from processing duplicate requests
+
+Each request from an automation workflow contains an `action_run_id` that's unique to the associated action run. This ID is included in the body of the request.
+
+You can use `action_run_id` as an [idempotency key](/docs/api/usage/idempotent-requests) to check if the request is unique. In some cases, your app could receive an identical request more than once. For example, the automation tool might resend a request because it didn't receive your response in time. Your app can store the idempotency key in a cache with a set expiry time to avoid reprocessing duplicate requests.
+
+### Identify actions
+
+The `handle` property is how you identify the action for processing when your web server receives a request from Flow during workflow execution.
+
+```json
+{
+  "shop_id": 0,
+  "shopify_domain": "{shop}.myshopify.com",
+  "action_run_id": "xxxx-xxxx-xxxx-xxxx",
+  "handle": "auction-bid",
+  "action_definition_id": "Auction Bid",
+  "properties": {}
+}
+```
+
+## Custom configuration page preview
+
+An endpoint that provides data about your [custom configuration page](/docs/apps/build/flow/actions/build-config-ui) to display in the automation tool. This endpoint is required if you want to use a custom configuration page. Using the endpoint, you can dynamically set the following information:
+
+- The field’s label
+- A text preview
+- A last updated at timestamp
+- An image preview
+- The text used by the button that redirects to the custom configuration page
+
+### Request
+
+<script data-option="filename" data-value="POST <Custom configuration page preview URL>">```
+
+```json
+{
+  "shop_id": "gid://shopify/Shop/1",
+  "shopify_domain": "{shop}.myshopify.com",
+  "step_reference": "122438de2e57d8bad7e50958d2bd4999ca2c4c35ee3b5120e85e42a17fc1ce93",
+  "handle": "my-extension-handle",
+  "locale":"en",
+  "properties": {
+    "customer_id": "gid://shopify/Customer/1234567",
+    "sms_message": "Thanks for making the purchase!",
+    "marketing_activity_id": "gid://shopify/MarketingActivity/1234567"
+  }
+}
+```
+
+The payload contains the following parameters:
+
+| Parameter              | Description |
+| ---------------------- | --- |
+| `shop_id`              | The ID of the store. |
+| `shopify_domain`       | The myshopify.com domain of the store. |
+| `handle`               | The extension’s handle. We recommend using this property to identify your actions. |
+| `step_reference`       | A unique ID for the step within a workflow. |
+| `locale`               | The locale of the store making the request, in ISO format. |
+| `properties`           | The fields that you selected as part of the action configuration.    |
+
+### Expected response
+
+```json
+{
+  "label_text": "Abandonment Email Template",
+  "text_preview": "We want you back. Enjoy a 15% discount on your next purchase.",
+  "button_text": "Edit Email",
+  "image_preview": {
+    "url": "http://someUrl.io/assets/preview_image.png",
+    "alt": "Abandonment Email Template Preview Image"
+  },
+  "last_updated_at": "2023-02-10T16:50:24.709Z"
+}
+
+```
+
+Other than `text_preview`, all fields are nullable.
+
+<table>
+  <caption></caption>
+  <thead>
+    <tr>
+      <th scope=“col”>Parameter</th>
+      <th scope=“col”>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td scope=“row”>1</td>
+      <td><code>label_text</code></td>
+      <td>A title for the custom configuration page.<br><br>If no value is specified, then the label text defaults to <b>Configuration Page Preview</b>.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>2</td>
+      <td><code>text_preview</code></td>
+      <td>A preview that indicates the resource that's tied to the step. For example, in the case of an email content editor, this might be a preview of the email text.<br><br>This field is required.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>3</td>
+      <td><code>button_text</code></td>
+      <td>The text for the button that the merchant clicks to access the custom configuration page.<br><br>If no value is specified, then the label text defaults to <b>Edit<b>.<br><br>If the value for `button_text` is longer than 23 characters, then the label is truncated to twenty characters with an ellipsis.</td>
+    </tr>
+    <tr>
+      <td scope=“row”></td>
+      <td><code>image_preview</code></td>
+      <td>The details of the image.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>4</td>
+      <td><code>image_preview.url</code></td>
+      <td>The URL for a preview image of the custom configuration page. The image should be between 500px and 600px wide, and 100KB or less. There is no maximum height.</td>
+    </tr>
+    <tr>
+      <td scope=“row”></td>
+      <td><code>image_preview.thumbnail_url</code></td>
+      <td>The URL for a thumbnail version of the preview image.<br><br>This image is not currently used in the user interface.</td>
+    </tr>
+    <tr>
+      <td scope=“row”></td>
+      <td><code>image_preview.alt</code></td>
+      <td>The alt text for the preview image. This text appears if your image fails to render, and is accessible to screen readers.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>5</td>
+      <td><code>last_updated_at</code></td>
+      <td>The date and time that the resource was last updated, in <a href="https://en.wikipedia.org/wiki/ISO_8601">IS0-8601</a> format.</td>
+    </tr>
+  </tbody>
+</table>
+
+<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/flow/ccp-preview-annotated-379253a9b1eebe09194a0a0a0e5be1e2fd918fc977bdd1f78db60fa6f1e119c3.png" class="lazyload" alt="A labeled custom configuration page." width="901" height="675"></figure>
+
+## Custom validation
+
+An endpoint that validates the contents of merchant-configurable properties in an action payload when an action is saved. This endpoint is required if you want to use a custom configuration page.
+
+### Request
+
+The request contains a payload that matches the payload schema you configured for your action.
+
+<script data-option="filename" data-value="POST <Validation endpoint>">```
+
+```json
+{
+  "shop_id": "gid://shopify/Shop/1",
+  "shopify_domain": "{shop}.myshopify.com",
+  "handle": "my-extension-handle",
+  "locale": "en",
+  "steps": [
+    {
+      "step_reference": "122438de2e57d8bad7e50958d2bd4999ca2c4c35ee3b5120e85e42a17fc1ce93",
+      "properties" : {
+        "outside_na": true,
+        "guest_no": 22,
+        "first_name": "John",
+        "customer_id": "customer.id"
+      }
+    },
+    {
+      "step_reference": "ca2c4c35ee3b5120e85e42a17fc1ce93122438de2e57d8bad7e50958d2bd4999",
+      "properties" : {
+        "outside_na": false,
+        "guest_no": 14,
+        "first_name": "Kim",
+        "customer_id": "customer.id"
+      }
+    },
+  ]
+}
+
+```
+
+The payload contains the following parameters:
+
+<table>
+  <caption></caption>
+  <thead>
+    <tr>
+      <th scope=“col”>Parameter</th>
+      <th scope=“col”>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td scope=“row”><code>shop_id</code></td>
+      <td>The ID of the store.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>shopify_domain</code></td>
+      <td>The myshopify.com domain of the store.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>handle</code></td>
+      <td>The extension’s handle. We recommend using this property to identify your actions.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>locale</code></td>
+      <td>The locale of the store, in ISO format.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>steps</code></td>
+      <td>An array of all of the steps to validate. Each child step object represents a separate action on the merchant’s workflow.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>steps.step_reference</code></td>
+      <td>The unique identifier for the step. This ID should be used when returning errors for a step.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>steps.properties</code></td>
+      <td>
+        <p>An object containing the properties specified on the action.        <p><b>Merchant-configurable properties</b>: These properties are passed as strings, with the following exceptions:        <ul>
+          <li>Checkbox properties: Boolean</li>
+          <li>Number properties: integer</li>
+        </ul>
+        <p><b>Shopify properties</b>:
+        The path to the value for the related commerce object in the workflow environment. For example, <code>customer.id</code>. If the value isn't available in the workflow environment, then an empty string is returned. The property will be populated with an actual value at runtime.            <p><b>Example 1: Customer ID is available in the workflow environment</b>            <ul>
+              <li>Validation payload value: "customer.id"</li>
+              <li>Runtime value: "123456"</li>
+            </ul>
+            <p><b>Example 2: Customer ID isn't available in the workflow environment</b>            <ul>
+              <li>Validation payload value: ""</li>
+              <li>Runtime value: null</li>
+            </ul>
+        <p>If a property is marked as optional, then the workflow tool won't validate the presence of the commerce object, and will only rely on external validation. The path to the value for the commerce objects is still returned as a path, but Shopify can't guarantee their presence at runtime. If you need a commerce object to be present at runtime, then you should mark it as required. This allows the workflow tool to assess the presence of the commerce object and return any errors to the editor.        <p><b>Example 3: Customer ID might be available in the workflow environment (for example, when using a custom trigger and an order step)</b>        <ul>
+          <li>Validation payload value: "customer.lastOrder.id"</li>
+          <li>Runtime value: "123456" OR null</li>
+        </ul>
+        
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Expected response
+
+Your app should return an array of the steps that you validated, which are identified by their `step_reference`. If there are any validation errors, then specify them in a `step_errors` array. The error messages that return display to the merchant in the action configuration pane in Shopify Flow.
+
+![An image of error messages in the action configuration pane.](/assets/apps/flow/validation-error.png)
+
+```yml
+[
+  {
+    step_reference: '122438de2e57d8bad7e50958d2bd4999ca2c4c35ee3b5120e85e42a17fc1ce93',
+    step_errors: [
+      {
+        message: 'A step level error occurred'
+      }
+     ],
+    properties_errors: [
+      {
+        id: 'guest_no',
+        message: 'Number of guests is limited to 8 when outside of North America'
+      }
+    ]
+  },
+  {
+    step_reference: 'ca2c4c35ee3b5120e85e42a17fc1ce93122438de2e57d8bad7e50958d2bd4999',
+    step_errors: [],
+    properties_errors: []
+  }
+]
+```
+
+<table>
+  <caption></caption>
+  <thead>
+    <tr>
+      <th scope=“col”>Parameter</th>
+      <th scope=“col”>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td scope=“row”><code>step_reference</code></td>
+      <td>The unique identifier for the step. This ID should be used when returning errors for a step.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>step_errors</code></td>
+      <td>An array of errors that apply to the entire step.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>step_errors.message</code></td>
+      <td>An error message to display at the top of the action configuration pane.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>properties_errors</code></td>
+      <td>An array of errors that apply to particular properties.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>properties_errors.id</code></td>
+      <td>The key of the property that contains the error.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>properties_errors.message</code></td>
+      <td>An error message to display for the property.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Verifying requests
+
+For security reasons, your web service should enforce a hash-based message authentication (HMAC) header verification that uses the client secret that you created when you configured your app.
+
+The name of the HMAC header is `x-shopify-hmac-sha256`. If you are using a Ruby-based web framework, then the name of the header is `http-x-shopify-hmac-sha256`.
+
+When the action runs in a workflow, the automation tool posts the contents (JSON payload and the HMAC header) of the action to the URL that you entered when you created the action in the Partner Dashboard. When your web server receives the POST request, it needs to verify the HMAC header against the JSON payload and your app's API secret. The HMAC verification works the same as [webhooks](/docs/apps/build/webhooks/subscribe/https).
+
+Your web server also needs to [verify that the `handle` that's sent in the payload matches the `handle` of the action that you created](#identify-actions).
+
+After you've verified the HMAC header, you can process the contents of the payload. For example, you could log the contents of the payload to your web server's console.
+

data/scraped/clean/flow_configure-complex-data-types.txt

@@ -0,0 +1,133 @@
+
+
+Triggers and actions can both provide data to Flow workflows. This data can be simple, such as a string or a number, or complex, such as an object or a list of objects. This guide explains how to define complex data types in your extension's TOML and how to send and receive complex data types at runtime.
+
+## Defining a return type schema
+
+To return data from an action or complex objects from a trigger, you must provide a schema for the return type using GraphQL's type system ([SDL](https://graphql.org/learn/schema/#type-language)). This schema is used by Flow to provide the return object in the workflow editor. The schema can be defined in any file and linked to from your extension's TOML definition. For example, a file called `schema.graphql` which contains the SDL for the types used in your action or trigger, can be made in the same directory as the extension.
+
+### SDL file
+
+When you're using complex types in Flow actions and triggers, consider the following:
+
+- Flow supports defining types using basic types (String, Int, Float, Boolean, and ID) as well as enums, objects, lists, and the non-nullable flag `!`.
+- Flow doesn't currently support the entire SDL spec when defining action return types. Unions, interfaces, custom scalars, and directives are currently not supported. The action HTTP payload doesn't utilize any arguments defined on types in this schema.
+- Flow derives the description of the return value from the comment on the type, which is placed in double quotes above the field. This description displays to merchants in the Flow editor when selecting the field.
+- The same schema file can be referenced by multiple extensions as long as the relative paths are defined correctly.
+
+The following SDL defines two types: a `Bid` and an `Auction` which contains a list of bids. The schema can contain multiple types that reference each other but only one type can be defined as the return type for the action. In the following example we're referencing the `Bid` type in the `Auction` type.
+
+```graphql
+"Represents a bid placed on an auction"
+type Bid {
+  "ID of the bid"
+  id: ID!
+  "Customer that placed the bid"
+  customerId: ID!
+  "Amount of the bid"
+  amount: Float!
+}
+
+enum Status {
+  COMPLETE
+  IN_PROGRESS
+  CANCELLED
+}
+
+"Represents an auction"
+type Auction {
+  "ID of the auction"
+  id: ID!
+  "Name of the auction"
+  name: String
+  "Status of the auction"
+  status: Status!
+  "List of bids placed on the auction"
+  bids: [Bid!]!
+}
+```
+
+For more information on SDL, refer to the [GraphQL documentation](https://graphql.org/learn/schema/#type-language).
+
+### Folder structure
+
+```
+/my-extension-name
+  shopify.extensions.toml
+  schema.graphql
+```
+
+### `shopify.extension.toml` file
+
+```bash
+[[extensions]]
+name = "Place auction bid"
+type = "flow_action"
+handle = "auction-bid"
+description = "My description"
+runtime_url = "https://{url}.com/api/execute"
+schema = "./schema.graphql"
+return_type_ref = "Auction"
+```
+
+## Referencing the return type schema in an action extension's TOML
+
+After a schema file has been defined, it can be referenced in the action extension's TOML by setting `extensions.schema` to the relative path of the schema file, and `extension.return_type_ref` to a type defined in the referenced schema file. The schema defined above can be referenced by setting the following fields:
+
+| Property Name       | Property value  |
+| ------------------- | --------------- |
+| `extensions.schema`   | ./schema.graphql |
+| `extensions.return_type_ref` | Auction |
+
+## Referencing the return type schema in a trigger extension's TOML
+
+After a schema file has been defined, it can be referenced in the trigger extension's TOML by setting `extensions.schema` to the relative path of the schema file, and setting the type of a field to `schema.<type>`. The schema defined above can be referenced by setting the following fields:
+
+| Property Name       | Property value  |
+| ------------------- | --------------- |
+| `extensions.schema`   | ./schema.graphql |
+| `extensions.settings.fields[0].type` | schema.Auction |
+
+## Returning data from an action at runtime
+
+When responding to an action request from Flow you can add the return type in the JSON response as a field called `return_value`. The `return_value` object must match the return type defined in the extension. The return type used in our [example](#shopify-extension-toml-file) must be an auction object, like the following:
+
+```json
+{
+  "return_value": {
+    "id": "auction1",
+    "name": "My first auction",
+    "status": "COMPLETE",
+    "bids": [
+      {
+        "id": "bid1",
+        "customerId": "gid://shopify/Customer/1",
+        "amount": 100.00
+      },
+      {
+        "id": "bid2",
+        "customerId": "gid://shopify/Customer/2",
+        "amount": 103.11
+      }
+    ]
+  }
+}
+```
+
+If a workflow is using a non-nullable field that's defined in the extension `schema` but is missing from the payload or there's a type mismatch between fields, then the action transiently fails.
+
+The response size of the action must also be less than `50KB` exceeding this limit will also result in a transient failure. Actions that transiently fail will be retried at increasing intervals for up to 24 hours.
+
+## Sending complex objects in a trigger at runtime
+
+When you execute the [`flowTriggerReceive`](/docs/apps/build/flow/triggers/create#step-4-test-your-trigger) mutation with one or more complex object fields, the payload must include a JSON representation of the complex object(s) matching the schema. For example, if the trigger has a field with key `Winning Bid` of type `Bid`, then the payload should include the following structure:
+
+```json
+"payload": {
+  "Winning Bid": {
+    "id": "bid1",
+    "customerId": "gid://shopify/Customer/1",
+    "amount": 100.00
+  }
+}
+```

data/scraped/clean/flow_migrate-legacy-extensions.txt

@@ -0,0 +1,74 @@
+
+
+If you have existing Flow extensions that were created through the Partner Dashboard, then you can import these extensions into your codebase. After you deploy the extensions that you’ve imported into Shopify CLI, Shopify CLI manages those extensions going forward.
+
+> Note:
+> Extensions that are migrated to Shopify CLI use the `handle` properties. The `handle` property is a unique string that identifies your extension and that's used when interacting with the Shopify Flow API. For more information, refer to the [triggers](/docs/apps/build/flow/triggers/create#step-4-test-your-trigger) and [actions](/docs/apps/build/flow/actions/endpoints#request) runtime payloads.
+
+A `handle` property is created in the extension's TOML configuration file after running the import command. Note that you can't change the `handle` property of the extensions that are present in your app's codebase after you've run the `dev` or `deploy` commands.
+
+### Requirements
+
+- Create a [Partner account](https://www.shopify.com/partners).
+- [Scaffold an app that uses Shopify CLI v3.70.0 or higher](/docs/apps/build/scaffold-app), or [migrate your existing app](/docs/apps/build/cli-for-apps/migrate-to-latest-cli) so it's compatible with Shopify CLI v3.70.0 or higher.
+- [Migrate a Partner Dashboard-managed app](/docs/apps/build/cli-for-apps/migrate-from-dashboard).
+
+## Step 1: Import your Flow task extension locally
+
+> Note:
+> The command in this procedure only generates the local file representation of your Partner Dashboard extensions. Running the `deploy` command migrates your extensions to CLI managed-extensions. You can only import extensions that have versions. The published version is imported, if one exists. Otherwise, the latest version is imported.
+
+1. Navigate to your app directory.
+1. To start importing your Flow extension, run the following command:
+
+```bash
+#!/bin/bash
+shopify app import-extensions
+```
+
+1. Select the `Flow Extensions` option.
+1. Select an extension from the list of extensions that are available to import.
+
+After you’ve selected the extension to import, Shopify CLI automatically generates the file representation in your application’s `/extensions` directory and displays a success message.
+
+You can then go into your application’s `/extensions` directory and start editing your extension. The file structure of your extension should look like the following:
+
+```text
+/my-flow-extension
+  shopify.extension.toml
+```
+
+To learn more about the extensions file structure, refer to [App structure](/docs/apps/build/cli-for-apps/app-structure) and the documentation for your extension type.
+
+### Available Flags
+
+#### `client_id`
+
+An application’s `client_id`. The ID enables you to target a specific application when running the import command.
+
+```bash
+#!/bin/bash
+shopify app import-extensions --client_id abc123
+```
+
+## Step 2: Migrate your extension
+
+After you've imported the extension, you can migrate your extension by using Shopify CLI's `deploy` command.
+
+> Note:
+> Deploying extensions using the `app deploy` command also publishes the extensions. We recommend testing changes by using [`app dev`](/docs/api/shopify-cli/app/app-dev) or deploying to a test app before deploying them to a production app.
+
+Use Shopify CLI to deploy your extensions:
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the prompts.
+
+When you receive confirmation that the deploy was successful, your extensions have been released.
+

data/scraped/clean/flow_templates.txt

@@ -0,0 +1,11 @@
+
+
+## How templates work
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  [create a template](/docs/apps/build/flow/templates/create-a-template)  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+![Flow template library](/assets/apps/flow/flow-template-library.png)
+
+## Next steps
+- Follow our step by step guide on [creating a Flow template](/docs/apps/build/flow/templates/create-a-template).
+- Learn more about how localize your template, the approval process, and more in the [reference resource](/docs/apps/build/flow/templates/reference#approval-process)

data/scraped/clean/flow_templates_create-a-template.txt

@@ -0,0 +1,101 @@
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  create a template  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+To create a workflow template that merchants can add to their workflow list, you need to add a Flow template extension to your app.
+
+## Requirements
+
+- A [development store](/docs/api/development-stores) that has [Shopify Flow](https://apps.shopify.com/flow) and your app installed.
+- Your existing custom triggers and actions are connected to your instance of Shopify Flow.
+- [Shopify CLI](/docs/apps/build/cli-for-apps) installed with a version of `3.49` or higher.
+
+## Step 1: Create a workflow
+
+A workflow is the foundation of a Flow template.
+
+1. In your development store navigate to **Apps** > **Flow**.
+2. Click **Create workflow**.
+3. In the workflow editor, build a workflow that solves a merchant use case and showcases your custom trigger and or actions.
+4. Optional: Tailor your template to a wider audience by [localizing your custom step descriptions](/docs/apps/build/flow/templates/reference#step-descriptions).
+5. After you're satisfied with your workflow, [export the workflow](https://help.shopify.com/en/manual/shopify-flow/manage#export-a-workflow) and save the `.flow` file locally.
+
+> Note:
+> - Remove any shop specific test data or replace with placeholder values if the merchant needs to provide a value. For example using the placeholder `YOUR_TAG_NAME` in a location where the merchant needs to provide a shop specific tag.<br />
+> - Don't edit `.flow` files directly. Only make changes within the Flow app and export the updated workflow.<br />
+> - Test your workflow thoroughly, ensuring the trigger, condition(s), and action(s) used provide the intended result.
+
+## Step 2: Create a Flow template extension
+
+Use the Shopify CLI to generate a new extension:
+
+1. Navigate to your app directory.
+2. Run the following command:
+
+```bash
+#!/bin/bash
+shopify app generate extension
+```
+
+3. Select the `Flow Template` as the type of extension.
+4. Provide a meaningful name for your extension.
+
+The name that you provide displays in the Partners Dashboard. Follow these guidelines when choosing a name:
+
+- Don't use punctuation.
+- Separate words using spaces.
+
+After you've followed the prompts, Shopify CLI generates the extension’s file representation in your app's `/extensions` directory and returns a success message. You can then go into your app's `/extensions` directory and start editing your new extension.
+
+> Note:
+> Each Flow template extension can contain only a single template. To deploy multiple templates, you will need to create an extension for each template.
+
+The file structure of your extension should look like the following:
+
+```ssh
+/your-extension-name
+  /locales
+    en.default.json
+    fr.json
+  shopify.extension.toml
+  template.flow
+```
+
+To learn more about the extensions file structure, refer to our [app structure](/docs/apps/build/cli-for-apps/app-structure) documentation and the [documentation](/docs/apps/build/flow/templates/reference) for the Flow template extension type.
+
+## Step 3: Configure extension
+Configure your template extension to include information describing it's function for merchants, and settings that control visibility.
+
+1. Update the [shopify.extension.toml configuration file](/docs/apps/build/flow/templates/reference#toml).
+2. Update and add any additional locales. [Localization reference](/docs/apps/build/flow/templates/reference#localization).
+3. Replace `template.flow` with the workflow [that you exported](/docs/apps/build/flow/templates/create-a-template#step-1-create-a-workflow).
+4. Be sure to update the filename to match your chosen file path in the `shopify.extension.toml` file. `template.flow` is the default.
+
+## Step 4: Preview extension
+
+Preview your template extension to see how it will be displayed to merchants before deploying and requesting review.
+
+1. Run the following command in Shopify CLI:
+
+```bash
+#!/bin/bash
+shopify app dev
+```
+
+2. In your development store's Shopify admin, navigate to [`/flow/editor/templates/dev`](https://admin.shopify.com/apps/flow/editor/templates/dev). From here you can preview your workflow, template card, and custom step descriptions.
+3. Refer to our [approval criteria](/docs/apps/build/flow/templates/reference#approval-process) to ensure that your extension meets our requirements.
+
+## Step 5: Deploy extension
+
+Use Shopify CLI to deploy your extension.
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the command prompts
+
+When you receive confirmation that the deploy was successful, a new app version in your Partner Dashboard displays, where you can submit a request for review. After the request for review has been submitted and the [approval process](/docs/apps/build/flow/templates/reference#approval-process) is complete, you can release the new version from your Partner Dashboard and your templates will display in Flow's template library.

data/scraped/clean/flow_templates_reference.txt

@@ -0,0 +1,149 @@
+
+
+This guide provides explanations of key topics for building and deploying a Flow template extension. This includes the TOML configuration file, localization, and the template approval process.
+
+## TOML
+
+When you first create a new Flow template extensions through Shopify CLI, you get a basic version of the `shopify.extension.toml` file structure that looks like the following example:
+
+```toml
+[[extensions]]
+name = "t:name"
+type = "flow_template"
+handle = "example-name"
+description = "t:description"
+
+[extensions.template]
+
+categories = ["orders", "risk"]
+
+module = "./template.flow"
+
+require_app = false
+
+discoverable = true
+
+enabled = true
+```
+
+### Flow template extension fields
+
+| Property | Description                                                                     | Rules             |
+| ------------- | ---------------------------------------------------------------------------------- | ----------------- |
+| `name` <br><span class="heading-flag">Required</span> | The title  of the template. This property is translatable and will use the value for the key `name` in the translation files.  | |
+| `type` <br><span class="heading-flag">Required</span> | The type of your extension. This should always be set to `flow_template` for Flow templates.| - Value must be `flow_template`. |
+| `handle` <br><span class="heading-flag">Required</span> | A globally-unique identifier for your extension. This property can't be changed after you’ve run the [`app dev`](/docs/api/shopify-cli/app/app-dev) or [`deploy`](/docs/api/shopify-cli/app/app-deploy) command. | - Can't exceed 30 characters.<br /> - Must only contain alphanumeric characters and hyphens. |
+| `description` <br><span class="heading-flag">Optional</span> | The description of your template's workflow. This property is translatable and will use the value for the key `description` in the translation files. | |
+| `categories` <br><span class="heading-flag">Required</span> | The categories that best describe the function of your template. | - Must be an array containing only strings of valid categories. <br /> - Must choose at least one category. Max 2 recommended. <br /> - Valid categories are: `buyer_experience`, `customers`, `inventory_and_merch`, `loyalty`, `orders`, `promotions`, `risk`, `fulfillment`, `b2b`, `payment_reminders`, `custom_data`, and `error_monitoring`. |
+| `module`  <br><span class="heading-flag">Required</span> | The file path of the template workflow in the extension's folder. |
+| `require_app` <br><span class="heading-flag">Optional</span> | Whether your template is visible only to merchants who have your app installed. | - Defaults to `false`. |
+| `discoverable` <br><span class="heading-flag">Optional</span> | Whether your template should be displayed in the template browser. When `false`, the template is accessible only through a deep link. | - Defaults to `true`. |
+| `enabled` <br><span class="heading-flag">Optional</span> | Whether you template should be published and made available after being approved. | - Defaults to `true`.
+
+## Localization
+
+Localizing your template by providing translated text allows a wider audience to understand your template better and can increase adoption.
+
+You can provide translations for the following fields:
+
+- **`name`**: Title of the template.
+- **`description`**: Description of the template and it's purpose.
+- **`preInstallNote`**: (Optional): Instructions for merchants to complete before activating the workflow. This field should only be included if setup is required before the template can be turned on.
+- [Custom step descriptions](#step-descriptions) added within the workflow.
+
+### Adding additional locales
+
+Add new `.json` files prefixed with the locale, for example `es.json`.
+
+Add `default` to one of the locales to make it the fallback if a merchant's locale isn't in the locales you have provided. Example: `en.default.json`.
+
+### Step descriptions
+
+You can provide translated custom step descriptions by adding a translation key wrapped by curly braces in the step description field. For example, `{expressShippingCondition}`. Ensure there's no other characters before or after `{yourKey}`. After adding this to your workflow, you can update the translation files to include the step description.
+
+The following is an example:
+
+![How to format localized step descriptions in the Flow editor](/assets/apps/flow/localized_step_descriptions_in_flow_editor.png)
+
+```json
+{
+  "name": "My Awesome Template!",
+  "description": "A template that helps increase merchant productivity",
+  "preInstallNote": "You must disable automatic payment capture in the Shopify Admin before using this template",
+  "expressShippingCondition": "This step will check if the order uses express shipping"
+}
+```
+
+## Approval process
+
+Before submitting your template extension for approval ensure that it meets the following criteria:
+
+### Workflow
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-1">
+<label class="marketing-checkbox-label" for="template-criteria-1">
+  <p style="margin-left:30px">Provides value/solves a problem. For example, notifying the merchant when a buyer makes 10 purchases and adds a `VIP` tag to the customer.</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-2">
+<label class="marketing-checkbox-label" for="template-criteria-2">
+  <p style="margin-left:30px">Does not already exist within the [template library](https://admin.shopify.com/apps/flow/web/editor/templates).</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-3">
+<label class="marketing-checkbox-label" for="template-criteria-3">
+  <p style="margin-left:30px">Isn't malicious in its execution.</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-4">
+<label class="marketing-checkbox-label" for="template-criteria-4">
+  <p style="margin-left:30px">Is complete in its configuration. Validation errors might exist in the workflow where fields are left blank for input unique to the merchant.</label>
+
+### TOML
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-5">
+<label class="marketing-checkbox-label" for="template-criteria-5">
+  <p style="margin-left:30px">Titles should use the format, "\<Description of key action\> when \<description of trigger\>".</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-6">
+<label class="marketing-checkbox-label" for="template-criteria-6">
+  <p style="margin-left:30px">Includes all required fields.</label>
+
+### Localization
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-7">
+<label class="marketing-checkbox-label" for="template-criteria-7">
+  <p style="margin-left:30px">Has correct spelling and grammar.</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-8">
+<label class="marketing-checkbox-label" for="template-criteria-8">
+  <p style="margin-left:30px">Has a default localization, for example <code>en.default.json</code>.</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-9">
+<label class="marketing-checkbox-label" for="template-criteria-9">
+  <p style="margin-left:30px">Has an English translation.</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-10">
+<label class="marketing-checkbox-label" for="template-criteria-10">
+  <p style="margin-left:30px">Include the <code>preInstallNote</code> field if setup is required before the template can be turned on. If no prior setup is needed, then remove the <code>preInstallNote</code> field from the localization files before submitting the template extension.</label>
+
+### Access
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-11">
+<label class="marketing-checkbox-label" for="template-criteria-11">
+  <p style="margin-left:30px">Flow’s testing account, at flow-connector-testing.myshopify.com has access to any actions, triggers, or resources that are required to test the templates, including access to the app.</label>
+
+### Limitations
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-12">
+<label class="marketing-checkbox-label" for="template-criteria-12">
+  <p style="margin-left:30px">A maximum of 25 templates can be submitted for each app.</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-13">
+<label class="marketing-checkbox-label" for="template-criteria-13">
+  <p style="margin-left:30px">Public apps must be listed in the [Shopify App Store](https://apps.shopify.com/) prior to submitting a template.</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-14">
+<label class="marketing-checkbox-label" for="template-criteria-14">
+  <p style="margin-left:30px">Don't edit the `.flow` file directly. Only change and export updated workflows using the Flow app.</label>
+
+### Submitting your extension for approval
+
+After you're satisfied with your template extension, [`deploy`](/docs/api/shopify-cli/app/app-deploy) a new app version from Shopify CLI. The Flow team will review your templates within three business days. Template reviews don't block your app version from releasing, but template changes won't be reflected until the approval process is complete. If we require changes, then we'll reject the review and follow up through email with feedback.

data/scraped/clean/flow_track-lifecycle-events.txt

@@ -0,0 +1,119 @@
+
+
+This guide explains how to configure your app to receive trigger lifecycle callbacks from Shopify Flow.
+
+When [creating a trigger](/docs/apps/build/flow/triggers/create), configuring a lifecycle callback enables your app to receive notifications from Shopify Flow about stores using the trigger and communicate changes in workflow status (e.g., enabling or disabling a workflow) back to the app. This helps optimize app performance by ensuring that trigger-related operations are only performed for stores that actually need them.
+
+Apps must be properly configured to respond to trigger lifecycle callbacks. When a merchant attempts to enable a workflow that uses the trigger, Shopify Flow sends a lifecycle callback to the app's web server. If it doesn't promptly receive a response or receives a response with an HTTP status code that isn't `2xx`, then the merchant can't enable the workflow and make use of the trigger.
+
+> Note:
+> Legacy trigger discovery webhook extensions created using the Partner Dashboard are deprecated and must [migrate to the CLI](docs/apps/build/flow/migrate-legacy-extensions) before they can be edited.
+
+## How trigger lifecycle callbacks work
+
+Trigger lifecycle callbacks contain identifying information about the trigger and the store using it and indicate whether the trigger is being used. You can use this information to track the stores that are currently using your triggers and then send trigger requests to only those stores.
+
+### Properties
+
+The trigger lifecycle callback (HTTP POST request) is formatted in JSON and it contains the following properties:
+
+<table>
+  <tr>
+    <th>Property</th>
+    <th>Data type</th>
+    <th width="40%">Description</th>
+    <th>Example</th>
+  </tr>
+  <tr>
+    <td><code>flow_trigger_definition_id</code></td>
+    <td>String</td>
+    <td>The unique identifier for your Shopify Flow trigger.</td>
+    <td>Add row to spreadsheet</td>
+  </tr>
+  <tr>
+    <td><code>has_enabled_flow</code></td>
+    <td>Boolean</td>
+    <td>Whether the store has an enabled workflow that uses your trigger. Valid values:
+      <ul>
+        <li><code>true</code>: There is at least one workflow that is enabled and that uses your trigger.</li>
+        <li><code>false</code>: There are no enabled workflows that use your trigger.</li>
+      </ul>
+    </td>
+    <td>true</td>
+  </tr>
+  <tr>
+    <td><code>shop_id</code></td>
+    <td>Number</td>
+    <td>The unique identifier for the Shopify store.</td>
+    <td>690933842</td>
+  </tr>
+  <tr>
+    <td><code>shopify_domain</code></td>
+    <td>String</td>
+    <td>The myshopify domain of the Shopify store.</td>
+    <td>johnsapparel.myshopify.com</td>
+  </tr>
+  <tr>
+    <td><code>timestamp</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> date and timestamp</td>
+    <td>
+      <p>The time when the notification was created. Notifications with newer timestamps should take precedence. If you already have a timestamp in your datastore and you receive a newer timestamp, then overwrite this payload's information in your datastore. Conversely, if you receive a timestamp that is older than the information in your datastore, then ignore this payload.    </td>
+    <td>2019-01-25T16:44:10.999Z</td>
+  </tr>
+</table>
+
+The following is an example body of a usage notification (HTTP POST) request:
+
+```json
+{
+  "flow_trigger_definition_id": "Add row to spreadsheet",
+  "has_enabled_flow": false,
+  "shop_id": "690933842",
+  "shopify_domain": "johnapparel.myshopify.com",
+  "timestamp": "2019-01-25T16:44:10.999Z"
+}
+```
+
+### Callback events
+
+Shopify Flow sends trigger lifecycle callbacks when the following events occur:
+
+- When a merchant activates a workflow that uses your trigger, the callback contains `"has_enabled_flow": true`.
+- When a merchant deactivates a workflow that uses your trigger, the callback contains `"has_enabled_flow": false`.
+
+### Web server response time and status codes
+
+When a merchant tries to enable a workflow that uses your trigger, Shopify Flow sends a trigger lifecycle callback to your web server. If your web server doesn't respond within five seconds, or if it responds with a different status code, then the merchant can't enable that workflow. The merchant receives a notification in the Shopify Flow app that tells them to try enabling the workflow at a later time.
+
+## 1. Configure your web server
+
+To begin, configure your web server to listen for Shopify Flow callbacks.
+
+1. Configure a URL in your web server to listen for the trigger lifecycle callbacks from Shopify Flow.
+2. Configure your web server to verify the HMAC header in the trigger lifecycle callback with your client secret.
+
+    The HMAC header is located in the following HTTP header: `x-shopify-hmac-sha256`. If you are using a Ruby-based web framework, then the header is `http-x-shopify-hmac-sha256`.
+
+3. Configure your web server to respond within 5 seconds when it receives a trigger lifecycle callback.
+
+## 2. Process and store callback data
+
+After you've added support to listen for Shopify Flow callbacks, you can configure your web server to process and store the callback data.
+
+1. Save the list of stores that are using your triggers in a persistent datastore. Use the <code>timestamp</code> property to make sure that you don't overwrite an existing entry with older information.
+2. Edit your application to send your triggers only to stores that are using your triggers.
+
+## 3. Configure the callback
+
+Finally, configure the callback in the CLI:
+
+1. Run `shopify app generate extension`.
+2. Select `Flow trigger lifecycle callback`.
+3. Change the URL in the generated TOML to the URL configured on the web server.
+4. Run `shopify app deploy`.
+
+## Next steps
+
+- Familiarize yourself with [Shopify Flow](/docs/apps/build/flow) and learn about building connectors.
+- Connect your app to Shopify Flow so that events that occur in your app can [trigger workflows](/docs/apps/build/flow/triggers).
+- Connect your app to Shopify Flow so that your app receives data and information when a [workflow action](/docs/apps/build/flow/actions) runs.

data/scraped/clean/flow_triggers.txt

@@ -0,0 +1,12 @@
+
+
+## How triggers work
+
+A trigger is a task in Shopify Flow that starts the execution of a workflow. The trigger represents an event that happens in a store or in an app. You can [build a trigger](/docs/apps/build/flow/triggers/create) for Shopify Flow so that events in your app trigger workflows to run.
+
+![A diagram that show how third party triggers interface with Flow ](/assets/apps/flow/trigger_diagram.png)
+
+## Next steps
+
+- To build a trigger, you need to [create a trigger extension](/docs/apps/build/flow/triggers/create) in your app. In that extension, you specify details about the trigger using a [TOML file](/docs/apps/build/flow/triggers/reference).
+- Once you have published your extension, you can then test or use it by [calling the Shopify API](/docs/apps/build/flow/triggers/reference#mutation-api-reference) with the trigger payload.

data/scraped/clean/flow_triggers_create.txt

@@ -0,0 +1,176 @@
+
+
+## Requirements
+
+Make sure that you have the following:
+
+- A test web server that you can use to send information to Shopify Flow. You can use an existing web server. This web server needs to be able to send POST requests to Shopify's [GraphQL Admin API](/docs/api/admin-graphql).
+- A test app that works with the test web server and can send HTTP requests.
+- A development store that has [Shopify Flow](https://apps.shopify.com/flow) and the test app installed.
+- Your application has access to the `read_customers` scope. The trigger you will build using this tutorial will be using a customer reference which requires that scope.
+
+## Step 1: Create a Flow trigger extension
+
+To give your Flow action a meaningful name, use the following guidelines:
+
+- Use an object acted on + past tense verb format. For example, `Auction bid placed`.
+- Use sentence case.
+- Don't use punctuation.
+- Separate words using spaces.
+
+### Using Shopify CLI
+
+The following steps show how to create a trigger that sends bid information to Shopify Flow when a bid is placed on an auction.
+
+Use the Shopify CLI to generate a new extension:
+
+1. Navigate to your app directory.
+2. Run the following command:
+
+```bash
+#!/bin/bash
+shopify app generate extension
+```
+
+3. Select the `Flow Trigger` as the type of extension.
+4. Provide a meaningful name for your extension.
+
+After you've followed the prompts, Shopify CLI generates the extension’s file representation in your app's `/extensions` directory and gives you a success message. You can then go into your app's `/extensions` directory and start editing your new extension.
+
+The file structure of your extension should look like the following:
+
+```
+/auction-bid-placed
+  shopify.extension.toml
+```
+
+To learn more about the extensions file structure, refer to [App structure](/docs/apps/build/cli-for-apps/app-structure) and the documentation for your extension type.
+
+### Using the Partner Dashboard
+
+1. Open your [Partner Dashboard](https://partners.shopify.com).
+2. Click the app that you want to add your Shopify Flow trigger to.
+3. Click **Extensions**, then click **Create** or **Create extension**.
+4. Under **Flow**, click the **Flow/Triggers** card.
+5. Enter an internal extension name for your trigger and click **Save**.
+6. Enter a title and description for the trigger that will be shown to merchants.
+7. Copy the GraphQL endpoint that displays under the **Trigger description** field to a text file. Your app uses this endpoint to send your POST request to Shopify Flow. The endpoint follows the format `https://{shop}.myshopify.com/admin/api/latest/graphql.json`.
+8. In the **Request body properties** section, click **Add property**, choose a data type, and create the properties that display in Shopify Flow when a merchant chooses your trigger.
+
+## Step 2: Customize a Flow trigger configuration file
+
+The following procedure requires you to have generated a flow extension using Shopify CLI. In this section you'll use the default trigger template and update it to be a functional extension example.
+
+1. Change description to `Trigger for auction bids.`
+2. On the second `[[settings.fields]]` field, update:
+  - `type` to `number_decimal`
+  - `key` to `Amount`
+
+```bash
+[[extensions]]
+name = "Auction Bid Placed"
+type = "flow_trigger"
+handle = "auction-bid-placed"
+description = "Trigger for auction bids."
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+
+  [[settings.fields]]
+  type = "number_decimal"
+  key = "Amount"
+```
+
+## Step 3: Enable the draft version of your trigger
+
+Running [`app dev`](/docs/api/shopify-cli/app/app-dev) allows changes made to local files to update the draft version of your Flow task extensions. The draft version is only available in your development store.
+
+> Note:
+> When [`app dev`](/docs/api/shopify-cli/app/app-dev) is running and "Development store preview" is enabled, the draft version of a task will appear in your development store _in place_ of the deployed version. Other shops will continue to see the deployed version of your task (if one exists). Draft versions can be identified by the "draft" badge. To see the deployed version of the task in your development store, turn off "Development store preview" in the "Extensions" section of your app in [Shopify Partners](https://partners.shopify.com/).
+
+1. Navigate to your app directory.
+2. Run the following command to start using draft versions of your extension(s):
+
+```bash
+#!/bin/bash
+shopify app dev
+```
+
+3. Follow the prompts.
+
+## Step 4: Test your trigger
+
+After the [`app dev`](/docs/api/shopify-cli/app/app-dev) command has started, you can test the draft version of your trigger in Shopify Flow.
+
+1. In your development store, create a [workflow](https://www.shopify.com/admin/apps/flow) that uses the trigger that you created for your app.
+
+2. Using the Admin GraphQL API, send a `flowTriggerReceive` mutation with the following arguments:
+
+- The `handle` of the trigger
+- The `payload` of the trigger containing the fields defined in the extension TOML
+  - The size of the payload (keys included) must be under 50 KB. If the size of the properties body exceeds the limit, then Shopify responds to the GraphQL request with a validation error reading `Properties size exceeds the limit of 50000 bytes`. As a result, workflows with the specified trigger won't start from this request.
+
+The following is an example of a `flowTriggerReceive` mutation:
+
+```graphql
+mutation
+{
+  flowTriggerReceive(
+    handle: "auction-bid-placed",
+    payload: {
+      "Amount": "30",
+      "customer_id": 12345
+  })
+  {
+    userErrors {field, message}
+  }
+}
+```
+
+> [Learn how to authenticate your GraphQL Admin API requests](/docs/api/admin-graphql#authentication).
+
+The following example shows the same mutation sent in a curl request:
+
+```curl
+curl --location 'https://{shop_domain}.myshopify.com/admin/api/latest/graphql.json' \
+--header 'X-Shopify-Access-Token: {access_token}' \
+--header 'Content-Type: application/json' \
+--data '{
+  "query": "mutation flowTriggerReceive($handle: String, $payload: JSON) { flowTriggerReceive(handle: $handle, payload: $payload) { userErrors { message field } } }",
+  "variables": {
+    "handle": "auction-bid-placed",
+    "payload": {
+      "customer_id": {customer_id},
+      "Amount": 30
+    }
+  }
+}'
+```
+
+## Step 5: Deploy your extension
+
+> Note:
+> Deploying extensions using the `app deploy` command also publishes the extensions. We recommend testing changes by using [`app dev`](/docs/api/shopify-cli/app/app-dev) or deploying to a test app before deploying them to a production app.
+
+Use Shopify CLI to deploy your extensions:
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the prompts.
+
+When you receive confirmation that the deploy was successful, your extensions have been released.
+
+## Next steps
+
+- Familiarize yourself with [Shopify Flow](/docs/apps/build/flow) and learn about building connectors.
+- Connect your app to Shopify Flow so that your app receives data and information when a [workflow action](/docs/apps/build/flow/actions) runs.
+- Learn how to receive [lifecycle events from Shopify Flow](/docs/apps/build/flow/track-lifecycle-events) about the stores that are using your triggers in enabled workflows.
+- Learn how to use [complex data types](/docs/apps/build/flow/configure-complex-data-types) in your Shopify Flow trigger.

data/scraped/clean/flow_triggers_reference.txt

@@ -0,0 +1,156 @@
+
+
+When you create a new trigger extension using Shopify CLI, a basic version of the TOML configuration file structure is generated. In this guide, you'll learn about configuring the different sections and properties of the configuration file, including extension properties, extension fields, reference field types, custom field types, and more.
+
+This guide will also inform you how to make HTTP requests to Flow to start the workflows in which your extension is the trigger.
+
+## TOML
+
+> Note:
+> Creating Flow extensions using Shopify CLI is an exciting new feature that is currently in development. As with any developing feature, it's important to note that the Flow's CLI capabilities will continue to evolve and improve over time. Developers can expect additional functionality, enhancements, and improvements to be added as development progresses.
+>
+>To create Flow extensions using [Shopify CLI](https://www.npmjs.com/package/@shopify/cli), ensure you have the latest version installed.
+
+When you create a new trigger extension using Shopify CLI, you'll get a basic version of the TOML configuration file structure which should look like the following example:
+
+```bash
+[[extensions]]
+name = "Auction Bid"
+type = "flow_trigger"
+handle = "auction-bid"
+description = "Your description"
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+
+  [[settings.fields]]
+  type = "single_line_text_field"
+  key = "your field key"
+```
+
+### Trigger extension properties
+
+Extension properties are listed in the `[[extensions]]` section and enable you to define the interface between Flow and your event.
+
+| Property name               | Description                                                | Rules                                  |
+| --------------------------- | ------------------------------------------------------------- | -------------------------------------- |
+| `name` <br><span class="heading-flag">Required</span> | Name of your extension. Will be the merchant-facing name of your task in the editor. This should be something that is human readable. | |
+| `type` <br><span class="heading-flag">Required</span> | The type of your extension. This should always be set to “flow_trigger” for Flow triggers.          | - Value must be `flow_trigger`.
+| `handle` <br><span class="heading-flag">Required</span> | A unique identifier for your extension. This property cannot be changed once you’ve run the `dev` or `deploy` command. | - Cannot exceed 30 characters.<br /> - Must be unique across your app's extensions. <br /> - Must only contain alphanumeric characters and hyphens. |
+| `description` <br><span class="heading-flag">Optional</span> | A description of your extension. This description will be shown in the Flow editor navigation panel. | |
+
+### Trigger extension fields
+
+Trigger extension fields are listed in the `[settings]` section, with each field using a `[[settings.field]]` header. These fields define the payload your event will send to Flow. You can add more than one field to your Flow trigger. The order of the fields in the TOML file is preserved when they're being rendered in the editor configuration panel. When sending a trigger payload, all fields defined in a trigger are required.
+
+| Property name                  | Description                                                                                                                                                    | Rules |
+| ------------------------------ | --------------------------------------------------------------------------------------------------- | --------------------------------|
+| `type` <br><span class="heading-flag">Required</span> | The field type. | - [Accepted custom field types](#custom-field-types).<br> - [Accepted reference field types](#reference-field-types).  |
+| `key` <br><span class="heading-flag">Optional</span> | A unique key that identifies your field. This should be human readable since it will appear in the Flow editor in the environment picker menu.                   | - Required for custom field types. <br />  Should only contain alphabetic values or spaces. <br /> - This property is not valid for reference field types. |
+| `description` <br><span class="heading-flag">Required</span> | A description of the field. This will appear in the Flow editor configuration panel. |
+
+### Supported field types
+
+When you create a trigger, you add the fields that your trigger sends to Shopify Flow in the `[settings]` section of the TOML file. These fields define what your event plans to send to Shopify Flow. Merchants can then use that data in their conditions and actions.
+
+You can add two types of fields: custom fields or predefined reference fields.
+
+![A diagram that shows how trigger properties are rendered in the Flow editor](/assets/apps/flow/trigger_properties_in_flow_editor.png)
+
+### Reference field types
+
+A reference field lets you send the identifier of a Shopify resource to Shopify Flow. This allows merchants to build workflows that use any data related to that resource.
+
+For example, your trigger sends a customer ID to Shopify Flow. The merchant can create a condition that checks `customer / amountSpent` and `customer / tags`. In their action, the merchant can include the template variables for customers, such as `{{customer.email}}`.
+
+To specify that a trigger will include a reference field, you only need to specify the `type` and an optional `description` property. For example:
+
+```bash
+...
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+```
+
+You can use the following reference fields:
+
+| Reference type (TOML) | Payload key |  Description |
+| --- | --- | --- |
+| `customer_reference` | `customer_id` |  The [`id`](/docs/api/admin-rest/current/resources/customer#resource-object) or [`legacyResourceId`](/docs/api/admin-graphql/current/objects/customer#field-customer-legacyresourceid) of the customer.<br><br>Triggers that include this property in the request body are also available to [Shopify marketing automations](/docs/apps/build/marketing-analytics/automations). |
+| `order_reference` | `order_id` | The [`id`](/docs/api/admin-rest/current/resources/order#resource-object) or [`legacyResourceId`](/docs/api/admin-graphql/current/objects/order#field-order-legacyresourceid) of the order.  |
+| `product_reference` | `product_id` | The [`id`](/docs/api/admin-rest/current/resources/product#resource-object) or [`legacyResourceId`](/docs/api/admin-graphql/current/objects/product#field-product-legacyresourceid) of the product. |
+
+When making a request to Flow, include the payload key. See the [mutation API reference section](#mutation-api-reference) for a complete example.
+
+### Custom field
+
+A custom field lets you define the data that you send as part of your trigger request. The following is an example:
+
+```bash
+...
+
+[settings]
+
+  [[settings.fields]]
+  type = "number_decimal"
+  key = "Amount"
+```
+
+#### Custom field types
+
+The following are the available custom field types:
+
+| Field type | Description | Example |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------- |
+| `boolean`                 | A Boolean value. | `true`, `false` |
+| `email`                   | An email formatted string. | `"[email protected]"` |
+| `single_line_text_field`  | A string. | `"Hello world."`
+| `number_decimal`          | A number with a decimal point. | `1.0` |
+| `url`                     | A URL formatted string. | `"https://example/com"` |
+| `schema.<type>`           | `<type>` can be any type defined in the provided schema. [Learn more about defining complex types](/docs/apps/build/flow/configure-complex-data-types). | `{ "foo": "bar", "baz": 123 }` |
+
+#### Naming custom fields
+
+Field names need to be self-describing and readable. Use sentence case and separate words with spaces (not underscores or hyphens). These names can contain only alphabetical characters (a-z, A-Z) and spaces.
+
+When you refer to these fields in the payload that you send to Shopify Flow, enter the names verbatim . For example, `{ "City location": "Ottawa" } }`. Don't use shortened versions.
+
+#### Custom fields in the Shopify Flow editor
+
+Fields can be used in the Shopify Flow editor either in conditions or in actions as [template variables](https://help.shopify.com/manual/shopify-plus/flow2/reference/variables). When used as template variables, Shopify Flow converts your `key` property to camelCase such as `{{ customerEmail }}`.
+
+## Mutation API reference
+
+Once your extension is defined, published, and activated in a workflow according to [this guide](/docs/apps/build/flow/triggers/create), you can call Flow's mutation with an event, which will start the workflow(s).
+
+```graphql
+mutation
+{
+  flowTriggerReceive(
+    handle: "auction-bid-placed",
+    payload: {
+      "Amount": "30",
+      "customer_id": 12345
+  })
+  {
+    userErrors {field, message}
+  }
+}
+```
+
+| Property name       | Property usage                                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------------------------ |
+| `handle`              | The extension’s handle.                                                                                 |
+| `payload`          | The fields that you selected for your payload schema in the action configuration. These should be serialized in a key-value pair format where the keys are equal to your field's “key” properties. |
+
+> Note:
+> If you are using a Shopify admin API version of `2023-07` or earlier the mutation won't support the `handle` and `payload` properties. For information on that mutation shape you can rely on the [flowTriggerReceive documentation](/docs/api/admin-graphql/2023-07/mutations/flowTriggerReceive).
+
+## Considerations
+
+- When you create a trigger, the payload that you send to Shopify Flow needs to be [less than 1 MB and contain specific content](/docs/apps/build/flow/triggers/create#step-4-test-your-trigger) in the body.
+- Triggers have the same [API rate limits](/docs/api/usage/rate-limits) as the Shopify API.

data/scraped/raw/flow.txt

@@ -0,0 +1,112 @@
+
+
+[Shopify Flow](https://apps.shopify.com/flow) is an app that allows merchants to customize their store through automation. As a developer, you can integrate your app with the Flow platform through custom tasks, such as triggers and actions.
+
+![A workflow for a low stock notification displaying a trigger, condition, and action](/assets/apps/flow/example-workflow-inventory-quantity-changed.png)
+
+This guide introduces you to the different extensions you can create, building a Flow trigger and action, and considerations when making changes to your extensions.
+
+## Why build for Flow
+
+Building for Flow can help you to increase the value of your app by allowing merchants to automate their business processes. For example, suppose that you have a review app. After a review is created, merchants might want to send a notification (using email, Slack, or SMS), award loyalty points, and more. If you build the `Review created` trigger, Flow allows merchants to do any of those actions with your app. By integrating with Flow, you can:
+
+- **Improve integrations between your app, Shopify, and other apps**: Any task you build can be used with the triggers and actions that Flow already provides, which immediately connects your app to thousands of new features.
+- **Save development time**: Rather than building and maintaining direct integrations with many other apps, you can integrate with Flow and provide similar value to your merchants.
+- **Improved visibility**: Merchants can discover your templates or tasks in Flow, even if they don't have your app installed. Additionally, when you integrate with Flow, you receive a **Works with Flow** badge on your listing in the Shopify App Store. Your app will also be listed in the [Flow app directory](https://apps.shopify.com/collections/connectors-for-shopify-flow).
+
+## What you can build
+
+As a Partner you can build one or more tasks related to your app for your merchants to use. These merchants need to have both your app and Shopify Flow installed. Shopify Flow includes the following task types:
+
+| Extension type | Description | Example |
+|---|---|---|
+| [Trigger](/docs/apps/build/flow/triggers) | An event that starts a workflow, and can be something that happens in a store or in an app. | A new order is created in a merchant's online store. |
+| Condition | A rule that determines whether an action will be taken. As a developer you cannot create a condition task. | A condition is set to check whether the total amount paid for the order is over $200.00. |
+| [Action](/docs/apps/build/flow/actions) | A task that's executed in a store or in an app when certain conditions are met. | If the total amount paid for the order is over $200.00, then a tag is added to the customer account that placed the order. |
+| [Template](/docs/apps/build/flow/templates) | An example that demonstrates how your task works for a key use case. Templates are available through Flow's template library. | A workflow that sends an internal email when your trigger runs. |
+
+## Plans supported
+
+Flow is an optional app that's available to Shopify merchants on any paid plan. Flow is widely adopted by Shopify merchants, especially those with stores on Shopify Plus.
+
+Flow features [differ by plan](https://help.shopify.com/en/manual/shopify-flow). For apps, the primary difference is that if you have a [custom app](https://help.shopify.com/en/manual/apps/app-types/custom-apps), your Flow app extensions are available only to a [Shopify Plus](https://www.shopify.com/plus) store that has your app installed.
+
+## Templates
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  [create a template](/docs/apps/build/flow/templates/create-a-template)  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+
+## Getting started
+
+<div class="resource-card-grid">
+  <div>
+  <a class="resource-card" href="/docs/apps/build/flow/triggers" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/authentication"
+     data-alt-src="/assets/resource-cards/authentication-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Learn more about triggers
+    </h3>
+    <p class="resource-card__description">Connect your app to Shopify Flow so that your app can send an event that starts a workflow.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/actions" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/star"
+     data-alt-src="/assets/resource-cards/star-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Learn more about actions
+    </h3>
+    <p class="resource-card__description">Connect your app to Shopify Flow so that your app receives data when a workflow action runs.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/templates" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/filesystem"
+     data-alt-src="/assets/resource-cards/filesystem-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Learn more about Flow templates
+    </h3>
+    <p class="resource-card__description">Create workflow templates to showcase your triggers and actions.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/track-lifecycle-events" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/changelog"
+     data-alt-src="/assets/resource-cards/changelog-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Lifecycle events
+    </h3>
+    <p class="resource-card__description">Get notified about events related to your Flow triggers and actions.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/migrate-legacy-extensions" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/cli"
+     data-alt-src="/assets/resource-cards/cli-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Migrate legacy Flow extensions
+    </h3>
+    <p class="resource-card__description">Learn how to migrate your existing extensions from the Partner Dashboard to CLI-managed.</p>
+  </a>
+</div>
+</div>
+

data/scraped/raw/flow_actions.txt

@@ -0,0 +1,16 @@
+
+
+## How actions work
+
+An action is a workflow component in Shopify Flow. It represents a task that's executed in a store or in an app when certain conditions are met. You can connect your app to Shopify Flow so that your app receives data when a workflow action runs.
+
+This guide shows you how to add an action to your app so that merchants can use it in their workflows.
+
+![A diagram that show how third party actions interface with Flow ](/assets/apps/flow/action_diagram.png)
+
+## Next steps
+
+- Follow our step by step guide on [how to create and test a Flow action](/docs/apps/build/flow/actions/create).
+- Check out our action endpoint guide for more information on how to setup an [execution endpoint](/docs/apps/build/flow/actions/endpoints#flow-action-execution), a [custom configuration page preview endpoint](/docs/apps/build/flow/actions/endpoints#custom-configuration-page-preview) and [custom validation](/docs/apps/build/flow/actions/endpoints#custom-validation).
+- Learn more about how to [return complex data](/docs/apps/build/flow/configure-complex-data-types) in a Flow action.
+- Interested in building a custom configuration page? Follow this [guide](/docs/apps/build/flow/actions/build-config-ui) to learn more.

data/scraped/raw/flow_actions_build-config-ui.txt

@@ -0,0 +1,895 @@
+
+
+To give merchants a more seamless action configuration experience, and to allow them to manage resources that are external to Shopify Flow, you can embed a page from your app in the Shopify Flow editor.
+
+In your Shopify Flow action configuration, merchants see a preview with an image and text that's fetched from your [custom configuration page preview URL](/docs/apps/build/flow/actions/endpoints#custom-configuration-page-preview). Merchants can click the button to access the custom configuration page.
+
+<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/flow/ccp-preview-d0bce046a2f45d366041698ab3e42abbf3ebd3a191696e16acaecb7718da5afb.png" class="lazyload" alt="A custom configuration page preview with an "Edit Email" button." width="899" height="737"></figure>
+
+Your custom configuration page is then displayed in a frame in the Shopify admin.
+
+<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/flow/ccp-app-bridge-a41ecd52945725531037786df500785ea47a89f16b7df392e19be619bd133f64.png" class="lazyload" alt="The custom configuration page is rendered with an App Bridge title bar." width="1253" height="756"></figure>
+
+In this tutorial, you'll learn how to render a custom configuration page in Shopify Flow, customize the page frame, and access data relevant to your action in the custom configuration page context.
+
+## Requirements
+
+- You've created a [Partner account](https://www.shopify.com/partners).
+- You've [created an app](/docs/apps/build/scaffold-app).
+
+## Resources
+
+To implement this feature, you'll use the following:
+
+- [Shopify App Bridge](/docs/api/app-bridge)
+- App Bridge components
+- App Bridge actions specific to the custom configuration page
+
+## Implementing a custom configuration page
+
+To build a custom configuration page, you'll [use Shopify App Bridge to render a page from your app page in Shopify Flow](#use-shopify-app-bridge-to-render-your-app-page).
+
+From the context of the custom configuration page, you can then [access step and property information](#access-action-information) that you can use to display the appropriate information.
+
+You can also [add additional buttons](#add-buttons-to-the-app-bridge-title-bar) to the App Bridge title bar, or [trigger a redirect to the previous page](#return-to-the-previous-page).
+
+## Use Shopify App Bridge to render your app page
+
+> Note:
+> The specifics of the Custom Configuration Page integration varies between Shopify App Bridge versions. Make sure you implement the integration specific to your Shopify App Bridge version.
+
+To render your custom configuration page, you need to integrate Shopify App Bridge on the route that you want to render. To learn about setting up Shopify App Bridge, refer to one of the following pages:
+
+- [Getting started with Shopify App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup)
+- [Getting started with App Bridge React](/docs/api/app-bridge-library#react)
+
+### Access action information
+
+In the context of the custom configuration page, Shopify Flow makes the following action information available:
+
+- **A `step_reference` search parameter**: `step_reference` is a unique ID for the step within a workflow, and can be used to identify the resource that the merchant is requesting.
+- **Property data**: Properties contains the extension fields data that make up your [action payload schema](/docs/apps/build/flow/actions/endpoints#request). The properties are passed as an object containing the properties as key-value pairs:
+
+    <p>
+    <div class="react-code-block" data-preset="basic">
+    <div class="react-code-block-preload ThemeMode-dim">
+    <div class="react-code-block-preload-bar basic-codeblock"></div>
+    <div class="react-code-block-preload-placeholder-container">
+    <div class="react-code-block-preload-code-container">
+    <div class="react-code-block-preload-codeline-number"></div>
+    <div class="react-code-block-preload-codeline"></div>
+    </div>
+    <div class="react-code-block-preload-code-container">
+    <div class="react-code-block-preload-codeline-number"></div>
+    <div class="react-code-block-preload-codeline"></div>
+    </div>
+    <div class="react-code-block-preload-code-container">
+    <div class="react-code-block-preload-codeline-number"></div>
+    <div class="react-code-block-preload-codeline"></div>
+    </div>
+
+    </div>
+    </div>
+
+
+    <script type="text/plain" data-language="json">
+    RAW_MD_CONTENT{
+      <property-name>: <property-value>
+    }
+    END_RAW_MD_CONTENT</script>
+
+    </div>
+    </p>
+
+
+### Shopify App Bridge integration for versions 4.X.X and up
+
+#### Register to the Custom Configuration Page's intent
+
+To access property data with Shopify App Bridge version 4.X.X and up, you will need to use the `shopify.intents` API. The following example code allows you to register to the Custom Configuration Page's intent:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="Example"></script>
+
+<script type="text/plain" data-language="jsx" data-title="React">
+RAW_MD_CONTENTimport { useAppBridge } from '@shopify/app-bridge-react'
+
+const Application = () => {
+  const shopify = useAppBridge()
+  const [intent, setIntent] = useState({})
+
+  useEffect(() => {
+    const cleanup = shopify.intents.register((intent) => {
+      setIntent(intent)
+    })
+
+    return () => cleanup()
+  }, []);
+
+  return <>...</>
+}
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+The `intent` object will contain the following data:
+
+| Field   | Data Type | Description                                                                                           |
+| ------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| action  | `string`    | The action that has been registered for. In the case of the Custom Configuration Page, it will always be set to `configure`.     |
+| type    | `string`    | A GID with the following structure: `gid://flow/stepReference/<step-reference>`.                     |
+| data    | `object`    | An object that contains the `properties` data.                                                            |
+| finish  | `method`  | A function that allows you to navigate to the previous page.                                      |
+
+The register method also returns a cleanup function, which you can use to unregister from the intent when your component is unmounting.
+
+#### Return to the previous page
+
+By default, the title bar of the custom configuration page includes an **Exit** button that the user can use to return to the previous page. You can choose to trigger a redirect to the previous page using the `intent.finish()` method:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="Example"></script>
+
+<script type="text/plain" data-language="jsx" data-title="React">
+RAW_MD_CONTENT<Button
+  primary
+  onClick={() => {
+    intent.finish()
+  }}
+>
+  Go back to Flow
+</Button>
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+#### Add buttons to the App Bridge title bar
+
+You can add more actions to the navigation bar by using the **[ui-title-bar](/docs/api/app-bridge-library/web-components/ui-title-bar)** element. Only primary and secondary actions are supported.
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="Example"></script>
+
+<script type="text/plain" data-language="jsx" data-title="React">
+RAW_MD_CONTENTfunction Page() {
+  return <ui-title-bar>
+    <button variant="primary" onClick={() => console.log('Primary action')}>
+      Primary action
+    </button>
+    <button onClick={() => console.log('Secondary action')}>
+      Secondary action
+    </button>
+  </ui-title-bar>
+}
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+### Shopify App Bridge integration for versions 3.X.X and down
+
+#### Request property data
+
+To access property data, you need to subscribe to `APP::APP_FRAME::PROPERTIES_EVENT`, and then request the properties by triggering the `APP::APP_FRAME::REQUEST_PROPERTIES` event. The following example code subscribes to the properties event and requests the action properties in React:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="Example"></script>
+
+<script type="text/plain" data-language="jsx">
+RAW_MD_CONTENTimport { useAppBridge } from '@shopify/app-bridge-react'
+
+const Application = () => {
+  const app = useAppBridge()
+  const [propertiesData, setPropertiesData] = useState({})
+
+  useEffect(() => {
+    const unsubscribeToPropertiesEvent = app.subscribe(
+      'APP::APP_FRAME::PROPERTIES_EVENT',
+      payload => {
+        setPropertiesData(payload['properties'])
+      },
+    )
+
+    return unsubscribeToPropertiesEvent
+  }, [app])
+
+  useEffect(() => {
+    app.dispatch({
+      type: 'APP::APP_FRAME::REQUEST_PROPERTIES',
+      group: 'AppFrame',
+    })
+  }, [])
+
+  return (...)
+}
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+#### Return to the previous page
+
+By default, the title bar of the custom configuration page includes an **Exit** button that the user can use to return to the previous page. This might be the Shopify Flow editor. However, you can choose to trigger a redirect to the previous page using `APP::APP_FRAME::NAVIGATE_BACK`:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="Example"></script>
+
+<script type="text/plain" data-language="jsx">
+RAW_MD_CONTENTapp.dispatch({
+  type: 'APP::APP_FRAME::NAVIGATE_BACK',
+  group: 'AppFrame',
+})
+
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+#### Add buttons to the App Bridge title bar
+
+You can add more actions to the App Bridge title bar in one of two ways:
+
+- Using `@shopify/app-bridge`: Use the [`Button.create`](/docs/api/app-bridge/previous-versions/actions/button#create-a-button) initializer to create the buttons, then pass them to the [`Titlebar.create`](/docs/api/app-bridge/previous-versions/actions/titlebar#plain-javascript) initializer to set the buttons. You need to keep a reference to the Titlebar instance if you wish to do additional updates after the initialization.
+- Using `@shopify/app-bridge-react`: Pass the primary and secondary actions to the [`TitleBar`](/docs/api/app-bridge/previous-versions/actions/titlebar#react) React component.
+
+Only primary and secondary actions on the TitleBar are supported. Other App Bridge actions are ignored.
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="Example"></script>
+
+<script type="text/plain" data-language="js" data-title="JavaScript">
+RAW_MD_CONTENTimport { TitleBar, Button } from '@shopify/app-bridge/actions'
+
+// create the buttons
+const primaryBtn = Button.create(app, {
+  label: 'Button 1',
+})
+const secondaryBtn = Button.create(app, {
+  label: 'Button 2',
+})
+
+// add click handlers
+primaryBtn.subscribe(Button.Action.CLICK, () => {
+  console.log('button 1 clicked')
+})
+secondaryBtn.subscribe(Button.Action.CLICK, () => {
+  console.log('button 2 clicked')
+})
+
+const titleBar = TitleBar.create(app, {
+  title: '',
+  buttons: {
+    primary: primaryBtn,
+    secondary: [secondaryBtn],
+  },
+})
+
+// update buttons after initialization
+const newPrimary = Button.create(app, {
+  label: 'New button',
+})
+newPrimary.subscribe(Button.Action.CLICK, () => {
+  console.log('new primary button clicked')
+})
+
+titleBar.set({
+  buttons: {
+    primary: newPrimary,
+    secondary: [secondaryBtn],
+  },
+})
+
+END_RAW_MD_CONTENT</script>
+<script type="text/plain" data-language="jsx" data-title="React">
+RAW_MD_CONTENTimport { TitleBar } from '@shopify/app-bridge-react'
+
+function Page() {
+  const buttons = {
+    primaryAction: {
+      content: 'Button 1',
+      onAction: () => {
+        console.log('button 1 clicked')
+      },
+    },
+    secondaryActions: [
+      {
+        content: 'Button 2',
+        onAction: () => {
+          console.log('button 2 clicked')
+        },
+      },
+    ],
+  }
+
+  return <TitleBar title="" {...buttons} />
+}
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+## Next steps
+
+
+
+- Add [custom configuration page preview URL](/docs/apps/build/flow/actions/endpoints#custom-configuration-page-preview) and [custom validation](/docs/apps/build/flow/actions/endpoints#custom-validation) endpoints to your app.
+
+
+
+- Add your custom configuration page preview URL, custom configuration page URL, and custom validation URL to [your Shopify Flow action configuration](/docs/apps/build/flow/actions).
+
+> Note:
+> To add a custom configuration page to your action, you also need to add a custom validation endpoint.
+

data/scraped/raw/flow_actions_create.txt

@@ -0,0 +1,298 @@
+
+
+To create an action that merchants can use in their workflows, you need to add the action to your app. The action needs to contain the following information:
+
+- The fields that the merchant needs to complete when they add the action to their workflows
+- The URL that Shopify Flow uses to send (POST) the contents (JSON payload) of the action to your app
+
+You also need to configure your app to process the data from the POST request when it arrives and to send status codes back to Shopify Flow.
+
+To enhance the merchant experience and more closely integrate external systems, you can also [build a custom configuration page](/docs/apps/build/flow/actions/build-config-ui). To improve the reliability of your action, you can add [custom validation](/docs/apps/build/flow/actions/endpoints#custom-validation) for action properties.
+
+## Requirements
+
+- You have the following:
+  - A test web server that has access to the Internet, so that it can receive POST requests from Shopify Flow
+  - A test app that works with the test web server
+  - A development store that has [Shopify Flow](https://apps.shopify.com/flow) and the test app installed
+
+## Step 1: Create a Flow Action
+
+To give your Flow action a meaningful name, use the following guidelines:
+
+- Use a present-tense verb + object acted on format. For example, `Place auction bid`.
+- Use sentence case.
+- Don't use punctuation.
+- Separate words using spaces.
+
+### Using Shopify CLI
+
+Use the Shopify CLI to generate a new extension:
+
+1. Navigate to your app directory.
+2. Run the following command:
+
+<p>
+<div class="react-code-block" data-preset="terminal">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash">
+RAW_MD_CONTENT#!/bin/bash
+shopify app generate extension
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+3. Select the `Flow Action` as the type of extension.
+4. Provide a meaningful name for your extension.
+<br>
+
+
+After you've followed the prompts, Shopify CLI generates the extension’s file representation in your app's `/extensions` directory and gives you a success message. You can then go into your app's `/extensions` directory and start editing your new extension.
+
+The file structure of your extension should look like the following:
+
+```
+/place-auction-bid
+  shopify.extension.toml
+```
+
+To learn more about the extensions file structure, refer to [App structure](/docs/apps/build/cli-for-apps/app-structure) and the documentation for your extension type.
+
+### Using the Partner Dashboard
+
+1. In your Partner Dashboard, click [Apps](https://partners.shopify.com/current/apps).
+2. Select the app that you want to add your Shopify Flow action to.
+3. Click **Extensions**, then click **Create** or **Create extension**.
+4. Under the **Flow** tab, click **Flow/Actions**.
+5. In the **Extension name** field, name your action, such as `Place auction bid`. This name is used only for internal purposes.
+6. Enter a title and description for the action. In the **Action Preview** area, you can see how the title and action display to merchants when they're choosing actions in Shopify Flow.
+7. Enter the URL for the action execution endpoint that you created. Shopify Flow sends the action's JSON payload to this endpoint when it's about to execute your action.
+
+## Step 2: Customize a Flow action configuration file
+
+In this section you'll use the default action template and update it to be a functional extension example. Once you have generated a Flow extension using Shopify CLI, follow the instructions below:
+
+1. Change the description to `Place a bid on an auction`.
+2. Update the `extensions.runtime_url` to an endpoint where you can receive the runtime request.
+3. On the second `settings.fields` field, update the following values:
+  - `type` to `number_decimal`
+  - `key` to `amount`
+  - `name` to `Bid Amount`
+  - Add a `description` property and set it to `The amount of the bid`
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash" data-title="toml">
+RAW_MD_CONTENT[[extensions]]
+name = "Place Auction Bid"
+type = "flow_action"
+handle = "place-bid"
+description = "Place a bid on an auction"
+runtime_url = "https://your-server-domain/path/to/action/handler"
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+  required = true
+
+  [[settings.fields]]
+  type = "number_decimal"
+  key = "amount"
+  name = "Bid Amount"
+  description = "The amount of the bid"
+  required = true
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+## Step 3: Configure your web server
+
+To build a Shopify Flow action, you need to add a service to your web server to listen for the JSON payload that Shopify Flow sends when the action runs.
+
+Optionally, you can also add the following:
+
+- An endpoint to validate actions
+- A [custom configuration page](/docs/apps/build/flow/actions/build-config-ui), and an endpoint that lets merchants preview your custom configuration page
+
+Add the following API endpoints to your server:
+
+| Endpoint | Purpose |
+| --- | --- |
+| [Flow action execution](/docs/apps/flow/actions/endpoints#flow-action-execution) | The endpoint where the automation tool sends your action's payload. The payload contains data that you can use to execute the action in your app.|
+| [Custom configuration page preview](/docs/apps/flow/actions/endpoints#custom-configuration-page-preview) | An endpoint that provides data about your [custom configuration page](/docs/apps/build/flow/actions/build-config-ui) to display in the automation tool. This endpoint is required if you want to use a custom configuration page.|
+| [Custom validation](/docs/apps/flow/actions/endpoints#custom-validation) | An endpoint that validates the contents of merchant-configurable properties in an action payload when an action is saved. This endpoint is required if you want to use a custom configuration page.|
+
+
+
+To learn more about the endpoint requirements for your server, refer to [Action endpoints](/docs/apps/build/flow/actions/endpoints).
+
+To learn how to create a custom configuration page, refer to [Build a custom configuration page](/docs/apps/build/flow/actions/build-config-ui).
+
+## Step 4: Enable the draft version of your action
+
+Running [`app dev`](/docs/api/shopify-cli/app/app-dev) allows changes made to local files to update the draft version of your Flow task extensions. The draft version is only available in your development store.
+
+> Note:
+> When [`app dev`](/docs/api/shopify-cli/app/app-dev) is running and "Development store preview" is enabled, the draft version of a task will appear in your development store _in place_ of the deployed version. Other shops will continue to see the deployed version of your task (if one exists). Draft versions can be identified by the "draft" badge. To see the deployed version of the task in your development store, turn off "Development store preview" in the "Extensions" section of your app in [Shopify Partners](https://partners.shopify.com/).
+
+1. Navigate to your app directory.
+2. Run the following command to start using draft versions of your extension(s):
+
+```bash
+#!/bin/bash
+shopify app dev
+```
+
+3. Follow the prompts.
+
+
+## Step 5: Test the action
+
+After you've created an action in the Partner Dashboard and added support for it in your web server, you can test the action in Shopify Flow on your development store.
+
+1. In your development store, create a [workflow](https://www.shopify.com/admin/apps/flow) that uses the action. For example, add the trigger that you created in the [Triggers guide](/docs/apps/build/flow/triggers/create) and this action to a workflow.
+
+2. If you created a custom configuration page, then ensure that the preview displays and that the custom configuration page is accessible.
+
+3. If you added any custom validation, then ensure that it works as expected.
+
+4. Trigger the workflow. For example, in your web server, run the event that sends the trigger information to Shopify Flow.
+
+When the workflow completes, your web server has sent data to Shopify Flow because of the trigger. Shopify Flow has sent this data to a web server that logged the information to its console because of the action.
+
+## Step 6: Deploy your extension
+
+> Note:
+> Deploying extensions using the `app deploy` command also publishes the extensions. We recommend testing changes by using [`app dev`](/docs/api/shopify-cli/app/app-dev) or deploying to a test app before deploying them to a production app.
+
+Use Shopify CLI to deploy your extensions:
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the prompts.
+
+When you receive confirmation that the deploy was successful, your extensions have been released.
+
+
+## Verifying requests
+
+For security reasons, make sure that you verify the following elements in each request:
+
+- The POST request's HMAC header (either `x-shopify-hmac-sha256` or `http-x-shopify-hmac-sha256`). The HMAC header should be verified before you process the payload. For more information, refer to [Verifying requests](/docs/apps/build/flow/actions/endpoints#verifying-requests).
+- The payload `handle`. This ID should match the `handle` of the action that you created, and can be retrieved from the payload preview.
+
+## Next steps
+
+- Connect your app to Shopify Flow so that events that occur in your app can [trigger workflows](/docs/apps/build/flow/triggers).
+- Learn how to receive [lifecycle events from Shopify Flow](/docs/apps/build/flow/track-lifecycle-events) about the stores that are using your triggers in enabled workflows.
+- Learn more about how to [return complex data](/docs/apps/build/flow/configure-complex-data-types) in a Flow action.

data/scraped/raw/flow_actions_endpoints.txt

@@ -0,0 +1,667 @@
+
+
+Before your app can receive communication from Flow actions, you need to create one or more standardized API endpoints on your web server. Review the information for each endpoint to understand its requirements, the format of the payload, and the expected response. You'll also learn how to avoid processing duplicate requests, identify an action by its ID, and verify requests for security purposes.
+
+| Endpoint | Purpose |
+| --- | --- |
+| [Flow action execution](/docs/apps/flow/actions/endpoints#flow-action-execution) | The endpoint where the automation tool sends your action's payload. The payload contains data that you can use to execute the action in your app.|
+| [Custom configuration page preview](/docs/apps/flow/actions/endpoints#custom-configuration-page-preview) | An endpoint that provides data about your [custom configuration page](/docs/apps/build/flow/actions/build-config-ui) to display in the automation tool. This endpoint is required if you want to use a custom configuration page.|
+| [Custom validation](/docs/apps/flow/actions/endpoints#custom-validation) | An endpoint that validates the contents of merchant-configurable properties in an action payload when an action is saved. This endpoint is required if you want to use a custom configuration page.|
+
+
+
+## General endpoint requirements
+
+The requirements for Shopify Flow action endpoints are as follows:
+
+| Rule / concern | Type / requirement |
+| --- | --- |
+| API format | REST |
+| Content type | JSON |
+| Security mechanism | [HMAC / Signed requests](#verifying-requests) |
+| Protocol | HTTPS (app domain requires valid SSL certificate) |
+
+
+## Flow action execution
+
+When a workflow that contains your action is executed, Flow sends an HTTP request to your Flow action execution endpoint (runtime URL). The request contains a payload that matches the payload schema that you configured for your action.
+
+### Request
+
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="POST <Flow action HTTPS request URL>"></script>
+
+<script type="text/plain" data-language="json">
+{
+  "shop_id": "gid://shopify/Shop/1",
+  "shopify_domain": "{shop}.myshopify.com",
+  "action_run_id": "xxxx-xxxx-xxxx-xxxx",
+  "action_definition_id": "Place auction bid",
+  "handle": "place-auction-bid",
+  "properties": {
+    "customer_id": "123456",
+    "amount": "10.00",
+    "step_reference": "320d4f8a-aaab-40ff-9ed2-2bc079633705"
+  }
+}
+</script>
+
+</div>
+</p>
+
+
+
+The payload contains the following parameters:
+
+| Property Name       | Property Usage                                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------------------------ |
+| `shop_id`             | The ID of the store.                                                                                    |
+| `shopify_domain`      | The myshopify.com domain of the store.                                                                  |
+| `action_run_id`       | An ID that represents an instance of an action being run. [Learn more](#prevent-apps-from-processing-duplicate-requests).                                   |
+| `handle`              | The extension’s handle. We recommend using this property to identify your actions.                     |
+| `step_reference`      | A unique ID for the step within a workflow. This property only appears if you’ve set a [Custom Configuration Page](/docs/apps/build/flow/actions/build-config-ui). |
+| `action_definition_id` | A unique ID for the action. The ID is based on the action name in the Partner Dashboard. |                                                                       |
+| `properties`          | The fields that you selected as part of the action configuration.                   |
+
+To learn how to configure the payload schema, refer to [Shopify Flow actions](/docs/apps/build/flow/actions).
+
+### Expected response
+
+After the automation tool sends a POST request to your web server, it waits for a maximum of 10 seconds for an [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes).
+
+If after 10 seconds the automation tool hasn't received a response from your web server, then the automation tool closes the connection to your web server and resends the request later.
+
+When the automation tool receives a response, it processes the codes as displayed in the following table:
+
+<table>
+  <tr>
+    <th>Status codes</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>200 Success</td>
+    <td>The automation tool assumes that the POST request has been processed by your web server.</td>
+  </tr>
+  <tr>
+    <td>202 Success</td>
+    <td>The automation tool assumes that the POST request has been accepted but not processed by your web server. The automation tool will resend the POST request at increasing intervals for up to 36 hours.
+    </td>
+  </tr>
+  <tr>
+    <td>4XX Client errors</td>
+    <td>
+      <p>If your web server sends a 429 status code without a <code>Retry-After</code> header, then the automation tool resends the POST request at increasing intervals for up to 36 hours.</p>
+      <p>If your web server sends a 429 status code with a <code>Retry-After</code> header that specifies a wait time, then the automation tool resends the POST request after the wait time (formatted in seconds) has passed.<p>
+      <p>If your web server sends any other 4XX code, then the automation tool assumes that there was a failure and it doesn't resend the POST request. Merchants see a notification in the automation tool that includes the raw contents of your web server's response.</p>
+      <p><strong>Example</strong>: <code>400 Bad Request { "error1": "server unresponsive" }</code></p>
+      <p>You can provide a  merchant-friendly description of the error by adding a key named <code>message</code>. For example:</p>
+      <p><strong>Example</strong>: <code>{ "message": "Finish the onboarding on our website." }</code>
+    </td>
+  </tr>
+  <tr>
+    <td>5XX Server errors</td>
+    <td>The automation tool resends the POST request at increasing intervals for up to 36 hours.</td>
+  </tr>
+  <tr>
+    <td>Other status code</td>
+    <td>If your web server returns a code that isn't described in this table, then the automation tool assumes that there was a failure and it doesn't resend the POST request.</td>
+  </tr>
+</table>
+
+### Prevent apps from processing duplicate requests
+
+Each request from an automation workflow contains an `action_run_id` that's unique to the associated action run. This ID is included in the body of the request.
+
+You can use `action_run_id` as an [idempotency key](/docs/api/usage/idempotent-requests) to check if the request is unique. In some cases, your app could receive an identical request more than once. For example, the automation tool might resend a request because it didn't receive your response in time. Your app can store the idempotency key in a cache with a set expiry time to avoid reprocessing duplicate requests.
+
+### Identify actions
+
+The `handle` property is how you identify the action for processing when your web server receives a request from Flow during workflow execution.
+
+```json
+{
+  "shop_id": 0,
+  "shopify_domain": "{shop}.myshopify.com",
+  "action_run_id": "xxxx-xxxx-xxxx-xxxx",
+  "handle": "auction-bid",
+  "action_definition_id": "Auction Bid",
+  "properties": {}
+}
+```
+
+
+## Custom configuration page preview
+
+An endpoint that provides data about your [custom configuration page](/docs/apps/build/flow/actions/build-config-ui) to display in the automation tool. This endpoint is required if you want to use a custom configuration page. Using the endpoint, you can dynamically set the following information:
+
+- The field’s label
+- A text preview
+- A last updated at timestamp
+- An image preview
+- The text used by the button that redirects to the custom configuration page
+
+### Request
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="POST <Custom configuration page preview URL>"></script>
+
+<script type="text/plain" data-language="json">
+{
+  "shop_id": "gid://shopify/Shop/1",
+  "shopify_domain": "{shop}.myshopify.com",
+  "step_reference": "122438de2e57d8bad7e50958d2bd4999ca2c4c35ee3b5120e85e42a17fc1ce93",
+  "handle": "my-extension-handle",
+  "locale":"en",
+  "properties": {
+    "customer_id": "gid://shopify/Customer/1234567",
+    "sms_message": "Thanks for making the purchase!",
+    "marketing_activity_id": "gid://shopify/MarketingActivity/1234567"
+  }
+}
+</script>
+
+</div>
+</p>
+
+
+The payload contains the following parameters:
+
+| Parameter              | Description |
+| ---------------------- | --- |
+| `shop_id`              | The ID of the store. |
+| `shopify_domain`       | The myshopify.com domain of the store. |
+| `handle`               | The extension’s handle. We recommend using this property to identify your actions. |
+| `step_reference`       | A unique ID for the step within a workflow. |
+| `locale`               | The locale of the store making the request, in ISO format. |
+| `properties`           | The fields that you selected as part of the action configuration.    |
+
+### Expected response
+
+```json
+{
+  "label_text": "Abandonment Email Template",
+  "text_preview": "We want you back. Enjoy a 15% discount on your next purchase.",
+  "button_text": "Edit Email",
+  "image_preview": {
+    "url": "http://someUrl.io/assets/preview_image.png",
+    "alt": "Abandonment Email Template Preview Image"
+  },
+  "last_updated_at": "2023-02-10T16:50:24.709Z"
+}
+
+```
+
+Other than `text_preview`, all fields are nullable.
+
+<table>
+  <caption></caption>
+  <thead>
+    <tr>
+      <th scope=“col”>Parameter</th>
+      <th scope=“col”>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td scope=“row”>1</td>
+      <td><code>label_text</code></td>
+      <td>A title for the custom configuration page.<br><br>If no value is specified, then the label text defaults to <b>Configuration Page Preview</b>.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>2</td>
+      <td><code>text_preview</code></td>
+      <td>A preview that indicates the resource that's tied to the step. For example, in the case of an email content editor, this might be a preview of the email text.<br><br>This field is required.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>3</td>
+      <td><code>button_text</code></td>
+      <td>The text for the button that the merchant clicks to access the custom configuration page.<br><br>If no value is specified, then the label text defaults to <b>Edit<b>.<br><br>If the value for `button_text` is longer than 23 characters, then the label is truncated to twenty characters with an ellipsis.</td>
+    </tr>
+    <tr>
+      <td scope=“row”></td>
+      <td><code>image_preview</code></td>
+      <td>The details of the image.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>4</td>
+      <td><code>image_preview.url</code></td>
+      <td>The URL for a preview image of the custom configuration page. The image should be between 500px and 600px wide, and 100KB or less. There is no maximum height.</td>
+    </tr>
+    <tr>
+      <td scope=“row”></td>
+      <td><code>image_preview.thumbnail_url</code></td>
+      <td>The URL for a thumbnail version of the preview image.<br><br>This image is not currently used in the user interface.</td>
+    </tr>
+    <tr>
+      <td scope=“row”></td>
+      <td><code>image_preview.alt</code></td>
+      <td>The alt text for the preview image. This text appears if your image fails to render, and is accessible to screen readers.</td>
+    </tr>
+    <tr>
+      <td scope=“row”>5</td>
+      <td><code>last_updated_at</code></td>
+      <td>The date and time that the resource was last updated, in <a href="https://en.wikipedia.org/wiki/ISO_8601">IS0-8601</a> format.</td>
+    </tr>
+  </tbody>
+</table>
+
+<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/flow/ccp-preview-annotated-379253a9b1eebe09194a0a0a0e5be1e2fd918fc977bdd1f78db60fa6f1e119c3.png" class="lazyload" alt="A labeled custom configuration page." width="901" height="675"></figure>
+
+
+## Custom validation
+
+An endpoint that validates the contents of merchant-configurable properties in an action payload when an action is saved. This endpoint is required if you want to use a custom configuration page.
+
+### Request
+
+The request contains a payload that matches the payload schema you configured for your action.
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="POST <Validation endpoint>"></script>
+
+<script type="text/plain" data-language="json">
+{
+  "shop_id": "gid://shopify/Shop/1",
+  "shopify_domain": "{shop}.myshopify.com",
+  "handle": "my-extension-handle",
+  "locale": "en",
+  "steps": [
+    {
+      "step_reference": "122438de2e57d8bad7e50958d2bd4999ca2c4c35ee3b5120e85e42a17fc1ce93",
+      "properties" : {
+        "outside_na": true,
+        "guest_no": 22,
+        "first_name": "John",
+        "customer_id": "customer.id"
+      }
+    },
+    {
+      "step_reference": "ca2c4c35ee3b5120e85e42a17fc1ce93122438de2e57d8bad7e50958d2bd4999",
+      "properties" : {
+        "outside_na": false,
+        "guest_no": 14,
+        "first_name": "Kim",
+        "customer_id": "customer.id"
+      }
+    },
+  ]
+}
+
+</script>
+
+</div>
+</p>
+
+
+The payload contains the following parameters:
+
+<table>
+  <caption></caption>
+  <thead>
+    <tr>
+      <th scope=“col”>Parameter</th>
+      <th scope=“col”>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td scope=“row”><code>shop_id</code></td>
+      <td>The ID of the store.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>shopify_domain</code></td>
+      <td>The myshopify.com domain of the store.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>handle</code></td>
+      <td>The extension’s handle. We recommend using this property to identify your actions.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>locale</code></td>
+      <td>The locale of the store, in ISO format.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>steps</code></td>
+      <td>An array of all of the steps to validate. Each child step object represents a separate action on the merchant’s workflow.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>steps.step_reference</code></td>
+      <td>The unique identifier for the step. This ID should be used when returning errors for a step.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>steps.properties</code></td>
+      <td>
+        <p>An object containing the properties specified on the action.</p>
+        <p><b>Merchant-configurable properties</b>: These properties are passed as strings, with the following exceptions:</p>
+        <ul>
+          <li>Checkbox properties: Boolean</li>
+          <li>Number properties: integer</li>
+        </ul>
+        <p><b>Shopify properties</b>:
+        The path to the value for the related commerce object in the workflow environment. For example, <code>customer.id</code>. If the value isn't available in the workflow environment, then an empty string is returned. The property will be populated with an actual value at runtime.</p>
+            <p><b>Example 1: Customer ID is available in the workflow environment</b></p>
+            <ul>
+              <li>Validation payload value: "customer.id"</li>
+              <li>Runtime value: "123456"</li>
+            </ul>
+            <p><b>Example 2: Customer ID isn't available in the workflow environment</b></p>
+            <ul>
+              <li>Validation payload value: ""</li>
+              <li>Runtime value: null</li>
+            </ul>
+        <p>If a property is marked as optional, then the workflow tool won't validate the presence of the commerce object, and will only rely on external validation. The path to the value for the commerce objects is still returned as a path, but Shopify can't guarantee their presence at runtime. If you need a commerce object to be present at runtime, then you should mark it as required. This allows the workflow tool to assess the presence of the commerce object and return any errors to the editor.</p>
+        <p><b>Example 3: Customer ID might be available in the workflow environment (for example, when using a custom trigger and an order step)</b></p>
+        <ul>
+          <li>Validation payload value: "customer.lastOrder.id"</li>
+          <li>Runtime value: "123456" OR null</li>
+        </ul>
+        
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Expected response
+
+Your app should return an array of the steps that you validated, which are identified by their `step_reference`. If there are any validation errors, then specify them in a `step_errors` array. The error messages that return display to the merchant in the action configuration pane in Shopify Flow.
+
+![An image of error messages in the action configuration pane.](/assets/apps/flow/validation-error.png)
+
+```yml
+[
+  {
+    step_reference: '122438de2e57d8bad7e50958d2bd4999ca2c4c35ee3b5120e85e42a17fc1ce93',
+    step_errors: [
+      {
+        message: 'A step level error occurred'
+      }
+     ],
+    properties_errors: [
+      {
+        id: 'guest_no',
+        message: 'Number of guests is limited to 8 when outside of North America'
+      }
+    ]
+  },
+  {
+    step_reference: 'ca2c4c35ee3b5120e85e42a17fc1ce93122438de2e57d8bad7e50958d2bd4999',
+    step_errors: [],
+    properties_errors: []
+  }
+]
+```
+
+<table>
+  <caption></caption>
+  <thead>
+    <tr>
+      <th scope=“col”>Parameter</th>
+      <th scope=“col”>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td scope=“row”><code>step_reference</code></td>
+      <td>The unique identifier for the step. This ID should be used when returning errors for a step.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>step_errors</code></td>
+      <td>An array of errors that apply to the entire step.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>step_errors.message</code></td>
+      <td>An error message to display at the top of the action configuration pane.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>properties_errors</code></td>
+      <td>An array of errors that apply to particular properties.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>properties_errors.id</code></td>
+      <td>The key of the property that contains the error.</td>
+    </tr>
+    <tr>
+      <td scope=“row”><code>properties_errors.message</code></td>
+      <td>An error message to display for the property.</td>
+    </tr>
+  </tbody>
+</table>
+
+
+## Verifying requests
+
+For security reasons, your web service should enforce a hash-based message authentication (HMAC) header verification that uses the client secret that you created when you configured your app.
+
+The name of the HMAC header is `x-shopify-hmac-sha256`. If you are using a Ruby-based web framework, then the name of the header is `http-x-shopify-hmac-sha256`.
+
+When the action runs in a workflow, the automation tool posts the contents (JSON payload and the HMAC header) of the action to the URL that you entered when you created the action in the Partner Dashboard. When your web server receives the POST request, it needs to verify the HMAC header against the JSON payload and your app's API secret. The HMAC verification works the same as [webhooks](/docs/apps/build/webhooks/subscribe/https).
+
+Your web server also needs to [verify that the `handle` that's sent in the payload matches the `handle` of the action that you created](#identify-actions).
+
+After you've verified the HMAC header, you can process the contents of the payload. For example, you could log the contents of the payload to your web server's console.
+

data/scraped/raw/flow_configure-complex-data-types.txt

@@ -0,0 +1,301 @@
+
+
+Triggers and actions can both provide data to Flow workflows. This data can be simple, such as a string or a number, or complex, such as an object or a list of objects. This guide explains how to define complex data types in your extension's TOML and how to send and receive complex data types at runtime.
+
+## Defining a return type schema
+
+To return data from an action or complex objects from a trigger, you must provide a schema for the return type using GraphQL's type system ([SDL](https://graphql.org/learn/schema/#type-language)). This schema is used by Flow to provide the return object in the workflow editor. The schema can be defined in any file and linked to from your extension's TOML definition. For example, a file called `schema.graphql` which contains the SDL for the types used in your action or trigger, can be made in the same directory as the extension.
+
+### SDL file
+
+When you're using complex types in Flow actions and triggers, consider the following:
+
+- Flow supports defining types using basic types (String, Int, Float, Boolean, and ID) as well as enums, objects, lists, and the non-nullable flag `!`.
+- Flow doesn't currently support the entire SDL spec when defining action return types. Unions, interfaces, custom scalars, and directives are currently not supported. The action HTTP payload doesn't utilize any arguments defined on types in this schema.
+- Flow derives the description of the return value from the comment on the type, which is placed in double quotes above the field. This description displays to merchants in the Flow editor when selecting the field.
+- The same schema file can be referenced by multiple extensions as long as the relative paths are defined correctly.
+
+The following SDL defines two types: a `Bid` and an `Auction` which contains a list of bids. The schema can contain multiple types that reference each other but only one type can be defined as the return type for the action. In the following example we're referencing the `Bid` type in the `Auction` type.
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="graphql">
+RAW_MD_CONTENT"Represents a bid placed on an auction"
+type Bid {
+  "ID of the bid"
+  id: ID!
+  "Customer that placed the bid"
+  customerId: ID!
+  "Amount of the bid"
+  amount: Float!
+}
+
+enum Status {
+  COMPLETE
+  IN_PROGRESS
+  CANCELLED
+}
+
+"Represents an auction"
+type Auction {
+  "ID of the auction"
+  id: ID!
+  "Name of the auction"
+  name: String
+  "Status of the auction"
+  status: Status!
+  "List of bids placed on the auction"
+  bids: [Bid!]!
+}
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+For more information on SDL, refer to the [GraphQL documentation](https://graphql.org/learn/schema/#type-language).
+
+### Folder structure
+
+```
+/my-extension-name
+  shopify.extensions.toml
+  schema.graphql
+```
+
+### `shopify.extension.toml` file
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash" data-title="toml">
+RAW_MD_CONTENT[[extensions]]
+name = "Place auction bid"
+type = "flow_action"
+handle = "auction-bid"
+description = "My description"
+runtime_url = "https://{url}.com/api/execute"
+schema = "./schema.graphql"
+return_type_ref = "Auction"
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+## Referencing the return type schema in an action extension's TOML
+
+After a schema file has been defined, it can be referenced in the action extension's TOML by setting `extensions.schema` to the relative path of the schema file, and `extension.return_type_ref` to a type defined in the referenced schema file. The schema defined above can be referenced by setting the following fields:
+
+| Property Name       | Property value  |
+| ------------------- | --------------- |
+| `extensions.schema`   | ./schema.graphql |
+| `extensions.return_type_ref` | Auction |
+
+## Referencing the return type schema in a trigger extension's TOML
+
+After a schema file has been defined, it can be referenced in the trigger extension's TOML by setting `extensions.schema` to the relative path of the schema file, and setting the type of a field to `schema.<type>`. The schema defined above can be referenced by setting the following fields:
+
+| Property Name       | Property value  |
+| ------------------- | --------------- |
+| `extensions.schema`   | ./schema.graphql |
+| `extensions.settings.fields[0].type` | schema.Auction |
+
+## Returning data from an action at runtime
+
+When responding to an action request from Flow you can add the return type in the JSON response as a field called `return_value`. The `return_value` object must match the return type defined in the extension. The return type used in our [example](#shopify-extension-toml-file) must be an auction object, like the following:
+
+```json
+{
+  "return_value": {
+    "id": "auction1",
+    "name": "My first auction",
+    "status": "COMPLETE",
+    "bids": [
+      {
+        "id": "bid1",
+        "customerId": "gid://shopify/Customer/1",
+        "amount": 100.00
+      },
+      {
+        "id": "bid2",
+        "customerId": "gid://shopify/Customer/2",
+        "amount": 103.11
+      }
+    ]
+  }
+}
+```
+
+If a workflow is using a non-nullable field that's defined in the extension `schema` but is missing from the payload or there's a type mismatch between fields, then the action transiently fails.
+
+The response size of the action must also be less than `50KB` exceeding this limit will also result in a transient failure. Actions that transiently fail will be retried at increasing intervals for up to 24 hours.
+
+## Sending complex objects in a trigger at runtime
+
+When you execute the [`flowTriggerReceive`](/docs/apps/build/flow/triggers/create#step-4-test-your-trigger) mutation with one or more complex object fields, the payload must include a JSON representation of the complex object(s) matching the schema. For example, if the trigger has a field with key `Winning Bid` of type `Bid`, then the payload should include the following structure:
+
+```json
+"payload": {
+  "Winning Bid": {
+    "id": "bid1",
+    "customerId": "gid://shopify/Customer/1",
+    "amount": 100.00
+  }
+}
+```

data/scraped/raw/flow_migrate-legacy-extensions.txt

@@ -0,0 +1,76 @@
+
+
+If you have existing Flow extensions that were created through the Partner Dashboard, then you can import these extensions into your codebase. After you deploy the extensions that you’ve imported into Shopify CLI, Shopify CLI manages those extensions going forward.
+
+> Note:
+> Extensions that are migrated to Shopify CLI use the `handle` properties. The `handle` property is a unique string that identifies your extension and that's used when interacting with the Shopify Flow API. For more information, refer to the [triggers](/docs/apps/build/flow/triggers/create#step-4-test-your-trigger) and [actions](/docs/apps/build/flow/actions/endpoints#request) runtime payloads.
+
+A `handle` property is created in the extension's TOML configuration file after running the import command. Note that you can't change the `handle` property of the extensions that are present in your app's codebase after you've run the `dev` or `deploy` commands.
+
+### Requirements
+
+- Create a [Partner account](https://www.shopify.com/partners).
+- [Scaffold an app that uses Shopify CLI v3.70.0 or higher](/docs/apps/build/scaffold-app), or [migrate your existing app](/docs/apps/build/cli-for-apps/migrate-to-latest-cli) so it's compatible with Shopify CLI v3.70.0 or higher.
+- [Migrate a Partner Dashboard-managed app](/docs/apps/build/cli-for-apps/migrate-from-dashboard).
+<br>
+
+
+## Step 1: Import your Flow task extension locally
+
+> Note:
+> The command in this procedure only generates the local file representation of your Partner Dashboard extensions. Running the `deploy` command migrates your extensions to CLI managed-extensions. You can only import extensions that have versions. The published version is imported, if one exists. Otherwise, the latest version is imported.
+
+1. Navigate to your app directory.
+1. To start importing your Flow extension, run the following command:
+
+```bash
+#!/bin/bash
+shopify app import-extensions
+```
+
+1. Select the `Flow Extensions` option.
+1. Select an extension from the list of extensions that are available to import.
+
+After you’ve selected the extension to import, Shopify CLI automatically generates the file representation in your application’s `/extensions` directory and displays a success message.
+
+You can then go into your application’s `/extensions` directory and start editing your extension. The file structure of your extension should look like the following:
+
+```text
+/my-flow-extension
+  shopify.extension.toml
+```
+
+To learn more about the extensions file structure, refer to [App structure](/docs/apps/build/cli-for-apps/app-structure) and the documentation for your extension type.
+
+### Available Flags
+
+#### `client_id`
+
+An application’s `client_id`. The ID enables you to target a specific application when running the import command.
+
+```bash
+#!/bin/bash
+shopify app import-extensions --client_id abc123
+```
+
+## Step 2: Migrate your extension
+
+After you've imported the extension, you can migrate your extension by using Shopify CLI's `deploy` command.
+
+> Note:
+> Deploying extensions using the `app deploy` command also publishes the extensions. We recommend testing changes by using [`app dev`](/docs/api/shopify-cli/app/app-dev) or deploying to a test app before deploying them to a production app.
+
+Use Shopify CLI to deploy your extensions:
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the prompts.
+
+When you receive confirmation that the deploy was successful, your extensions have been released.
+

data/scraped/raw/flow_templates.txt

@@ -0,0 +1,12 @@
+
+
+## How templates work
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  [create a template](/docs/apps/build/flow/templates/create-a-template)  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+
+![Flow template library](/assets/apps/flow/flow-template-library.png)
+
+## Next steps
+- Follow our step by step guide on [creating a Flow template](/docs/apps/build/flow/templates/create-a-template).
+- Learn more about how localize your template, the approval process, and more in the [reference resource](/docs/apps/build/flow/templates/reference#approval-process)

data/scraped/raw/flow_templates_create-a-template.txt

@@ -0,0 +1,209 @@
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  create a template  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+
+To create a workflow template that merchants can add to their workflow list, you need to add a Flow template extension to your app.
+
+## Requirements
+
+- A [development store](/docs/api/development-stores) that has [Shopify Flow](https://apps.shopify.com/flow) and your app installed.
+- Your existing custom triggers and actions are connected to your instance of Shopify Flow.
+- [Shopify CLI](/docs/apps/build/cli-for-apps) installed with a version of `3.49` or higher.
+
+## Step 1: Create a workflow
+
+A workflow is the foundation of a Flow template.
+
+1. In your development store navigate to **Apps** > **Flow**.
+2. Click **Create workflow**.
+3. In the workflow editor, build a workflow that solves a merchant use case and showcases your custom trigger and or actions.
+4. Optional: Tailor your template to a wider audience by [localizing your custom step descriptions](/docs/apps/build/flow/templates/reference#step-descriptions).
+5. After you're satisfied with your workflow, [export the workflow](https://help.shopify.com/en/manual/shopify-flow/manage#export-a-workflow) and save the `.flow` file locally.
+
+> Note:
+> - Remove any shop specific test data or replace with placeholder values if the merchant needs to provide a value. For example using the placeholder `YOUR_TAG_NAME` in a location where the merchant needs to provide a shop specific tag.<br />
+> - Don't edit `.flow` files directly. Only make changes within the Flow app and export the updated workflow.<br />
+> - Test your workflow thoroughly, ensuring the trigger, condition(s), and action(s) used provide the intended result.
+
+## Step 2: Create a Flow template extension
+
+Use the Shopify CLI to generate a new extension:
+
+1. Navigate to your app directory.
+2. Run the following command:
+
+<p>
+<div class="react-code-block" data-preset="terminal">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash">
+RAW_MD_CONTENT#!/bin/bash
+shopify app generate extension
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+3. Select the `Flow Template` as the type of extension.
+4. Provide a meaningful name for your extension.
+<br>
+
+
+The name that you provide displays in the Partners Dashboard. Follow these guidelines when choosing a name:
+
+- Don't use punctuation.
+- Separate words using spaces.
+
+After you've followed the prompts, Shopify CLI generates the extension’s file representation in your app's `/extensions` directory and returns a success message. You can then go into your app's `/extensions` directory and start editing your new extension.
+
+> Note:
+> Each Flow template extension can contain only a single template. To deploy multiple templates, you will need to create an extension for each template.
+
+The file structure of your extension should look like the following:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="nocopy" data-value="true"></script>
+
+<script type="text/plain" data-language="ssh">
+RAW_MD_CONTENT/your-extension-name
+  /locales
+    en.default.json
+    fr.json
+  shopify.extension.toml
+  template.flow
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+To learn more about the extensions file structure, refer to our [app structure](/docs/apps/build/cli-for-apps/app-structure) documentation and the [documentation](/docs/apps/build/flow/templates/reference) for the Flow template extension type.
+
+## Step 3: Configure extension
+Configure your template extension to include information describing it's function for merchants, and settings that control visibility.
+
+1. Update the [shopify.extension.toml configuration file](/docs/apps/build/flow/templates/reference#toml).
+2. Update and add any additional locales. [Localization reference](/docs/apps/build/flow/templates/reference#localization).
+3. Replace `template.flow` with the workflow [that you exported](/docs/apps/build/flow/templates/create-a-template#step-1-create-a-workflow).
+4. Be sure to update the filename to match your chosen file path in the `shopify.extension.toml` file. `template.flow` is the default.
+
+## Step 4: Preview extension
+
+Preview your template extension to see how it will be displayed to merchants before deploying and requesting review.
+
+1. Run the following command in Shopify CLI:
+
+<p>
+<div class="react-code-block" data-preset="terminal">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash">
+RAW_MD_CONTENT#!/bin/bash
+shopify app dev
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+2. In your development store's Shopify admin, navigate to [`/flow/editor/templates/dev`](https://admin.shopify.com/apps/flow/editor/templates/dev). From here you can preview your workflow, template card, and custom step descriptions.
+3. Refer to our [approval criteria](/docs/apps/build/flow/templates/reference#approval-process) to ensure that your extension meets our requirements.
+
+## Step 5: Deploy extension
+
+Use Shopify CLI to deploy your extension.
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+<p>
+<div class="react-code-block" data-preset="terminal">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash">
+RAW_MD_CONTENT#!/bin/bash
+shopify app deploy
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+3. Follow the command prompts
+
+When you receive confirmation that the deploy was successful, a new app version in your Partner Dashboard displays, where you can submit a request for review. After the request for review has been submitted and the [approval process](/docs/apps/build/flow/templates/reference#approval-process) is complete, you can release the new version from your Partner Dashboard and your templates will display in Flow's template library.

data/scraped/raw/flow_templates_reference.txt

@@ -0,0 +1,286 @@
+
+
+This guide provides explanations of key topics for building and deploying a Flow template extension. This includes the TOML configuration file, localization, and the template approval process.
+
+## TOML
+
+When you first create a new Flow template extensions through Shopify CLI, you get a basic version of the `shopify.extension.toml` file structure that looks like the following example:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="shopify.extension.toml"></script>
+
+<script type="text/plain" data-language="toml">
+[[extensions]]
+name = "t:name"
+type = "flow_template"
+handle = "example-name"
+description = "t:description"
+
+[extensions.template]
+
+categories = ["orders", "risk"]
+
+module = "./template.flow"
+
+require_app = false
+
+discoverable = true
+
+enabled = true
+</script>
+
+</div>
+</p>
+
+
+### Flow template extension fields
+
+| Property | Description                                                                     | Rules             |
+| ------------- | ---------------------------------------------------------------------------------- | ----------------- |
+| `name` <br><span class="heading-flag">Required</span> | The title  of the template. This property is translatable and will use the value for the key `name` in the translation files.  | |
+| `type` <br><span class="heading-flag">Required</span> | The type of your extension. This should always be set to `flow_template` for Flow templates.| - Value must be `flow_template`. |
+| `handle` <br><span class="heading-flag">Required</span> | A globally-unique identifier for your extension. This property can't be changed after you’ve run the [`app dev`](/docs/api/shopify-cli/app/app-dev) or [`deploy`](/docs/api/shopify-cli/app/app-deploy) command. | - Can't exceed 30 characters.<br /> - Must only contain alphanumeric characters and hyphens. |
+| `description` <br><span class="heading-flag">Optional</span> | The description of your template's workflow. This property is translatable and will use the value for the key `description` in the translation files. | |
+| `categories` <br><span class="heading-flag">Required</span> | The categories that best describe the function of your template. | - Must be an array containing only strings of valid categories. <br /> - Must choose at least one category. Max 2 recommended. <br /> - Valid categories are: `buyer_experience`, `customers`, `inventory_and_merch`, `loyalty`, `orders`, `promotions`, `risk`, `fulfillment`, `b2b`, `payment_reminders`, `custom_data`, and `error_monitoring`. |
+| `module`  <br><span class="heading-flag">Required</span> | The file path of the template workflow in the extension's folder. |
+| `require_app` <br><span class="heading-flag">Optional</span> | Whether your template is visible only to merchants who have your app installed. | - Defaults to `false`. |
+| `discoverable` <br><span class="heading-flag">Optional</span> | Whether your template should be displayed in the template browser. When `false`, the template is accessible only through a deep link. | - Defaults to `true`. |
+| `enabled` <br><span class="heading-flag">Optional</span> | Whether you template should be published and made available after being approved. | - Defaults to `true`.
+
+
+## Localization
+
+Localizing your template by providing translated text allows a wider audience to understand your template better and can increase adoption.
+
+You can provide translations for the following fields:
+
+- **`name`**: Title of the template.
+- **`description`**: Description of the template and it's purpose.
+- **`preInstallNote`**: (Optional): Instructions for merchants to complete before activating the workflow. This field should only be included if setup is required before the template can be turned on.
+- [Custom step descriptions](#step-descriptions) added within the workflow.
+
+### Adding additional locales
+
+Add new `.json` files prefixed with the locale, for example `es.json`.
+
+Add `default` to one of the locales to make it the fallback if a merchant's locale isn't in the locales you have provided. Example: `en.default.json`.
+
+### Step descriptions
+
+You can provide translated custom step descriptions by adding a translation key wrapped by curly braces in the step description field. For example, `{expressShippingCondition}`. Ensure there's no other characters before or after `{yourKey}`. After adding this to your workflow, you can update the translation files to include the step description.
+
+The following is an example:
+
+![How to format localized step descriptions in the Flow editor](/assets/apps/flow/localized_step_descriptions_in_flow_editor.png)
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+<script data-option="filename" data-value="en.default.json"></script>
+
+<script type="text/plain" data-language="json">
+{
+  "name": "My Awesome Template!",
+  "description": "A template that helps increase merchant productivity",
+  "preInstallNote": "You must disable automatic payment capture in the Shopify Admin before using this template",
+  "expressShippingCondition": "This step will check if the order uses express shipping"
+}
+</script>
+
+</div>
+</p>
+
+
+## Approval process
+
+Before submitting your template extension for approval ensure that it meets the following criteria:
+
+### Workflow
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-1">
+<label class="marketing-checkbox-label" for="template-criteria-1">
+  <p style="margin-left:30px">Provides value/solves a problem. For example, notifying the merchant when a buyer makes 10 purchases and adds a `VIP` tag to the customer.</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-2">
+<label class="marketing-checkbox-label" for="template-criteria-2">
+  <p style="margin-left:30px">Does not already exist within the [template library](https://admin.shopify.com/apps/flow/web/editor/templates).</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-3">
+<label class="marketing-checkbox-label" for="template-criteria-3">
+  <p style="margin-left:30px">Isn't malicious in its execution.</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-4">
+<label class="marketing-checkbox-label" for="template-criteria-4">
+  <p style="margin-left:30px">Is complete in its configuration. Validation errors might exist in the workflow where fields are left blank for input unique to the merchant.</p>
+</label>
+
+### TOML
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-5">
+<label class="marketing-checkbox-label" for="template-criteria-5">
+  <p style="margin-left:30px">Titles should use the format, "\<Description of key action\> when \<description of trigger\>".</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-6">
+<label class="marketing-checkbox-label" for="template-criteria-6">
+  <p style="margin-left:30px">Includes all required fields.</p>
+</label>
+
+### Localization
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-7">
+<label class="marketing-checkbox-label" for="template-criteria-7">
+  <p style="margin-left:30px">Has correct spelling and grammar.</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-8">
+<label class="marketing-checkbox-label" for="template-criteria-8">
+  <p style="margin-left:30px">Has a default localization, for example <code>en.default.json</code>.</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-9">
+<label class="marketing-checkbox-label" for="template-criteria-9">
+  <p style="margin-left:30px">Has an English translation.</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-10">
+<label class="marketing-checkbox-label" for="template-criteria-10">
+  <p style="margin-left:30px">Include the <code>preInstallNote</code> field if setup is required before the template can be turned on. If no prior setup is needed, then remove the <code>preInstallNote</code> field from the localization files before submitting the template extension.</p>
+</label>
+
+### Access
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-11">
+<label class="marketing-checkbox-label" for="template-criteria-11">
+  <p style="margin-left:30px">Flow’s testing account, at flow-connector-testing.myshopify.com has access to any actions, triggers, or resources that are required to test the templates, including access to the app.</p>
+</label>
+
+### Limitations
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-12">
+<label class="marketing-checkbox-label" for="template-criteria-12">
+  <p style="margin-left:30px">A maximum of 25 templates can be submitted for each app.</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-13">
+<label class="marketing-checkbox-label" for="template-criteria-13">
+  <p style="margin-left:30px">Public apps must be listed in the [Shopify App Store](https://apps.shopify.com/) prior to submitting a template.</p>
+</label>
+
+<input class="marketing-checkbox" type="checkbox" id="template-criteria-14">
+<label class="marketing-checkbox-label" for="template-criteria-14">
+  <p style="margin-left:30px">Don't edit the `.flow` file directly. Only change and export updated workflows using the Flow app.</p>
+</label>
+
+### Submitting your extension for approval
+
+After you're satisfied with your template extension, [`deploy`](/docs/api/shopify-cli/app/app-deploy) a new app version from Shopify CLI. The Flow team will review your templates within three business days. Template reviews don't block your app version from releasing, but template changes won't be reflected until the approval process is complete. If we require changes, then we'll reject the review and follow up through email with feedback.

data/scraped/raw/flow_track-lifecycle-events.txt

@@ -0,0 +1,120 @@
+
+
+This guide explains how to configure your app to receive trigger lifecycle callbacks from Shopify Flow.
+
+When [creating a trigger](/docs/apps/build/flow/triggers/create), configuring a lifecycle callback enables your app to receive notifications from Shopify Flow about stores using the trigger and communicate changes in workflow status (e.g., enabling or disabling a workflow) back to the app. This helps optimize app performance by ensuring that trigger-related operations are only performed for stores that actually need them.
+
+Apps must be properly configured to respond to trigger lifecycle callbacks. When a merchant attempts to enable a workflow that uses the trigger, Shopify Flow sends a lifecycle callback to the app's web server. If it doesn't promptly receive a response or receives a response with an HTTP status code that isn't `2xx`, then the merchant can't enable the workflow and make use of the trigger.
+
+> Note:
+> Legacy trigger discovery webhook extensions created using the Partner Dashboard are deprecated and must [migrate to the CLI](docs/apps/build/flow/migrate-legacy-extensions) before they can be edited.
+
+## How trigger lifecycle callbacks work
+
+Trigger lifecycle callbacks contain identifying information about the trigger and the store using it and indicate whether the trigger is being used. You can use this information to track the stores that are currently using your triggers and then send trigger requests to only those stores.
+
+### Properties
+
+The trigger lifecycle callback (HTTP POST request) is formatted in JSON and it contains the following properties:
+
+<table>
+  <tr>
+    <th>Property</th>
+    <th>Data type</th>
+    <th width="40%">Description</th>
+    <th>Example</th>
+  </tr>
+  <tr>
+    <td><code>flow_trigger_definition_id</code></td>
+    <td>String</td>
+    <td>The unique identifier for your Shopify Flow trigger.</td>
+    <td>Add row to spreadsheet</td>
+  </tr>
+  <tr>
+    <td><code>has_enabled_flow</code></td>
+    <td>Boolean</td>
+    <td>Whether the store has an enabled workflow that uses your trigger. Valid values:
+      <ul>
+        <li><code>true</code>: There is at least one workflow that is enabled and that uses your trigger.</li>
+        <li><code>false</code>: There are no enabled workflows that use your trigger.</li>
+      </ul>
+    </td>
+    <td>true</td>
+  </tr>
+  <tr>
+    <td><code>shop_id</code></td>
+    <td>Number</td>
+    <td>The unique identifier for the Shopify store.</td>
+    <td>690933842</td>
+  </tr>
+  <tr>
+    <td><code>shopify_domain</code></td>
+    <td>String</td>
+    <td>The myshopify domain of the Shopify store.</td>
+    <td>johnsapparel.myshopify.com</td>
+  </tr>
+  <tr>
+    <td><code>timestamp</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> date and timestamp</td>
+    <td>
+      <p>The time when the notification was created. Notifications with newer timestamps should take precedence. If you already have a timestamp in your datastore and you receive a newer timestamp, then overwrite this payload's information in your datastore. Conversely, if you receive a timestamp that is older than the information in your datastore, then ignore this payload.</p>
+    </td>
+    <td>2019-01-25T16:44:10.999Z</td>
+  </tr>
+</table>
+
+The following is an example body of a usage notification (HTTP POST) request:
+
+```json
+{
+  "flow_trigger_definition_id": "Add row to spreadsheet",
+  "has_enabled_flow": false,
+  "shop_id": "690933842",
+  "shopify_domain": "johnapparel.myshopify.com",
+  "timestamp": "2019-01-25T16:44:10.999Z"
+}
+```
+
+### Callback events
+
+Shopify Flow sends trigger lifecycle callbacks when the following events occur:
+
+- When a merchant activates a workflow that uses your trigger, the callback contains `"has_enabled_flow": true`.
+- When a merchant deactivates a workflow that uses your trigger, the callback contains `"has_enabled_flow": false`.
+
+### Web server response time and status codes
+
+When a merchant tries to enable a workflow that uses your trigger, Shopify Flow sends a trigger lifecycle callback to your web server. If your web server doesn't respond within five seconds, or if it responds with a different status code, then the merchant can't enable that workflow. The merchant receives a notification in the Shopify Flow app that tells them to try enabling the workflow at a later time.
+
+## 1. Configure your web server
+
+To begin, configure your web server to listen for Shopify Flow callbacks.
+
+1. Configure a URL in your web server to listen for the trigger lifecycle callbacks from Shopify Flow.
+2. Configure your web server to verify the HMAC header in the trigger lifecycle callback with your client secret.
+
+    The HMAC header is located in the following HTTP header: `x-shopify-hmac-sha256`. If you are using a Ruby-based web framework, then the header is `http-x-shopify-hmac-sha256`.
+
+3. Configure your web server to respond within 5 seconds when it receives a trigger lifecycle callback.
+
+## 2. Process and store callback data
+
+After you've added support to listen for Shopify Flow callbacks, you can configure your web server to process and store the callback data.
+
+1. Save the list of stores that are using your triggers in a persistent datastore. Use the <code>timestamp</code> property to make sure that you don't overwrite an existing entry with older information.
+2. Edit your application to send your triggers only to stores that are using your triggers.
+
+## 3. Configure the callback
+
+Finally, configure the callback in the CLI:
+
+1. Run `shopify app generate extension`.
+2. Select `Flow trigger lifecycle callback`.
+3. Change the URL in the generated TOML to the URL configured on the web server.
+4. Run `shopify app deploy`.
+
+## Next steps
+
+- Familiarize yourself with [Shopify Flow](/docs/apps/build/flow) and learn about building connectors.
+- Connect your app to Shopify Flow so that events that occur in your app can [trigger workflows](/docs/apps/build/flow/triggers).
+- Connect your app to Shopify Flow so that your app receives data and information when a [workflow action](/docs/apps/build/flow/actions) runs.

data/scraped/raw/flow_triggers.txt

@@ -0,0 +1,12 @@
+
+
+## How triggers work
+
+A trigger is a task in Shopify Flow that starts the execution of a workflow. The trigger represents an event that happens in a store or in an app. You can [build a trigger](/docs/apps/build/flow/triggers/create) for Shopify Flow so that events in your app trigger workflows to run.
+
+![A diagram that show how third party triggers interface with Flow ](/assets/apps/flow/trigger_diagram.png)
+
+## Next steps
+
+- To build a trigger, you need to [create a trigger extension](/docs/apps/build/flow/triggers/create) in your app. In that extension, you specify details about the trigger using a [TOML file](/docs/apps/build/flow/triggers/reference).
+- Once you have published your extension, you can then test or use it by [calling the Shopify API](/docs/apps/build/flow/triggers/reference#mutation-api-reference) with the trigger payload.

data/scraped/raw/flow_triggers_create.txt

@@ -0,0 +1,272 @@
+
+
+## Requirements
+
+Make sure that you have the following:
+
+- A test web server that you can use to send information to Shopify Flow. You can use an existing web server. This web server needs to be able to send POST requests to Shopify's [GraphQL Admin API](/docs/api/admin-graphql).
+- A test app that works with the test web server and can send HTTP requests.
+- A development store that has [Shopify Flow](https://apps.shopify.com/flow) and the test app installed.
+- Your application has access to the `read_customers` scope. The trigger you will build using this tutorial will be using a customer reference which requires that scope.
+
+## Step 1: Create a Flow trigger extension
+
+To give your Flow action a meaningful name, use the following guidelines:
+
+- Use an object acted on + past tense verb format. For example, `Auction bid placed`.
+- Use sentence case.
+- Don't use punctuation.
+- Separate words using spaces.
+
+### Using Shopify CLI
+
+The following steps show how to create a trigger that sends bid information to Shopify Flow when a bid is placed on an auction.
+
+Use the Shopify CLI to generate a new extension:
+
+1. Navigate to your app directory.
+2. Run the following command:
+
+<p>
+<div class="react-code-block" data-preset="terminal">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash">
+RAW_MD_CONTENT#!/bin/bash
+shopify app generate extension
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+3. Select the `Flow Trigger` as the type of extension.
+4. Provide a meaningful name for your extension.
+<br>
+
+
+After you've followed the prompts, Shopify CLI generates the extension’s file representation in your app's `/extensions` directory and gives you a success message. You can then go into your app's `/extensions` directory and start editing your new extension.
+
+The file structure of your extension should look like the following:
+
+```
+/auction-bid-placed
+  shopify.extension.toml
+```
+
+To learn more about the extensions file structure, refer to [App structure](/docs/apps/build/cli-for-apps/app-structure) and the documentation for your extension type.
+
+### Using the Partner Dashboard
+
+1. Open your [Partner Dashboard](https://partners.shopify.com).
+2. Click the app that you want to add your Shopify Flow trigger to.
+3. Click **Extensions**, then click **Create** or **Create extension**.
+4. Under **Flow**, click the **Flow/Triggers** card.
+5. Enter an internal extension name for your trigger and click **Save**.
+6. Enter a title and description for the trigger that will be shown to merchants.
+7. Copy the GraphQL endpoint that displays under the **Trigger description** field to a text file. Your app uses this endpoint to send your POST request to Shopify Flow. The endpoint follows the format `https://{shop}.myshopify.com/admin/api/latest/graphql.json`.
+8. In the **Request body properties** section, click **Add property**, choose a data type, and create the properties that display in Shopify Flow when a merchant chooses your trigger.
+
+## Step 2: Customize a Flow trigger configuration file
+
+The following procedure requires you to have generated a flow extension using Shopify CLI. In this section you'll use the default trigger template and update it to be a functional extension example.
+
+1. Change description to `Trigger for auction bids.`
+2. On the second `[[settings.fields]]` field, update:
+  - `type` to `number_decimal`
+  - `key` to `Amount`
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash" data-title="toml">
+RAW_MD_CONTENT[[extensions]]
+name = "Auction Bid Placed"
+type = "flow_trigger"
+handle = "auction-bid-placed"
+description = "Trigger for auction bids."
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+
+  [[settings.fields]]
+  type = "number_decimal"
+  key = "Amount"
+END_RAW_MD_CONTENT</script>
+
+</div>
+</p>
+
+
+## Step 3: Enable the draft version of your trigger
+
+Running [`app dev`](/docs/api/shopify-cli/app/app-dev) allows changes made to local files to update the draft version of your Flow task extensions. The draft version is only available in your development store.
+
+> Note:
+> When [`app dev`](/docs/api/shopify-cli/app/app-dev) is running and "Development store preview" is enabled, the draft version of a task will appear in your development store _in place_ of the deployed version. Other shops will continue to see the deployed version of your task (if one exists). Draft versions can be identified by the "draft" badge. To see the deployed version of the task in your development store, turn off "Development store preview" in the "Extensions" section of your app in [Shopify Partners](https://partners.shopify.com/).
+
+1. Navigate to your app directory.
+2. Run the following command to start using draft versions of your extension(s):
+
+```bash
+#!/bin/bash
+shopify app dev
+```
+
+3. Follow the prompts.
+
+
+## Step 4: Test your trigger
+
+After the [`app dev`](/docs/api/shopify-cli/app/app-dev) command has started, you can test the draft version of your trigger in Shopify Flow.
+
+1. In your development store, create a [workflow](https://www.shopify.com/admin/apps/flow) that uses the trigger that you created for your app.
+
+2. Using the Admin GraphQL API, send a `flowTriggerReceive` mutation with the following arguments:
+
+- The `handle` of the trigger
+- The `payload` of the trigger containing the fields defined in the extension TOML
+  - The size of the payload (keys included) must be under 50 KB. If the size of the properties body exceeds the limit, then Shopify responds to the GraphQL request with a validation error reading `Properties size exceeds the limit of 50000 bytes`. As a result, workflows with the specified trigger won't start from this request.
+
+The following is an example of a `flowTriggerReceive` mutation:
+
+```graphql
+mutation
+{
+  flowTriggerReceive(
+    handle: "auction-bid-placed",
+    payload: {
+      "Amount": "30",
+      "customer_id": 12345
+  })
+  {
+    userErrors {field, message}
+  }
+}
+```
+
+> [Learn how to authenticate your GraphQL Admin API requests](/docs/api/admin-graphql#authentication).
+
+The following example shows the same mutation sent in a curl request:
+
+```curl
+curl --location 'https://{shop_domain}.myshopify.com/admin/api/latest/graphql.json' \
+--header 'X-Shopify-Access-Token: {access_token}' \
+--header 'Content-Type: application/json' \
+--data '{
+  "query": "mutation flowTriggerReceive($handle: String, $payload: JSON) { flowTriggerReceive(handle: $handle, payload: $payload) { userErrors { message field } } }",
+  "variables": {
+    "handle": "auction-bid-placed",
+    "payload": {
+      "customer_id": {customer_id},
+      "Amount": 30
+    }
+  }
+}'
+```
+
+## Step 5: Deploy your extension
+
+> Note:
+> Deploying extensions using the `app deploy` command also publishes the extensions. We recommend testing changes by using [`app dev`](/docs/api/shopify-cli/app/app-dev) or deploying to a test app before deploying them to a production app.
+
+Use Shopify CLI to deploy your extensions:
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the prompts.
+
+When you receive confirmation that the deploy was successful, your extensions have been released.
+
+
+## Next steps
+
+- Familiarize yourself with [Shopify Flow](/docs/apps/build/flow) and learn about building connectors.
+- Connect your app to Shopify Flow so that your app receives data and information when a [workflow action](/docs/apps/build/flow/actions) runs.
+- Learn how to receive [lifecycle events from Shopify Flow](/docs/apps/build/flow/track-lifecycle-events) about the stores that are using your triggers in enabled workflows.
+- Learn how to use [complex data types](/docs/apps/build/flow/configure-complex-data-types) in your Shopify Flow trigger.

data/scraped/raw/flow_triggers_reference.txt

@@ -0,0 +1,310 @@
+
+
+When you create a new trigger extension using Shopify CLI, a basic version of the TOML configuration file structure is generated. In this guide, you'll learn about configuring the different sections and properties of the configuration file, including extension properties, extension fields, reference field types, custom field types, and more.
+
+This guide will also inform you how to make HTTP requests to Flow to start the workflows in which your extension is the trigger.
+
+## TOML
+
+> Note:
+> Creating Flow extensions using Shopify CLI is an exciting new feature that is currently in development. As with any developing feature, it's important to note that the Flow's CLI capabilities will continue to evolve and improve over time. Developers can expect additional functionality, enhancements, and improvements to be added as development progresses.
+>
+>To create Flow extensions using [Shopify CLI](https://www.npmjs.com/package/@shopify/cli), ensure you have the latest version installed.
+
+
+When you create a new trigger extension using Shopify CLI, you'll get a basic version of the TOML configuration file structure which should look like the following example:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash" data-title="toml">
+[[extensions]]
+name = "Auction Bid"
+type = "flow_trigger"
+handle = "auction-bid"
+description = "Your description"
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+
+  [[settings.fields]]
+  type = "single_line_text_field"
+  key = "your field key"
+</script>
+
+</div>
+</p>
+
+
+### Trigger extension properties
+
+Extension properties are listed in the `[[extensions]]` section and enable you to define the interface between Flow and your event.
+
+| Property name               | Description                                                | Rules                                  |
+| --------------------------- | ------------------------------------------------------------- | -------------------------------------- |
+| `name` <br><span class="heading-flag">Required</span> | Name of your extension. Will be the merchant-facing name of your task in the editor. This should be something that is human readable. | |
+| `type` <br><span class="heading-flag">Required</span> | The type of your extension. This should always be set to “flow_trigger” for Flow triggers.          | - Value must be `flow_trigger`.
+| `handle` <br><span class="heading-flag">Required</span> | A unique identifier for your extension. This property cannot be changed once you’ve run the `dev` or `deploy` command. | - Cannot exceed 30 characters.<br /> - Must be unique across your app's extensions. <br /> - Must only contain alphanumeric characters and hyphens. |
+| `description` <br><span class="heading-flag">Optional</span> | A description of your extension. This description will be shown in the Flow editor navigation panel. | |
+
+### Trigger extension fields
+
+Trigger extension fields are listed in the `[settings]` section, with each field using a `[[settings.field]]` header. These fields define the payload your event will send to Flow. You can add more than one field to your Flow trigger. The order of the fields in the TOML file is preserved when they're being rendered in the editor configuration panel. When sending a trigger payload, all fields defined in a trigger are required.
+
+| Property name                  | Description                                                                                                                                                    | Rules |
+| ------------------------------ | --------------------------------------------------------------------------------------------------- | --------------------------------|
+| `type` <br><span class="heading-flag">Required</span> | The field type. | - [Accepted custom field types](#custom-field-types).<br> - [Accepted reference field types](#reference-field-types).  |
+| `key` <br><span class="heading-flag">Optional</span> | A unique key that identifies your field. This should be human readable since it will appear in the Flow editor in the environment picker menu.                   | - Required for custom field types. <br />  Should only contain alphabetic values or spaces. <br /> - This property is not valid for reference field types. |
+| `description` <br><span class="heading-flag">Required</span> | A description of the field. This will appear in the Flow editor configuration panel. |
+
+### Supported field types
+
+When you create a trigger, you add the fields that your trigger sends to Shopify Flow in the `[settings]` section of the TOML file. These fields define what your event plans to send to Shopify Flow. Merchants can then use that data in their conditions and actions.
+
+You can add two types of fields: custom fields or predefined reference fields.
+
+![A diagram that shows how trigger properties are rendered in the Flow editor](/assets/apps/flow/trigger_properties_in_flow_editor.png)
+
+### Reference field types
+
+A reference field lets you send the identifier of a Shopify resource to Shopify Flow. This allows merchants to build workflows that use any data related to that resource.
+
+For example, your trigger sends a customer ID to Shopify Flow. The merchant can create a condition that checks `customer / amountSpent` and `customer / tags`. In their action, the merchant can include the template variables for customers, such as `{{customer.email}}`.
+
+To specify that a trigger will include a reference field, you only need to specify the `type` and an optional `description` property. For example:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash" data-title="toml">
+...
+
+[settings]
+
+  [[settings.fields]]
+  type = "customer_reference"
+</script>
+
+</div>
+</p>
+
+
+You can use the following reference fields:
+
+| Reference type (TOML) | Payload key |  Description |
+| --- | --- | --- |
+| `customer_reference` | `customer_id` |  The [`id`](/docs/api/admin-rest/current/resources/customer#resource-object) or [`legacyResourceId`](/docs/api/admin-graphql/current/objects/customer#field-customer-legacyresourceid) of the customer.<br><br>Triggers that include this property in the request body are also available to [Shopify marketing automations](/docs/apps/build/marketing-analytics/automations). |
+| `order_reference` | `order_id` | The [`id`](/docs/api/admin-rest/current/resources/order#resource-object) or [`legacyResourceId`](/docs/api/admin-graphql/current/objects/order#field-order-legacyresourceid) of the order.  |
+| `product_reference` | `product_id` | The [`id`](/docs/api/admin-rest/current/resources/product#resource-object) or [`legacyResourceId`](/docs/api/admin-graphql/current/objects/product#field-product-legacyresourceid) of the product. |
+
+
+
+
+When making a request to Flow, include the payload key. See the [mutation API reference section](#mutation-api-reference) for a complete example.
+
+### Custom field
+
+A custom field lets you define the data that you send as part of your trigger request. The following is an example:
+
+<p>
+<div class="react-code-block" data-preset="file">
+<div class="react-code-block-preload ThemeMode-dim">
+<div class="react-code-block-preload-bar "></div>
+<div class="react-code-block-preload-placeholder-container">
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+<div class="react-code-block-preload-code-container">
+<div class="react-code-block-preload-codeline-number"></div>
+<div class="react-code-block-preload-codeline"></div>
+</div>
+
+</div>
+</div>
+
+
+<script type="text/plain" data-language="bash" data-title="toml">
+...
+
+[settings]
+
+  [[settings.fields]]
+  type = "number_decimal"
+  key = "Amount"
+</script>
+
+</div>
+</p>
+
+
+#### Custom field types
+
+The following are the available custom field types:
+
+| Field type | Description | Example |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------- |
+| `boolean`                 | A Boolean value. | `true`, `false` |
+| `email`                   | An email formatted string. | `"[email protected]"` |
+| `single_line_text_field`  | A string. | `"Hello world."`
+| `number_decimal`          | A number with a decimal point. | `1.0` |
+| `url`                     | A URL formatted string. | `"https://example/com"` |
+| `schema.<type>`           | `<type>` can be any type defined in the provided schema. [Learn more about defining complex types](/docs/apps/build/flow/configure-complex-data-types). | `{ "foo": "bar", "baz": 123 }` |
+
+#### Naming custom fields
+
+Field names need to be self-describing and readable. Use sentence case and separate words with spaces (not underscores or hyphens). These names can contain only alphabetical characters (a-z, A-Z) and spaces.
+
+When you refer to these fields in the payload that you send to Shopify Flow, enter the names verbatim . For example, `{ "City location": "Ottawa" } }`. Don't use shortened versions.
+
+#### Custom fields in the Shopify Flow editor
+
+Fields can be used in the Shopify Flow editor either in conditions or in actions as [template variables](https://help.shopify.com/manual/shopify-plus/flow2/reference/variables). When used as template variables, Shopify Flow converts your `key` property to camelCase such as `{{ customerEmail }}`.
+
+## Mutation API reference
+
+Once your extension is defined, published, and activated in a workflow according to [this guide](/docs/apps/build/flow/triggers/create), you can call Flow's mutation with an event, which will start the workflow(s).
+
+```graphql
+mutation
+{
+  flowTriggerReceive(
+    handle: "auction-bid-placed",
+    payload: {
+      "Amount": "30",
+      "customer_id": 12345
+  })
+  {
+    userErrors {field, message}
+  }
+}
+```
+
+| Property name       | Property usage                                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------------------------ |
+| `handle`              | The extension’s handle.                                                                                 |
+| `payload`          | The fields that you selected for your payload schema in the action configuration. These should be serialized in a key-value pair format where the keys are equal to your field's “key” properties. |
+
+> Note:
+> If you are using a Shopify admin API version of `2023-07` or earlier the mutation won't support the `handle` and `payload` properties. For information on that mutation shape you can rely on the [flowTriggerReceive documentation](/docs/api/admin-graphql/2023-07/mutations/flowTriggerReceive).
+
+## Considerations
+
+- When you create a trigger, the payload that you send to Shopify Flow needs to be [less than 1 MB and contain specific content](/docs/apps/build/flow/triggers/create#step-4-test-your-trigger) in the body.
+- Triggers have the same [API rate limits](/docs/api/usage/rate-limits) as the Shopify API.

data/scraped/raw/shopify_dev/_docs_apps_build_flow.txt

@@ -0,0 +1,112 @@
+
+
+[Shopify Flow](https://apps.shopify.com/flow) is an app that allows merchants to customize their store through automation. As a developer, you can integrate your app with the Flow platform through custom tasks, such as triggers and actions.
+
+![A workflow for a low stock notification displaying a trigger, condition, and action](/assets/apps/flow/example-workflow-inventory-quantity-changed.png)
+
+This guide introduces you to the different extensions you can create, building a Flow trigger and action, and considerations when making changes to your extensions.
+
+## Why build for Flow
+
+Building for Flow can help you to increase the value of your app by allowing merchants to automate their business processes. For example, suppose that you have a review app. After a review is created, merchants might want to send a notification (using email, Slack, or SMS), award loyalty points, and more. If you build the `Review created` trigger, Flow allows merchants to do any of those actions with your app. By integrating with Flow, you can:
+
+- **Improve integrations between your app, Shopify, and other apps**: Any task you build can be used with the triggers and actions that Flow already provides, which immediately connects your app to thousands of new features.
+- **Save development time**: Rather than building and maintaining direct integrations with many other apps, you can integrate with Flow and provide similar value to your merchants.
+- **Improved visibility**: Merchants can discover your templates or tasks in Flow, even if they don't have your app installed. Additionally, when you integrate with Flow, you receive a **Works with Flow** badge on your listing in the Shopify App Store. Your app will also be listed in the [Flow app directory](https://apps.shopify.com/collections/connectors-for-shopify-flow).
+
+## What you can build
+
+As a Partner you can build one or more tasks related to your app for your merchants to use. These merchants need to have both your app and Shopify Flow installed. Shopify Flow includes the following task types:
+
+| Extension type | Description | Example |
+|---|---|---|
+| [Trigger](/docs/apps/build/flow/triggers) | An event that starts a workflow, and can be something that happens in a store or in an app. | A new order is created in a merchant's online store. |
+| Condition | A rule that determines whether an action will be taken. As a developer you cannot create a condition task. | A condition is set to check whether the total amount paid for the order is over $200.00. |
+| [Action](/docs/apps/build/flow/actions) | A task that's executed in a store or in an app when certain conditions are met. | If the total amount paid for the order is over $200.00, then a tag is added to the customer account that placed the order. |
+| [Template](/docs/apps/build/flow/templates) | An example that demonstrates how your task works for a key use case. Templates are available through Flow's template library. | A workflow that sends an internal email when your trigger runs. |
+
+## Plans supported
+
+Flow is an optional app that's available to Shopify merchants on any paid plan. Flow is widely adopted by Shopify merchants, especially those with stores on Shopify Plus.
+
+Flow features [differ by plan](https://help.shopify.com/en/manual/shopify-flow). For apps, the primary difference is that if you have a [custom app](https://help.shopify.com/en/manual/apps/app-types/custom-apps), your Flow app extensions are available only to a [Shopify Plus](https://www.shopify.com/plus) store that has your app installed.
+
+## Templates
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  [create a template](/docs/apps/build/flow/templates/create-a-template)  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+
+## Getting started
+
+<div class="resource-card-grid">
+  <div>
+  <a class="resource-card" href="/docs/apps/build/flow/triggers" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/authentication"
+     data-alt-src="/assets/resource-cards/authentication-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Learn more about triggers
+    </h3>
+    <p class="resource-card__description">Connect your app to Shopify Flow so that your app can send an event that starts a workflow.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/actions" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/star"
+     data-alt-src="/assets/resource-cards/star-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Learn more about actions
+    </h3>
+    <p class="resource-card__description">Connect your app to Shopify Flow so that your app receives data when a workflow action runs.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/templates" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/filesystem"
+     data-alt-src="/assets/resource-cards/filesystem-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Learn more about Flow templates
+    </h3>
+    <p class="resource-card__description">Create workflow templates to showcase your triggers and actions.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/track-lifecycle-events" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/changelog"
+     data-alt-src="/assets/resource-cards/changelog-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Lifecycle events
+    </h3>
+    <p class="resource-card__description">Get notified about events related to your Flow triggers and actions.</p>
+  </a>
+</div></p>
+
+<p><div>
+  <a class="resource-card" href="/docs/apps/build/flow/migrate-legacy-extensions" data-theme-mode="">
+    <div class="resource-card__indicator-container"><img
+     src="/assets/resource-cards/cli"
+     data-alt-src="/assets/resource-cards/cli-dark"
+     aria-hidden="true"
+     class="resource-card__icon themed-image"></div>
+    <h3 class="resource-card__title">
+      Migrate legacy Flow extensions
+    </h3>
+    <p class="resource-card__description">Learn how to migrate your existing extensions from the Partner Dashboard to CLI-managed.</p>
+  </a>
+</div>
+</div>
+

data/scraped/raw/shopify_dev/_docs_apps_build_flow_migrate-legacy-extensions.txt

@@ -0,0 +1,76 @@
+
+
+If you have existing Flow extensions that were created through the Partner Dashboard, then you can import these extensions into your codebase. After you deploy the extensions that you’ve imported into Shopify CLI, Shopify CLI manages those extensions going forward.
+
+> Note:
+> Extensions that are migrated to Shopify CLI use the `handle` properties. The `handle` property is a unique string that identifies your extension and that's used when interacting with the Shopify Flow API. For more information, refer to the [triggers](/docs/apps/build/flow/triggers/create#step-4-test-your-trigger) and [actions](/docs/apps/build/flow/actions/endpoints#request) runtime payloads.
+
+A `handle` property is created in the extension's TOML configuration file after running the import command. Note that you can't change the `handle` property of the extensions that are present in your app's codebase after you've run the `dev` or `deploy` commands.
+
+### Requirements
+
+- Create a [Partner account](https://www.shopify.com/partners).
+- [Scaffold an app that uses Shopify CLI v3.70.0 or higher](/docs/apps/build/scaffold-app), or [migrate your existing app](/docs/apps/build/cli-for-apps/migrate-to-latest-cli) so it's compatible with Shopify CLI v3.70.0 or higher.
+- [Migrate a Partner Dashboard-managed app](/docs/apps/build/cli-for-apps/migrate-from-dashboard).
+<br>
+
+
+## Step 1: Import your Flow task extension locally
+
+> Note:
+> The command in this procedure only generates the local file representation of your Partner Dashboard extensions. Running the `deploy` command migrates your extensions to CLI managed-extensions. You can only import extensions that have versions. The published version is imported, if one exists. Otherwise, the latest version is imported.
+
+1. Navigate to your app directory.
+1. To start importing your Flow extension, run the following command:
+
+```bash
+#!/bin/bash
+shopify app import-extensions
+```
+
+1. Select the `Flow Extensions` option.
+1. Select an extension from the list of extensions that are available to import.
+
+After you’ve selected the extension to import, Shopify CLI automatically generates the file representation in your application’s `/extensions` directory and displays a success message.
+
+You can then go into your application’s `/extensions` directory and start editing your extension. The file structure of your extension should look like the following:
+
+```text
+/my-flow-extension
+  shopify.extension.toml
+```
+
+To learn more about the extensions file structure, refer to [App structure](/docs/apps/build/cli-for-apps/app-structure) and the documentation for your extension type.
+
+### Available Flags
+
+#### `client_id`
+
+An application’s `client_id`. The ID enables you to target a specific application when running the import command.
+
+```bash
+#!/bin/bash
+shopify app import-extensions --client_id abc123
+```
+
+## Step 2: Migrate your extension
+
+After you've imported the extension, you can migrate your extension by using Shopify CLI's `deploy` command.
+
+> Note:
+> Deploying extensions using the `app deploy` command also publishes the extensions. We recommend testing changes by using [`app dev`](/docs/api/shopify-cli/app/app-dev) or deploying to a test app before deploying them to a production app.
+
+Use Shopify CLI to deploy your extensions:
+
+1. Navigate to your app directory.
+2. Run the following command to start deploying your extension(s):
+
+```bash
+#!/bin/bash
+shopify app deploy
+```
+
+3. Follow the prompts.
+
+When you receive confirmation that the deploy was successful, your extensions have been released.
+

data/scraped/raw/shopify_dev/_docs_apps_build_flow_templates.txt

@@ -0,0 +1,12 @@
+
+
+## How templates work
+
+A template in Shopify Flow is an example workflow that can be copied into a merchant's shop. Templates help merchants automate a specific use case with minimal or no additional configuration. Flow's template library offers hundreds of templates with features to filter, browse, and search. You can  [create a template](/docs/apps/build/flow/templates/create-a-template)  for Shopify Flow that showcases your custom triggers and actions and help merchants do more.
+
+
+![Flow template library](/assets/apps/flow/flow-template-library.png)
+
+## Next steps
+- Follow our step by step guide on [creating a Flow template](/docs/apps/build/flow/templates/create-a-template).
+- Learn more about how localize your template, the approval process, and more in the [reference resource](/docs/apps/build/flow/templates/reference#approval-process)

data/scraped/raw/shopify_dev/_docs_apps_build_flow_track-lifecycle-events.txt

@@ -0,0 +1,120 @@
+
+
+This guide explains how to configure your app to receive trigger lifecycle callbacks from Shopify Flow.
+
+When [creating a trigger](/docs/apps/build/flow/triggers/create), configuring a lifecycle callback enables your app to receive notifications from Shopify Flow about stores using the trigger and communicate changes in workflow status (e.g., enabling or disabling a workflow) back to the app. This helps optimize app performance by ensuring that trigger-related operations are only performed for stores that actually need them.
+
+Apps must be properly configured to respond to trigger lifecycle callbacks. When a merchant attempts to enable a workflow that uses the trigger, Shopify Flow sends a lifecycle callback to the app's web server. If it doesn't promptly receive a response or receives a response with an HTTP status code that isn't `2xx`, then the merchant can't enable the workflow and make use of the trigger.
+
+> Note:
+> Legacy trigger discovery webhook extensions created using the Partner Dashboard are deprecated and must [migrate to the CLI](docs/apps/build/flow/migrate-legacy-extensions) before they can be edited.
+
+## How trigger lifecycle callbacks work
+
+Trigger lifecycle callbacks contain identifying information about the trigger and the store using it and indicate whether the trigger is being used. You can use this information to track the stores that are currently using your triggers and then send trigger requests to only those stores.
+
+### Properties
+
+The trigger lifecycle callback (HTTP POST request) is formatted in JSON and it contains the following properties:
+
+<table>
+  <tr>
+    <th>Property</th>
+    <th>Data type</th>
+    <th width="40%">Description</th>
+    <th>Example</th>
+  </tr>
+  <tr>
+    <td><code>flow_trigger_definition_id</code></td>
+    <td>String</td>
+    <td>The unique identifier for your Shopify Flow trigger.</td>
+    <td>Add row to spreadsheet</td>
+  </tr>
+  <tr>
+    <td><code>has_enabled_flow</code></td>
+    <td>Boolean</td>
+    <td>Whether the store has an enabled workflow that uses your trigger. Valid values:
+      <ul>
+        <li><code>true</code>: There is at least one workflow that is enabled and that uses your trigger.</li>
+        <li><code>false</code>: There are no enabled workflows that use your trigger.</li>
+      </ul>
+    </td>
+    <td>true</td>
+  </tr>
+  <tr>
+    <td><code>shop_id</code></td>
+    <td>Number</td>
+    <td>The unique identifier for the Shopify store.</td>
+    <td>690933842</td>
+  </tr>
+  <tr>
+    <td><code>shopify_domain</code></td>
+    <td>String</td>
+    <td>The myshopify domain of the Shopify store.</td>
+    <td>johnsapparel.myshopify.com</td>
+  </tr>
+  <tr>
+    <td><code>timestamp</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> date and timestamp</td>
+    <td>
+      <p>The time when the notification was created. Notifications with newer timestamps should take precedence. If you already have a timestamp in your datastore and you receive a newer timestamp, then overwrite this payload's information in your datastore. Conversely, if you receive a timestamp that is older than the information in your datastore, then ignore this payload.</p>
+    </td>
+    <td>2019-01-25T16:44:10.999Z</td>
+  </tr>
+</table>
+
+The following is an example body of a usage notification (HTTP POST) request:
+
+```json
+{
+  "flow_trigger_definition_id": "Add row to spreadsheet",
+  "has_enabled_flow": false,
+  "shop_id": "690933842",
+  "shopify_domain": "johnapparel.myshopify.com",
+  "timestamp": "2019-01-25T16:44:10.999Z"
+}
+```
+
+### Callback events
+
+Shopify Flow sends trigger lifecycle callbacks when the following events occur:
+
+- When a merchant activates a workflow that uses your trigger, the callback contains `"has_enabled_flow": true`.
+- When a merchant deactivates a workflow that uses your trigger, the callback contains `"has_enabled_flow": false`.
+
+### Web server response time and status codes
+
+When a merchant tries to enable a workflow that uses your trigger, Shopify Flow sends a trigger lifecycle callback to your web server. If your web server doesn't respond within five seconds, or if it responds with a different status code, then the merchant can't enable that workflow. The merchant receives a notification in the Shopify Flow app that tells them to try enabling the workflow at a later time.
+
+## 1. Configure your web server
+
+To begin, configure your web server to listen for Shopify Flow callbacks.
+
+1. Configure a URL in your web server to listen for the trigger lifecycle callbacks from Shopify Flow.
+2. Configure your web server to verify the HMAC header in the trigger lifecycle callback with your client secret.
+
+    The HMAC header is located in the following HTTP header: `x-shopify-hmac-sha256`. If you are using a Ruby-based web framework, then the header is `http-x-shopify-hmac-sha256`.
+
+3. Configure your web server to respond within 5 seconds when it receives a trigger lifecycle callback.
+
+## 2. Process and store callback data
+
+After you've added support to listen for Shopify Flow callbacks, you can configure your web server to process and store the callback data.
+
+1. Save the list of stores that are using your triggers in a persistent datastore. Use the <code>timestamp</code> property to make sure that you don't overwrite an existing entry with older information.
+2. Edit your application to send your triggers only to stores that are using your triggers.
+
+## 3. Configure the callback
+
+Finally, configure the callback in the CLI:
+
+1. Run `shopify app generate extension`.
+2. Select `Flow trigger lifecycle callback`.
+3. Change the URL in the generated TOML to the URL configured on the web server.
+4. Run `shopify app deploy`.
+
+## Next steps
+
+- Familiarize yourself with [Shopify Flow](/docs/apps/build/flow) and learn about building connectors.
+- Connect your app to Shopify Flow so that events that occur in your app can [trigger workflows](/docs/apps/build/flow/triggers).
+- Connect your app to Shopify Flow so that your app receives data and information when a [workflow action](/docs/apps/build/flow/actions) runs.

data/scraped/raw/shopify_dev/_docs_apps_build_flow_triggers.txt

@@ -0,0 +1,12 @@
+
+
+## How triggers work
+
+A trigger is a task in Shopify Flow that starts the execution of a workflow. The trigger represents an event that happens in a store or in an app. You can [build a trigger](/docs/apps/build/flow/triggers/create) for Shopify Flow so that events in your app trigger workflows to run.
+
+![A diagram that show how third party triggers interface with Flow ](/assets/apps/flow/trigger_diagram.png)
+
+## Next steps
+
+- To build a trigger, you need to [create a trigger extension](/docs/apps/build/flow/triggers/create) in your app. In that extension, you specify details about the trigger using a [TOML file](/docs/apps/build/flow/triggers/reference).
+- Once you have published your extension, you can then test or use it by [calling the Shopify API](/docs/apps/build/flow/triggers/reference#mutation-api-reference) with the trigger payload.

pyproject.toml

@@ -0,0 +1,25 @@
+[project]
+name = "shop-bot"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+    "aiohttp>=3.9.0",
+    "beautifulsoup4>=4.12.3",
+    "yarl>=1.9.4",
+    "aiodns>=3.1.1",
+    "aiosignal>=1.3.1",
+    "lxml>=5.1.0",
+    "langchain>=0.3.19",
+    "langchain-core>=0.3.37",
+    "langchain-community>=0.3.18",
+    "langchain-openai>=0.3.6",
+    "typing-extensions>=4.12.2",
+    "langgraph>=0.2.74",
+    "qdrant-client>=1.13.2",
+    "langchain-qdrant>=0.2.0",
+    "dotenv>=0.9.9",
+    "unstructured>=0.14.8",
+    "chainlit>=2.2.1",
+]

rag_graph.py

@@ -0,0 +1,120 @@
+from dotenv import load_dotenv
+
+from typing_extensions import List, TypedDict
+
+from langchain_openai import ChatOpenAI, OpenAIEmbeddings
+
+from langchain_core.documents import Document
+from langchain_core.prompts import ChatPromptTemplate
+
+from langchain_qdrant import QdrantVectorStore
+
+from langgraph.graph import START, StateGraph
+from langchain.prompts import ChatPromptTemplate
+from langchain_community.document_loaders import DirectoryLoader
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+
+from qdrant_client.http.models import Distance, VectorParams
+
+import nltk
+nltk.download('punkt_tab')
+nltk.download('averaged_perceptron_tagger_eng')
+
+CHUNK_SIZE = 1000
+CHUNK_OVERLAP = CHUNK_SIZE // 2
+
+RAG_PROMPT = """\
+You are a helpful assistant who answers questions based on provided context. 
+You must only use the provided context, and cannot use your own knowledge.
+
+### Question
+{question}
+
+### Context
+{context}
+"""
+
+class RagGraph:
+  def __init__(self, qdrant_client):
+    self.llm = ChatOpenAI(model="gpt-4-turbo-preview", streaming=True)
+    self.collection_name = "rag_collection"
+    self.embeddings_model = OpenAIEmbeddings(model="text-embedding-3-small")
+    self.text_splitter = RecursiveCharacterTextSplitter(chunk_size=CHUNK_SIZE, chunk_overlap=CHUNK_OVERLAP)
+    self.rag_prompt = ChatPromptTemplate.from_template(RAG_PROMPT)
+    self.qdrant_client = qdrant_client
+
+    does_collection_exist = self.qdrant_client.collection_exists(collection_name=self.collection_name)
+
+    if not does_collection_exist:
+      qdrant_client.create_collection(
+        collection_name=self.collection_name,
+        vectors_config=VectorParams(size=1536, distance=Distance.COSINE),
+      )
+
+    self.vector_store = QdrantVectorStore(
+      client=qdrant_client,
+      collection_name=self.collection_name,
+      embedding=self.embeddings_model,
+    )
+
+    if not does_collection_exist:
+      loader = DirectoryLoader("data/scraped/clean", glob="*.txt")
+      documents = self.text_splitter.split_documents(loader.load())
+      self.vector_store.add_documents(documents=documents)
+  
+    self.vector_db_retriever = self.vector_store.as_retriever(search_kwargs={"k": 5})    
+    self.graph = None
+    
+  def create_rag_graph(self):
+    """Create the RAG graph."""
+    class State(TypedDict):
+      """State for the conversation."""
+      question: str
+      context: List[Document]
+
+    def retrieve(state):
+      question = state["question"]
+      retrieved_docs = self.vector_db_retriever.invoke(question)
+      return {"question": state["question"], "context": retrieved_docs} 
+
+    async def stream(state):
+      """LangGraph node that streams responses"""
+      question = state["question"]
+      context = "\n\n".join(doc.page_content for doc in state["context"])
+      messages = self.rag_prompt.format_messages(question=question, context=context)
+      async for chunk in self.llm.astream(messages):
+        yield {"content": chunk.content}
+
+    graph_builder = StateGraph(State).add_sequence([retrieve, stream])
+    graph_builder.add_edge(START, "retrieve")
+    self.graph = graph_builder.compile()
+
+  def run(self, question):
+    """Run the graph."""
+    retrieved_docs = self.vector_db_retriever.invoke(question)
+    docs_content = "\n\n".join(doc.page_content for doc in retrieved_docs)
+    messages = self.rag_prompt.format_messages(question=question, context=docs_content)
+    response = self.llm.invoke(messages)
+
+    return {"response": response.content}
+  
+  async def stream(self, question, msg):
+    """Stream the graph."""
+    async for event in self.graph.astream({"question": question, "context": []}, stream_mode=["messages"]):
+      _, (message_chunk, metadata) = event 
+      if message_chunk.content:
+        await msg.stream_token(message_chunk.content)
+
+    await msg.send()
+  
+def main():
+  """Test the RAG graph."""
+  load_dotenv()
+  rag_graph = RagGraph()
+  # rag_graph.update_vector_store("data/scraped/clean", replace_documents=False)
+  rag_graph.create_rag_graph()
+  response = rag_graph.run("What is Shopify Flow?")
+  print(response["response"])
+
+if __name__ == "__main__":
+    main()

scraper/__init__.py

@@ -0,0 +1,3 @@
+"""
+Async web scraper for crawling documentation sites.
+"""

scraper/async_crawler.py

@@ -0,0 +1,205 @@
+#!/usr/bin/env python3
+import asyncio
+import logging
+from pathlib import Path
+from typing import Set, Dict
+import aiohttp
+from bs4 import BeautifulSoup
+from yarl import URL
+import json
+import re
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class AsyncCrawler:
+    def __init__(self, start_url: str, max_concurrent: int = 100):
+        self.start_url = URL(start_url)
+        self.base_domain = self.start_url.host
+        self.base_path = str(self.start_url).split(self.base_domain)[1]
+        self.visited_urls: Set[str] = set()
+        self.url_queue: asyncio.Queue = asyncio.Queue()
+        self.semaphore = asyncio.Semaphore(max_concurrent)
+        self.session: aiohttp.ClientSession = None
+        self.data_dir = Path("data/scraped")
+        self.sitemap: Dict[str, list] = {}
+
+    async def init_session(self):
+        """Initialize aiohttp session with optimal settings."""
+        timeout = aiohttp.ClientTimeout(total=10)
+        connector = aiohttp.TCPConnector(limit=100, ttl_dns_cache=300)
+        self.session = aiohttp.ClientSession(
+            timeout=timeout,
+            connector=connector,
+            headers={"User-Agent": "ShopBot/1.0"}
+        )
+
+    def is_valid_url(self, url: URL) -> bool:
+        """Check if URL should be crawled."""
+        return (
+            str(url).startswith(str(self.start_url))
+            and url.scheme in ("http", "https")
+            and not url.fragment
+        )
+    
+    async def process_page(self, url: str, html: str) -> Set[str]:
+        """Extract links and save raw HTML."""
+        
+        # Regex pattern for Markdown links
+        pattern = r'\[.*?\]\((https?://[^\)]+|/[^)]+|[^\)]+)\)'
+
+        # Find all matches
+        markdown_links = re.findall(pattern, html)
+
+        soup = BeautifulSoup(html, 'html.parser')
+        anchor_links = [a['href'] for a in soup.find_all('a', href=True)]
+
+        links = markdown_links + anchor_links        
+        absolute_links = [
+            str(URL(link)) if URL(link).host else str(self.start_url.join(URL(link)))
+            for link in links
+        ]
+        
+        # concatenate the two sets
+
+        # Filter out invalid URLs
+        valid_links = {
+            link for link in absolute_links
+            if self.is_valid_url(URL
+            (link))
+        }
+        
+        # Save raw HTML
+        # extract just the path from the url
+        path = url.split(self.base_domain)[1]
+
+        raw_filepath = self.data_dir / 'raw' / path.replace("/", "_").replace("_docs_apps_build_", "")
+        raw_filepath.parent.mkdir(parents=True, exist_ok=True)
+
+        raw_filepath.write_text(html)
+        # raw_filepath.write_text(self.strip_all_html_tags_from_markdown(html))
+        
+        # Update sitemap
+        self.sitemap[url] = list(valid_links)
+        
+        return valid_links
+
+    async def fetch_page(self, url: str) -> None:
+        """Fetch and process a single page."""
+        if url in self.visited_urls:
+            return
+
+        self.visited_urls.add(url)
+        
+        try:
+            async with self.semaphore:
+                async with self.session.get(url) as response:
+                    if response.status == 200:
+                        html = await response.text()
+                        new_urls = await self.process_page(url, html)
+                        
+                        for new_url in new_urls:
+                            if new_url not in self.visited_urls:
+                                await self.url_queue.put(new_url)
+                        
+                        logger.info(f"Successfully processed: {url}")
+                    else:
+                        logger.warning(f"Failed to fetch {url}: {response.status}")
+        except Exception as e:
+            logger.error(f"Error processing {url}: {str(e)}")
+    
+    def strip_all_html_tags_from_markdown(self, markdown: str) -> str:
+        """Remove all HTML tags from a string, except for opening and closing script tags."""
+        # Define regex patterns to remove specific HTML tags
+        patterns = [
+            r'<div class="react-code-block" data-preset="file">\n',
+            r'<div class="react-code-block" data-preset="basic">\n',
+            r'<div class="react-code-block" data-preset="terminal">\n',
+            r'<div class="react-code-block-preload ThemeMode-dim">\n',
+            r'<div class="react-code-block-preload-bar "></div>\n',
+            r'<div class="react-code-block-preload-bar basic-codeblock">',
+            r'<div class="react-code-block-preload-placeholder-container">\n',
+            r'<div class="react-code-block-preload-code-container">\n',
+            r'<div class="react-code-block-preload-codeline-number"></div>\n',
+            r'<div class="react-code-block-preload-codeline"></div>\n',
+            r'<script data-option=[^>]+ data-value=[^>]+></script>\n',
+            r'<div>\n',
+            r'</div>\n',
+            r'<br>\n',
+            r'<p>\n',
+            r'</p>\n',
+            # r'<(?!script\b)[^>]+>',
+            # r'</(?!script\b)[^>]+>',
+            r'END_RAW_MD_CONTENT',
+            r'RAW_MD_CONTENT',
+        ]
+
+        # Remove all matched patterns from the markdown
+        for pattern in patterns:
+            markdown = re.sub(pattern, '', markdown)
+
+        markdown = re.sub(r'<script type="text/plain"[^>]+language="([^"]+)"[^>]*>', r'```\1', markdown)
+        markdown = re.sub(r'</script>', '```', markdown)
+
+        # replace 3 or more new lines with 2 new lines
+        markdown = re.sub(r'\n{3,}', '\n\n', markdown)
+        
+        return markdown
+        
+    def clean_raw_markdown(self):
+        """Clean raw markdown files by stripping HTML tags."""        
+        raw_dir = self.data_dir / 'raw'
+        for raw_file in raw_dir.glob('*.txt'):
+            content = raw_file.read_text()
+            cleaned_content = self.strip_all_html_tags_from_markdown(content)
+            
+            raw_filepath = self.data_dir / 'clean' / raw_file.name
+            raw_filepath.parent.mkdir(parents=True, exist_ok=True)
+            raw_filepath.write_text(cleaned_content)
+
+    async def run(self):
+        """Main crawler execution."""
+        # Create data directory
+        self.data_dir.mkdir(parents=True, exist_ok=True)
+        
+        await self.init_session()
+        await self.url_queue.put(str(self.start_url))
+        
+        try:
+            workers = []
+            while True:
+
+                if self.url_queue.empty() and not workers:
+                    break
+                
+                while not self.url_queue.empty():
+                    url = await self.url_queue.get() + '.txt'
+
+                    if url not in self.visited_urls:
+                        worker = asyncio.create_task(self.fetch_page(url))
+                        workers.append(worker)
+                
+                if workers:
+                    done, pending = await asyncio.wait(
+                        workers, 
+                        return_when=asyncio.FIRST_COMPLETED
+                    )
+                    workers = list(pending)
+                    for task in done:
+                        await task
+        finally:
+            # Save sitemap
+            sitemap_path = self.data_dir / "_sitemap.json"
+            sitemap_path.write_text(json.dumps(self.sitemap, indent=2))
+            self.clean_raw_markdown()
+            
+            await self.session.close()
+            logger.info(f"Crawl completed. Processed {len(self.visited_urls)} pages.")
+
+async def main():
+    start_url = "https://shopify.dev/docs/apps/build/flow"
+    crawler = AsyncCrawler(start_url)
+    await crawler.run()
+
+if __name__ == "__main__":
+    asyncio.run(main())