Settings

Make settings pages easy to scan by grouping related information in a logical order. For complex or lengthy settings, organize content into distinct, themed sections that link to their own pages.

Used to	Examples
Find and change app settings	Membership settings, app appearance, set up theme blocks

Preview of the settings pattern

This pattern uses Box, Button, ChoiceList, Clickable, Divider, Grid, Heading, Icon, Paragraph, Section, Select, Stack, and TextField components.

Design guidelines

Design scannable settings pages with groups of related information placed in logical order.

Navigation

Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.
Offer users clear and predictable action labels.

Visual design

Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.

Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts.
Use high-resolution photos and images to ensure a professional, high-quality experience.

Was this section helpful?

Settings

// ===

// Settings page pattern

// ===

export default function SettingsPage() {

const handleFormReset = (event) => {

console.log("Handle discarded changes if necessary");

};

const handleFormSubmit = (event) => {

event.preventDefault();

const formData = new FormData(event.target);

const formEntries = Object.fromEntries(formData);

console.log("Form data", formEntries);

};

return (

<s-page inlineSize="small">

<ui-title-bar title="Settings"></ui-title-bar>

{/* === */}

{/* Store Information */}

{/* === */}

<s-section heading="Store Information">

<s-text-field

label="Store name"

name="store-name"

value="Puzzlify Store"

placeholder="Enter store name"

<s-text-field

label="Business address"

name="business-address"

value="123 Main St, Anytown, USA"

examples

Settings

JSX


// ===
// Settings page pattern
// ===

export default function SettingsPage() {
  const handleFormReset = (event) => {
    console.log("Handle discarded changes if necessary");
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const formEntries = Object.fromEntries(formData);
    console.log("Form data", formEntries);
  };

  return (
    <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
      <s-page inlineSize="small">
        <ui-title-bar title="Settings"></ui-title-bar>

        {/* === */}
        {/* Store Information */}
        {/* === */}
        <s-section heading="Store Information">
            <s-text-field
              label="Store name"
              name="store-name"
              value="Puzzlify Store"
              placeholder="Enter store name"
            />
            <s-text-field
              label="Business address"
              name="business-address"
              value="123 Main St, Anytown, USA"
              placeholder="Enter business address"
            />
            <s-text-field
              label="Store phone"
              name="store-phone"
              value="+1 (555) 123-4567"
              placeholder="Enter phone number"
            />
            <s-choice-list label="Primary currency" name="currency">
              <s-choice label="US Dollar ($)" value="usd" selected></s-choice>
              <s-choice label="Canadian Dollar (CAD)" value="cad"></s-choice>
              <s-choice label="Euro (€)" value="eur"></s-choice>
            </s-choice-list>
        </s-section>

        {/* === */}
        {/* Notifications */}
        {/* === */}
        <s-section heading="Notifications">
            <s-select label="Notification frequency" name="notification-frequency">
              <s-option value="immediately" selected>Immediately</s-option>
              <s-option value="hourly">Hourly digest</s-option>
              <s-option value="daily">Daily digest</s-option>
            </s-select>
            <s-choice-list label="Notification types" name="notifications-type" multiple>
              <s-choice label="New order notifications" value="new-order" selected></s-choice>
              <s-choice label="Low stock alerts" value="low-stock"></s-choice>
              <s-choice label="Customer review notifications" value="customer-review"></s-choice>
              <s-choice label="Shipping updates" value="shipping-updates"></s-choice>
            </s-choice-list>
        </s-section>

        {/* === */}
        {/* Preferences */}
        {/* === */}
        <s-section heading="Preferences">
          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
            <s-clickable
              padding="small-100"
              href="/app/settings/shipping"
              accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
            >
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Shipping & fulfillment</s-heading>
                  <s-paragraph color="subdued">
                    Shipping methods, rates, zones, and fulfillment preferences.
                  </s-paragraph>
                </s-box>
                <s-icon type="chevron-right"></s-icon>
              </s-grid>
            </s-clickable>
            <s-box paddingInline="small-100">
              <s-divider></s-divider>
            </s-box>

            <s-clickable
              padding="small-100"
              href="/app/settings/products_catalog"
              accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
            >
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Products & catalog</s-heading>
                  <s-paragraph color="subdued">
                    Product defaults, customer experience, and catalog display options.
                  </s-paragraph>
                </s-box>
                <s-icon type="chevron-right"></s-icon>
              </s-grid>
            </s-clickable>
            <s-box paddingInline="small-100">
              <s-divider></s-divider>
            </s-box>

            <s-clickable
              padding="small-100"
              href="/app/settings/customer_support"
              accessibilityLabel="Manage customer support settings and help resources"
            >
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Customer support</s-heading>
                  <s-paragraph color="subdued">
                    Support settings, help resources, and customer service tools.
                  </s-paragraph>
                </s-box>
                <s-icon type="chevron-right"></s-icon>
              </s-grid>
            </s-clickable>
          </s-stack>
        </s-section>

        {/* === */}
        {/* Tools */}
        {/* === */}
        <s-section heading="Tools">
          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
            <s-box padding="small-100">
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Reset app settings</s-heading>
                  <s-paragraph color="subdued">
                    Reset all settings to their default values. This action cannot be undone.
                  </s-paragraph>
                </s-box>
                <s-button tone="critical">Reset</s-button>
              </s-grid>
            </s-box>
            <s-box paddingInline="small-100">
              <s-divider></s-divider>
            </s-box>

            <s-box padding="small-100">
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Export settings</s-heading>
                  <s-paragraph color="subdued">
                    Download a backup of all your current settings.
                  </s-paragraph>
                </s-box>
                <s-button>Export</s-button>
              </s-grid>
            </s-box>
          </s-stack>
        </s-section>
      </s-page>
    </form>
  );
}

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
    <title>Pattern</title>
  </head>
  <body>
    <!-- === -->
    <!-- Settings page pattern -->
    <!-- === -->
    <form data-save-bar onSubmit="" onReset="">
      <s-page inlineSize="small">
        <ui-title-bar title="Settings"></ui-title-bar>
        <!-- === -->
        <!-- Store Information -->
        <!-- === -->
        <s-section heading="Store Information">
            <s-text-field
              label="Store name"
              name="store-name"
              value="Puzzlify Store"
              placeholder="Enter store name"
            ></s-text-field>
            <s-text-field
              label="Business address"
              name="business-address"
              value="123 Main St, Anytown, USA"
              placeholder="Enter business address"
            ></s-text-field>
            <s-text-field
              label="Store phone"
              name="store-phone"
              value="+1 (555) 123-4567"
              placeholder="Enter phone number"
            ></s-text-field>
            <s-choice-list label="Primary currency" name="currency">
              <s-choice label="US Dollar ($)" value="usd" selected></s-choice>
              <s-choice label="Canadian Dollar (CAD)" value="cad"></s-choice>
              <s-choice label="Euro (€)" value="eur"></s-choice>
            </s-choice-list>
        </s-section>
        <!-- === -->
        <!-- Notifications -->
        <!-- === -->
        <s-section heading="Notifications">
            <s-select label="Notification frequency" name="notification-frequency">
              <s-option value="immediately" selected>Immediately</s-option>
              <s-option value="hourly">Hourly digest</s-option>
              <s-option value="daily">Daily digest</s-option>
            </s-select>
            <s-choice-list label="Notification types" name="notifications-type" multiple>
              <s-choice label="New order notifications" value="new-order" selected></s-choice>
              <s-choice label="Low stock alerts" value="low-stock"></s-choice>
              <s-choice label="Customer review notifications" value="customer-review"></s-choice>
              <s-choice label="Shipping updates" value="shipping-updates"></s-choice>
            </s-choice-list>
        </s-section>
        <!-- === -->
        <!-- Preferences -->
        <!-- === -->
        <s-section heading="Preferences">
          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
            <s-clickable
              padding="small-100"
              href="/app/settings/shipping"
              accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
            >
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Shipping & fulfillment</s-heading>
                  <s-paragraph color="subdued">
                    Shipping methods, rates, zones, and fulfillment preferences.
                  </s-paragraph>
                </s-box>
                <s-icon type="chevron-right"></s-icon>
              </s-grid>
            </s-clickable>
            <s-box paddingInline="small-100">
              <s-divider></s-divider>
            </s-box>
            <s-clickable
              padding="small-100"
              href="/app/settings/products_catalog"
              accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
            >
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Products & catalog</s-heading>
                  <s-paragraph color="subdued">
                    Product defaults, customer experience, and catalog display options.
                  </s-paragraph>
                </s-box>
                <s-icon type="chevron-right"></s-icon>
              </s-grid>
            </s-clickable>
            <s-box paddingInline="small-100">
              <s-divider></s-divider>
            </s-box>
            <s-clickable
              padding="small-100"
              href="/app/settings/customer_support"
              accessibilityLabel="Manage customer support settings and help resources"
            >
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Customer support</s-heading>
                  <s-paragraph color="subdued">
                    Support settings, help resources, and customer service tools.
                  </s-paragraph>
                </s-box>
                <s-icon type="chevron-right"></s-icon>
              </s-grid>
            </s-clickable>
          </s-stack>
        </s-section>
        <!-- === -->
        <!-- Tools -->
        <!-- === -->
        <s-section heading="Tools">
          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
            <s-box padding="small-100">
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Reset app settings</s-heading>
                  <s-paragraph color="subdued">
                    Reset all settings to their default values. This action cannot be undone.
                  </s-paragraph>
                </s-box>
                <s-button tone="critical">Reset</s-button>
              </s-grid>
            </s-box>
            <s-box paddingInline="small-100">
              <s-divider></s-divider>
            </s-box>
            <s-box padding="small-100">
              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
                <s-box>
                  <s-heading>Export settings</s-heading>
                  <s-paragraph color="subdued">
                    Download a backup of all your current settings.
                  </s-paragraph>
                </s-box>
                <s-button>Export</s-button>
              </s-grid>
            </s-box>
          </s-stack>
        </s-section>
      </s-page>
    </form>
  </body>
</html>

Anchor to relatedRelated

RequirementsBuilt for Shopify