Hi everyone,
I recently submitted my app for Built for Shopify review, and I got some feedback regarding 4.1.1 UX best practices — specifically about the Contextual Save Bar (CSB) implementation with Max Modals.
The reviewer mentioned that in Max Modals, the Save and Discard buttons should appear in the ui-title-bar only when the form becomes dirty, and it should block the close button.
What I did so far:
- I used the Save Bar component inside the modal itself.
- When the modal content is dirty, the Save Bar appears inside modal and hides the close button and works as expected.
My Question:
Since this modal is part of a form (and the form already has its own Save Bar on the page), I’m not sure what the correct UX behavior should be when the modal is opened.
- Should I hide the page’s Save Bar while the modal is open and then re-show it once the modal is closed?
- Or should I keep showing both the page Save Bar and the modal Save Bar at the same time? (I assume this might not be the expected behavior since it feels redundant/confusing.)
Has anyone here faced the same feedback or implemented this pattern successfully? Would love to hear best practices or see examples of how you handled Save Bar behavior with Max Modals.
Thanks in advance!
