Save Bar
The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be used in 2 ways:
It is automatically configured when you provide the
data-save-bar
attribute to aform
element and will display the save bar when there are unsaved changes. Thesubmit
event fires when the form is submitted or when the Save button is pressed. Thereset
event fires when the form is reset or when the Discard button is pressed, which discards all unsaved changes in the form.It can be controlled declaratively through the
ui-save-bar
element. For more information, refer to theui-save-bar
component.
Anchor to savebarsaveBar
The API provides a
show
method to display a save bar, a hide
method to hide a save bar, and a toggle
method to toggle the visibility of a save bar. These are used in conjunction with the ui-save-bar
element. They are alternatives to the show
, hide
, and toggle
instance methods.
- Anchor to leaveConfirmationleaveConfirmation() => Promise<void>required
Show leave confirmation dialog if necessary. This promise is resolved when there is no visible save bar or user confirms to leave.
- Anchor to hidehide(id: string) => Promise<void>
Hides the save bar element. An alternative to the
hide
instance method on theui-save-bar
element.- Anchor to showshow(id: string) => Promise<void>
Shows the save bar element. An alternative to the
show
instance method on theui-save-bar
element.- Anchor to toggletoggle(id: string) => Promise<void>
Toggles the save bar element visibility. An alternative to the
toggle
instance method on theui-save-bar
element.
_SaveBarApi
- hide
Hides the save bar element. An alternative to the `hide` instance method on the `ui-save-bar` element.
(id: string) => Promise<void>
- leaveConfirmation
Show leave confirmation dialog if necessary. This promise is resolved when there is no visible save bar or user confirms to leave.
() => Promise<void>
- show
Shows the save bar element. An alternative to the `show` instance method on the `ui-save-bar` element.
(id: string) => Promise<void>
- toggle
Toggles the save bar element visibility. An alternative to the `toggle` instance method on the `ui-save-bar` element.
(id: string) => Promise<void>
interface _SaveBarApi {
/**
* Shows the save bar element. An alternative to the `show` instance method on the `ui-save-bar` element.
* @param id A unique identifier for the save bar
*/
show?(id: string): Promise<void>;
/**
* Hides the save bar element. An alternative to the `hide` instance method on the `ui-save-bar` element.
* @param id A unique identifier for the save bar
*/
hide?(id: string): Promise<void>;
/**
* Toggles the save bar element visibility. An alternative to the `toggle` instance method on the `ui-save-bar` element.
* @param id A unique identifier for the save bar
*/
toggle?(id: string): Promise<void>;
/**
* Show leave confirmation dialog if necessary. This promise is resolved when there is no visible save bar or user confirms to leave.
*/
leaveConfirmation(): Promise<void>;
}
Save Bar
examples
Save Bar
<form data-save-bar onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();" > <label> Name: <input name="username" /> </label> </form>
Preview

Anchor to examplesExamples
Save bar options, variations, and events
Anchor to example-save-bar-configured-through-the-data-save-bar-attributeSave bar configured through the data-save-bar attribute
Anchor to example-subscribe-to-discardSubscribe to Discard
Anchor to example-subscribe-to-saveSubscribe to Save
Anchor to example-showing-a-discard-confirmation-modalShowing a discard confirmation modal
Provide the data-discard-confirmation
attribute to a form
with the data-save-bar
attribute to show a confirmation modal after the user clicks the Discard button of the save bar
Anchor to example-showing-the-save-bar-with-the-savebar-apiShowing the save bar with the saveBar API
Showing the save bar with the saveBar API
Subscribe to Discard
examples
Subscribe to Discard
description
Subscribing to the [`HTMLFormElement: reset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event
Event handler property
<form data-save-bar onreset="console.log('discarding')" > <label> Name: <input name="username" /> </label> </form>
Event listener
<form data-save-bar> <label> Name: <input name="username" /> </label> </form> <script> const form = document.querySelector('form'); form.addEventListener('reset', (e) => { console.log('discarding'); }); </script>
Subscribe to Save
description
Subscribing to the [`HTMLFormElement: submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event
Event handler property
<form data-save-bar onsubmit="console.log('submitting');" > <label> Name: <input name="username" /> </label> </form>
Event listener
<form data-save-bar> <label> Name: <input name="username" /> </label> </form> <script> const form = document.querySelector('form'); form.addEventListener('submit', (e) => { console.log('submitting'); }); </script>
Showing a discard confirmation modal
description
Provide the `data-discard-confirmation` attribute to a `form` with the `data-save-bar` attribute to show a confirmation modal after the user clicks the Discard button of the save bar
HTML
<form data-save-bar data-discard-confirmation onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();" > <label> Name: <input name="username" /> </label> </form>
Showing the save bar with the saveBar API
description
Showing the save bar with the saveBar API
<ui-save-bar id="my-save-bar"></ui-save-bar> <button onclick="shopify.saveBar.show('my-save-bar')">Show</button> <button onclick="shopify.saveBar.hide('my-save-bar')">Hide</button>