---
title: Setup guide
description: >
  Setup guide provides an interactive checklist to guide merchants through
  essential onboarding or configuration tasks. Progress is tracked visually,
  helping merchants complete all required steps and understand what remains.
    | Used to | Examples |
    | --- | --- |
    | Onboard merchants | Initial app setup |
    | Track completion of multi-step processes | Necessary setup steps |
    ---
api_name: app-home
source_url:
  html: 'https://shopify.dev/docs/api/app-home/patterns/compositions/setup-guide'
  md: 'https://shopify.dev/docs/api/app-home/patterns/compositions/setup-guide.md'
---

# Setup guide

Setup guide provides an interactive checklist to guide merchants through essential onboarding or configuration tasks. Progress is tracked visually, helping merchants complete all required steps and understand what remains.

| Used to | Examples |
| - | - |
| Onboard merchants | Initial app setup |
| Track completion of multi-step processes | Necessary setup steps |

***

Examples

### Examples

* #### Setup guide

  ##### jsx

  ```jsx
  <s-section>
    <s-grid gap="base">
      <s-grid gap="small-200">
        <s-grid
          gridTemplateColumns="1fr auto auto"
          gap="small-300"
          alignItems="center"
        >
          <s-heading>Setup Guide</s-heading>
          <s-button
            accessibilityLabel="Dismiss Guide"
            variant="tertiary"
            tone="neutral"
            icon="x"
           />
          <s-button
            accessibilityLabel="Toggle setup guide"
            variant="tertiary"
            tone="neutral"
            icon="chevron-up"
           />
        </s-grid>
        <s-paragraph>
          Use this personalized guide to get your store ready for sales.
        </s-paragraph>
        <s-paragraph color="subdued">0 out of 3 steps completed</s-paragraph>
      </s-grid>
      <s-box borderRadius="base" border="base" background="base">
        <s-box>
          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
            <s-checkbox label="Upload an image for your puzzle" />
            <s-button
              accessibilityLabel="Toggle step 1 details"
              variant="tertiary"
              icon="chevron-up"
             />
          </s-grid>
          <s-box padding="small" paddingBlockStart="none">
            <s-box padding="base" background="subdued" borderRadius="base">
              <s-grid
                gridTemplateColumns="1fr auto"
                gap="base"
                alignItems="center"
              >
                <s-grid gap="small-200">
                  <s-paragraph>
                    Start by uploading a high-quality image that will be used to
                    create your puzzle. For best results, use images that are at
                    least 1200x1200 pixels.
                  </s-paragraph>
                  <s-stack direction="inline" gap="small-200">
                    <s-button variant="primary">Upload image</s-button>
                    <s-button variant="tertiary" tone="neutral">
                      {" "}
                      Image requirements{" "}
                    </s-button>
                  </s-stack>
                </s-grid>
                <s-box maxBlockSize="80px" maxInlineSize="80px">
                  <s-image
                    src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
                    alt="Customize checkout illustration"
                   />
                </s-box>
              </s-grid>
            </s-box>
          </s-box>
        </s-box>
        <s-divider />
        <s-box>
          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
            <s-checkbox label="Choose a puzzle template" />
            <s-button
              accessibilityLabel="Toggle step 2 details"
              variant="tertiary"
              icon="chevron-down"
             />
          </s-grid>
          <s-box
            padding="small"
            paddingBlockStart="none"
           />
        </s-box>
        <s-divider />
        <s-box>
          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
            <s-checkbox label="Customize puzzle piece shapes" />
            <s-button
              accessibilityLabel="Toggle step 3 details"
              variant="tertiary"
              icon="chevron-down"
             />
          </s-grid>
          <s-box
            padding="small"
            paddingBlockStart="none"
           />
        </s-box>
      </s-box>
    </s-grid>
  </s-section>
  ```

  ##### html

  ```html
  <s-section>
    <s-grid gap="base">
      <s-grid gap="small-200">
        <s-grid gridTemplateColumns="1fr auto auto" gap="small-300" alignItems="center">
          <s-heading>Setup Guide</s-heading>
          <s-button
            accessibilityLabel="Dismiss Guide"
            variant="tertiary"
            tone="neutral"
            icon="x"
          ></s-button>
          <s-button
            accessibilityLabel="Toggle setup guide"
            variant="tertiary"
            tone="neutral"
            icon="chevron-up"
          ></s-button>
        </s-grid>
        <s-paragraph>
          Use this personalized guide to get your store ready for sales.
        </s-paragraph>
          <s-paragraph tone="subdued">0 out of 3 steps completed</s-paragraph>
      </s-grid>
      <s-box borderRadius="base" border="base" background="base">
        <s-box>
            <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
              <s-checkbox
                label="Upload an image for your puzzle"
              ></s-checkbox>
              <s-button
                accessibilityLabel="Toggle step 1 details"
                variant="tertiary"
                icon="chevron-up"
              ></s-button>
            </s-grid>
          <s-box padding="small" paddingBlockStart="none">
            <s-box padding="base" background="subdued" borderRadius="base">
              <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
                <s-grid gap="small-200">
                  <s-paragraph>
                    Start by uploading a high-quality image that will be used to create your
                    puzzle. For best results, use images that are at least 1200x1200 pixels.
                  </s-paragraph>
                  <s-stack direction="inline" gap="small-200">
                    <s-button variant="primary">
                      Upload image
                    </s-button>
                    <s-button variant="tertiary" tone="neutral"> Image requirements </s-button>
                  </s-stack>
                </s-grid>
                <s-box maxBlockSize="80px" maxInlineSize="80px">
                  <s-image
                    src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
                    alt="Customize checkout illustration"
                  ></s-image>
                </s-box>
              </s-grid>
            </s-box>
          </s-box>
        </s-box>
        <s-divider></s-divider>
        <s-box>
            <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
              <s-checkbox
                label="Choose a puzzle template"
              ></s-checkbox>
              <s-button
                accessibilityLabel="Toggle step 2 details"
                variant="tertiary"
                icon="chevron-down"
              ></s-button>
            </s-grid>
          <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
        </s-box>
        <s-divider></s-divider>
        <s-box>
            <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
              <s-checkbox
                label="Customize puzzle piece shapes"
              ></s-checkbox>
              <s-button
                accessibilityLabel="Toggle step 3 details"
                variant="tertiary"
                icon="chevron-down"
              ></s-button>
            </s-grid>
          <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
        </s-box>
      </s-box>
    </s-grid>
  </s-section>
  ```

## Related

[Requirements - Built for Shopify](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements)