Build a custom configuration page
To give users 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, users see a preview with an image and text that's fetched from your custom configuration page preview URL. Users can click the button to access the custom configuration page.
Your custom configuration page is then displayed in a frame in the Shopify admin.
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.
RequirementsAnchor link to section titled "Requirements"
To implement this feature, you'll use the following:
Implementing a custom configuration pageAnchor link to section titled "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.
From the context of the custom configuration page, you can then access step and property information that you can use to display the appropriate information.
Use Shopify App Bridge to render your app pageAnchor link to section titled "Use Shopify App Bridge to render your app page"
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:
Access action informationAnchor link to section titled "Access action information"
In the context of the custom configuration page, Shopify Flow makes the following action information available:
step_referenceis 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. The properties are passed as an object containing the properties as key-value pairs:
Request property dataAnchor link to section titled "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:
Add buttons to the App Bridge title barAnchor link to section titled "Add buttons to the App Bridge title bar"
You can add more actions to the App Bridge title bar in one of two ways:
@shopify/app-bridge: Use the
Button.createinitializer to create the buttons, then pass them to the
Titlebar.createinitializer to set the buttons. You need to keep a reference to the Titlebar instance if you wish to do additional updates after the initialization.
@shopify/app-bridge-react: Pass the primary and secondary actions to the
Only primary and secondary actions on the TitleBar are supported. Other App Bridge actions are ignored.
Return to the previous pageAnchor link to section titled "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