Contextual Save Bar

The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.

Setup

Create an app and import the ContextualSaveBar module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

Create and show

Generate a contextual save bar and make it visible:

Update options

You can modify the options at any time. If the contextual save bar is visible, the UI will be updated immediately.

Hide

Dispatch a hide action when you want to hide the contextual save bar.

Subscribe to Discard and Save

Subscribe to the contextual save bar actions (ContextualSaveBar.Action.DISCARD and ContextualSaveBar.Action.SAVE) by calling subscribe. The subscribe method returns a method that you can call to unsubscribe from the action.

To hide the contextual save bar, dispatch a ContextualSaveBar.Action.HIDE action in the subscribe callback.

Unsubscribe

You call unsubscribe to remove all current subscriptions on the contextual save bar: