Save bar

Enable automatic save bar integration for HTML forms by adding the data-save-bar attribute to your form element. When form data changes, a save bar automatically appears, prompting users to save or discard their changes.

Alternatively, use the Save Bar API for programmatic control over the save bar behavior. Programmatic control is available as shopify.saveBar.show(), shopify.saveBar.hide(), and shopify.saveBar.toggle().

Note: The save bar functionality requires the full App Bridge UI library to be loaded via a script tag.

Anchor to AttributesAttributes

Add these attributes to your <form> element to enable save bar integration.

Anchor to data-discard-confirmation data-discard-confirmation boolean: Shows a confirmation dialog when the discard button is clicked, requiring merchants to confirm before losing their changes. The dialog prevents accidental data loss by adding a second step before reset. Commonly used for forms with significant data entry, multi-step workflows, or when changes cannot be easily recreated.
Anchor to data-save-bar data-save-bar boolean: Enables automatic save bar integration. When present, the save bar appears whenever any form input value changes from its initial state. The save bar automatically hides when the form is submitted or reset. Commonly used for settings pages, product editors, or any form where merchants need visual feedback about unsaved changes.
Anchor to onreset onreset (event: Event) => void: Handler called when the form is reset via the save bar's discard button. Receives a standard Event that can be prevented with event.preventDefault() for custom discard logic. Commonly used for reverting form fields to their original values, clearing temporary state, or confirming discard actions programmatically.
Anchor to onsubmit onsubmit (event: SubmitEvent) => void: Handler called when the form is submitted via the save bar's save button. Receives a standard SubmitEvent that can be prevented with event.preventDefault() for custom async save logic. Commonly used for API calls to persist data, form validation before save, or showing success/error toasts after the operation completes.

Anchor to ExamplesExamples

Anchor to Form with automatic save barForm with automatic save bar

Add the data-save-bar attribute to a form to automatically show a save bar when form data changes.

Form with automatic save bar

html

<s-text-field

label="Product Title"

name="title"

required

></s-text-field>

<s-text-area

label="Description"

name="description"

rows="4"

></s-text-area>

<s-text-field

label="Price"

name="price"

></s-text-field>

</form>

Anchor to Submit and reset handlersSubmit and reset handlers

Handle form submission and reset using standard HTML form events.

Submit and reset handlers

html

<form

data-save-bar

onsubmit="console.log('submit');"

onreset="console.log('reset');"

<s-text-field label="Name" name="name"></s-text-field>

<s-button type="submit">Submit</s-button>

<s-button type="reset">Reset</s-button>

</form>

Anchor to Discard confirmationDiscard confirmation

Add data-discard-confirmation to show a confirmation dialog when the discard button is clicked, preventing accidental data loss.

Discard confirmation

html

<s-text-field

label="Store Name"

name="storeName"

required

></s-text-field>

<s-text-area

label="Store Description"

name="description"

rows="4"

></s-text-area>

<s-checkbox

label="Enable notifications"

name="notifications"

></s-checkbox>

</form>

Anchor to Best practicesBest practices

Always provide discard functionality: Allow merchants to revert changes by handling the discard action or using form reset.
Show loading states during save: Use the Loading API to indicate when an async save operation is in progress.
Use data-discard-confirmation for destructive forms: Add a confirmation dialog when discarding changes would result in significant data loss.

Anchor to LimitationsLimitations

data-save-bar isn't supported inside modals. Forms inside modals should use the Save Bar API programmatically if save or discard functionality is needed.

Was this page helpful?