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. Choose one approach or the other. Don't combine data-save-bar with programmatic methods on the same page.

For <s-app-window> content where you need programmatic save bar control from within the iframe, define <ui-save-bar> on the parent page and use shopify.saveBar.show(id) from within the iframe. See Save bar in an iframe window.

Info

The save bar functionality requires the full App Bridge UI library to be loaded using 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 Save bar in an iframe windowSave bar in an iframe window

For <s-app-window> content, define a <ui-save-bar> on the parent page with a unique id. From within the iframe, call shopify.saveBar.show(id) when changes are detected and shopify.saveBar.hide(id) after save or discard.

function ParentPage() {

const saveBarId = 'modal-save-bar';

const handleSave = async () => {

await fetch('/api/save', {method: 'POST'});

shopify.saveBar.hide(saveBarId);

};

const handleDiscard = () => {

shopify.saveBar.hide(saveBarId);

};

return (

<s-page heading="Settings">

<ui-save-bar id={saveBarId}>

<button onClick={handleDiscard}>Discard</button>

</ui-save-bar>

<s-app-window src="/settings" />

</s-page>

);

}

function SettingsPage() {

return (

<s-section heading="Configuration">

<s-text-field

label="Store name"

onInput={() => shopify.saveBar.show('modal-save-bar')}

</s-section>

);

}

Parent page

// @validate-ignore: ButtonHTMLAttributes<HTMLButtonElement>
function ParentPage() {
  const saveBarId = 'modal-save-bar';

  const handleSave = async () => {
    await fetch('/api/save', {method: 'POST'});
    shopify.saveBar.hide(saveBarId);
  };

  const handleDiscard = () => {
    shopify.saveBar.hide(saveBarId);
  };

  return (
    <s-page heading="Settings">
      <ui-save-bar id={saveBarId}>
        <button variant="primary" onClick={handleSave}>Save</button>
        <button onClick={handleDiscard}>Discard</button>
      </ui-save-bar>
      <s-app-window src="/settings" />
    </s-page>
  );
}

/settings route

function SettingsPage() {
  return (
    <s-section heading="Configuration">
      <s-text-field
        label="Store name"
        onInput={() => shopify.saveBar.show('modal-save-bar')}
      />
    </s-section>
  );
}

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.
Control the save bar from iframe windows: For <s-app-window src="..."> content, define <ui-save-bar> on the parent page and call shopify.saveBar.show(id) from within the iframe. See Save bar in an iframe window.

Was this page helpful?