Account connection

Many apps integrate with external services like marketing platforms, sales channels, or analytics providers. The account connection composition gives merchants a clear interface to connect or disconnect these integrations.

Display connection status, the connected account name, and provide actions to connect or disconnect. Place this composition in your settings or on a dedicated integrations page.

Anchor to ExamplesExamples

Anchor to Display connection status with connect button and termsDisplay connection status with connect button and terms

Merchants need to connect or disconnect external services (e.g. marketing platforms, sales channels) from your app. This pattern displays account connection layout with a connect button and terms. The grid aligns account information and button, the section provides padding, and the terms text below describes the connection agreement.

Preview

<s-section>

<s-stack gap="base">

<s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">

<s-grid-item>

<s-stack>

<s-heading>Puzzlify</s-heading>

<s-text color="subdued">No account connected</s-text>

</s-stack>

</s-grid-item>

<s-grid-item>

<s-button variant="primary">Connect</s-button>

</s-grid-item>

</s-grid>

<s-text>

By clicking Connect, you agree to accept Sample App's terms and

conditions. You'll pay a commission rate of 15% on sales made through

Sample App.

</s-text>

</s-stack>

</s-section>

<s-section>

<s-stack gap="base">

<s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">

<s-grid-item>

<s-stack>

<s-heading>Puzzlify</s-heading>

<s-text color="subdued">No account connected</s-text>

</s-stack>

</s-grid-item>

<s-grid-item>

<s-button variant="primary">Connect</s-button>

</s-grid-item>

</s-grid>

<s-text>By clicking Connect, you agree to accept Sample App's terms and conditions. You'll pay a commission rate of 15% on sales made through Sample App.</s-text>

</s-stack>

</s-section>

jsx

<s-section>
  <s-stack gap="base">
    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
      <s-grid-item>
        <s-stack>
          <s-heading>Puzzlify</s-heading>
          <s-text color="subdued">No account connected</s-text>
        </s-stack>
      </s-grid-item>
      <s-grid-item>
        <s-button variant="primary">Connect</s-button>
      </s-grid-item>
    </s-grid>
    <s-text>
      By clicking Connect, you agree to accept Sample App's terms and
      conditions. You'll pay a commission rate of 15% on sales made through
      Sample App.
    </s-text>
  </s-stack>
</s-section>

html

<s-section>
  <s-stack gap="base">
  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
    <s-grid-item>
      <s-stack>
        <s-heading>Puzzlify</s-heading>
        <s-text color="subdued">No account connected</s-text>
      </s-stack>
    </s-grid-item>
    <s-grid-item>
      <s-button variant="primary">Connect</s-button>
    </s-grid-item>
  </s-grid>
  <s-text>By clicking Connect, you agree to accept Sample App's terms and conditions. You'll pay a commission rate of 15% on sales made through Sample App.</s-text>
</s-stack>
</s-section>

Anchor to Confirm disconnect with ModalConfirm disconnect with Modal

Use the Modal API to confirm account disconnection before removing the integration.

Preview

<s-section>

<s-stack gap="base">

<s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">

<s-grid-item>

<s-stack>

<s-heading>Puzzlify</s-heading>

<s-text color="subdued">Connected as puzzles@example.com</s-text>

</s-stack>

</s-grid-item>

<s-grid-item>

<s-button

variant="secondary"

tone="critical"

commandFor="disconnect-modal"

command="--show"

Disconnect

</s-button>

</s-grid-item>

</s-grid>

<s-text color="subdued">

Your account has been connected since January 15, 2025.

</s-text>

</s-stack>

<s-modal id="disconnect-modal" heading="Disconnect account?">

<s-stack direction="block" gap="base">

<s-text>

Are you sure you want to disconnect your Puzzlify account? You'll need to reconnect to continue syncing data.

</s-text>

<s-banner tone="warning">

<s-text>

Any pending syncs will be cancelled and your integration settings will be removed.

</s-text>

</s-banner>

</s-stack>

<s-button

slot="primary-action"

variant="primary"

tone="critical"

commandFor="disconnect-modal"

command="--hide"

Disconnect

</s-button>

<s-button

slot="secondary-actions"

commandFor="disconnect-modal"

command="--hide"

Cancel

</s-button>

</s-modal>

</s-section>

<s-section>

<s-stack gap="base">

<s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">

<s-grid-item>

<s-stack>

<s-heading>Puzzlify</s-heading>

<s-text color="subdued">Connected as puzzles@example.com</s-text>

</s-stack>

</s-grid-item>

<s-grid-item>

<s-button

variant="secondary"

tone="critical"

commandFor="disconnect-modal"

command="--show"

Disconnect

</s-button>

</s-grid-item>

</s-grid>

<s-text color="subdued">

Your account has been connected since January 15, 2025.

</s-text>

</s-stack>

<s-modal id="disconnect-modal" heading="Disconnect account?">

<s-stack direction="block" gap="base">

<s-text>

Are you sure you want to disconnect your Puzzlify account? You'll need to reconnect to continue syncing data.

</s-text>

<s-banner tone="warning">

<s-text>

Any pending syncs will be cancelled and your integration settings will be removed.

</s-text>

</s-banner>

</s-stack>

<s-button

slot="primary-action"

variant="primary"

tone="critical"

commandFor="disconnect-modal"

command="--hide"

Disconnect

</s-button>

<s-button

slot="secondary-actions"

commandFor="disconnect-modal"

command="--hide"

Cancel

</s-button>

</s-modal>

</s-section>

jsx

<s-section>
  <s-stack gap="base">
    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
      <s-grid-item>
        <s-stack>
          <s-heading>Puzzlify</s-heading>
          <s-text color="subdued">Connected as puzzles@example.com</s-text>
        </s-stack>
      </s-grid-item>
      <s-grid-item>
        <s-button
          variant="secondary"
          tone="critical"
          commandFor="disconnect-modal"
          command="--show"
        >
          Disconnect
        </s-button>
      </s-grid-item>
    </s-grid>
    <s-text color="subdued">
      Your account has been connected since January 15, 2025.
    </s-text>
  </s-stack>

  <s-modal id="disconnect-modal" heading="Disconnect account?">
    <s-stack direction="block" gap="base">
      <s-text>
        Are you sure you want to disconnect your Puzzlify account? You'll need to reconnect to continue syncing data.
      </s-text>
      <s-banner tone="warning">
        <s-text>
          Any pending syncs will be cancelled and your integration settings will be removed.
        </s-text>
      </s-banner>
    </s-stack>
    <s-button
      slot="primary-action"
      variant="primary"
      tone="critical"
      commandFor="disconnect-modal"
      command="--hide"
    >
      Disconnect
    </s-button>
    <s-button
      slot="secondary-actions"
      commandFor="disconnect-modal"
      command="--hide"
    >
      Cancel
    </s-button>
  </s-modal>
</s-section>

html

<s-section>
  <s-stack gap="base">
    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
      <s-grid-item>
        <s-stack>
          <s-heading>Puzzlify</s-heading>
          <s-text color="subdued">Connected as puzzles@example.com</s-text>
        </s-stack>
      </s-grid-item>
      <s-grid-item>
        <s-button
          variant="secondary"
          tone="critical"
          commandFor="disconnect-modal"
          command="--show"
        >
          Disconnect
        </s-button>
      </s-grid-item>
    </s-grid>
    <s-text color="subdued">
      Your account has been connected since January 15, 2025.
    </s-text>
  </s-stack>

  <s-modal id="disconnect-modal" heading="Disconnect account?">
    <s-stack direction="block" gap="base">
      <s-text>
        Are you sure you want to disconnect your Puzzlify account? You'll need to reconnect to continue syncing data.
      </s-text>
      <s-banner tone="warning">
        <s-text>
          Any pending syncs will be cancelled and your integration settings will be removed.
        </s-text>
      </s-banner>
    </s-stack>
    <s-button
      slot="primary-action"
      variant="primary"
      tone="critical"
      commandFor="disconnect-modal"
      command="--hide"
    >
      Disconnect
    </s-button>
    <s-button
      slot="secondary-actions"
      commandFor="disconnect-modal"
      command="--hide"
    >
      Cancel
    </s-button>
  </s-modal>
</s-section>

Anchor to Show connection feedback with ToastShow connection feedback with Toast

Use the Toast API to show feedback when an account is connected or disconnected.

<s-section>

<s-stack gap="base">

<s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">

<s-grid-item>

<s-stack>

<s-heading>Puzzlify</s-heading>

<s-text color="subdued">No account connected</s-text>

</s-stack>

</s-grid-item>

<s-grid-item>

<s-button

variant="primary"

onClick={() => {

shopify.toast.show('Account connected successfully');

}}

Connect

</s-button>

</s-grid-item>

</s-grid>

<s-text>

By clicking Connect, you agree to accept Sample App's terms and

conditions. You'll pay a commission rate of 15% on sales made through

Sample App.

</s-text>

</s-stack>

</s-section>

<s-section>

<s-stack gap="base">

<s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">

<s-grid-item>

<s-stack>

<s-heading>Puzzlify</s-heading>

<s-text color="subdued">No account connected</s-text>

</s-stack>

</s-grid-item>

<s-grid-item>

<s-button variant="primary">Connect</s-button>

</s-grid-item>

</s-grid>

<s-text>

By clicking Connect, you agree to accept Sample App's terms and

conditions. You'll pay a commission rate of 15% on sales made through

Sample App.

</s-text>

</s-stack>

</s-section>

<!--

Connect handler:

shopify.toast.show('Account connected successfully');

-->

jsx

<s-section>
  <s-stack gap="base">
    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
      <s-grid-item>
        <s-stack>
          <s-heading>Puzzlify</s-heading>
          <s-text color="subdued">No account connected</s-text>
        </s-stack>
      </s-grid-item>
      <s-grid-item>
        <s-button
          variant="primary"
          onClick={() => {
            shopify.toast.show('Account connected successfully');
          }}
        >
          Connect
        </s-button>
      </s-grid-item>
    </s-grid>
    <s-text>
      By clicking Connect, you agree to accept Sample App's terms and
      conditions. You'll pay a commission rate of 15% on sales made through
      Sample App.
    </s-text>
  </s-stack>
</s-section>

html

<s-section>
  <s-stack gap="base">
    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
      <s-grid-item>
        <s-stack>
          <s-heading>Puzzlify</s-heading>
          <s-text color="subdued">No account connected</s-text>
        </s-stack>
      </s-grid-item>
      <s-grid-item>
        <s-button variant="primary">Connect</s-button>
      </s-grid-item>
    </s-grid>
    <s-text>
      By clicking Connect, you agree to accept Sample App's terms and
      conditions. You'll pay a commission rate of 15% on sales made through
      Sample App.
    </s-text>
  </s-stack>
</s-section>

<!-- 
Connect handler:
shopify.toast.show('Account connected successfully');
-->

Was this page helpful?