BFS - Context Save Bar for Modal Forms

Built for Shopify
1

My app was flagged during the Built for Shopify (BFS) review under rule 4.1.5:

Use the contextual save bar: All forms that reasonably require saving actions must be integrated with the App Bridge Contextual Save Bar.
When the Contextual Save Bar is present, require merchants to interact with the “Save” or “Discard” buttons before allowing them to navigate away from the form.

In my app, I have several Polaris modals that contain small forms (2–3 fields) with two buttons inside the modal:

  • Cancel → closes the modal without saving
  • Update → saves the data and closes the modal

From my understanding, the Contextual Save Bar (CSB) always appears at the top of the embedded app frame, not inside the modal.
That means if a modal is open and there are unsaved changes, the CSB will show above it.

My questions are:

  1. In this case, should I keep my modal buttons and just wire them to the CSB save/discard actions?
  2. Or should I rely entirely on CSB and remove modal buttons?
  3. What’s the best practice for preventing merchants from closing the modal or navigating away while the CSB is active?
  4. Has anyone implemented a pattern where a small modal form still triggers the CSB, even if all the save/discard happens inside the modal?

Looking for clarification and ideally an example pattern so I can update my app to pass BFS.

Thanks!

2

Very curious about this too as we’re building a form inside the App Bridge Modal at the moment.

This does sound like a misunderstanding on the app review team / an unclear requirement.

It seems really odd to enforce the use of the Contextual Save Bar when the Modal has it’s own Title Bar and Buttons that are normally used for discarding and saving.

Removing the Modal buttons and using the CSB seems to be a more confusing UX because the CSB lives outside of the modal.

The admin doesn’t even use the CSB for modals:

Screenshot 2025-08-14 at 11.14.52 AM
Screenshot 2025-08-14 at 11.14.52 AM2962×1840 331 KB

3

Posting an update on my end here - not for BFS but for using SaveBars in Modals. When using the app bridge modals, you should be using SaveBar instead (or in addition) to TitleBar.

This SaveBar appears within the modal header, not in the contextual save bar area.

When a SaveBar is in the modal, you can then use discardConfirmation to prevent users from navigating away when the form in the modal is dirty.

This also has the added effect of removing the ‘X’ from the modal, and preventing the modal from closing immediately if the user clicks outside of the modal area.

Example below using src.

// add logic to show/hide my-modal-save-bar when your modal form is dirty.

<Modal
  id="my-modal-with-form"
  src={`/modal/my-modal`}
  variant="max"
>
  <SaveBar id="my-modal-save-bar" discardConfirmation="">
    <button type="button" variant="primary" onClick={handleSave}>
      Save
    </button>
    <button type="button" onClick={handleDiscard}>
      Discard
    </button>
  </SaveBar>
  <TitleBar title="My modal with a form" />
</Modal>
4

Hi @John_Kabir
Let’s use attribute type=“button” for your Modal save bar element, it will prevent submit & navigate in page contextual save bar