Create a settings page

You've created an onboarding page for merchants. You don't want merchants to see this page if they've completed onboarding. Instead, you want the channel app to resurface information from the onboarding flow on a settings page. The settings page will include the marketplace requirements and terms and conditions.

In this tutorial, you'll provide a Settings page in your channel app for merchants who have completed onboarding, which they can navigate in the Shopify admin.

A gif of the settings page in a channel app with a collapsible requirements checklist

What you'll learn

After finishing this tutorial, you'll know how to do the following:

  • Support a completed state, for a checklist

  • Build a settings page that fetches marketplace requirements data

  • Redirect users away from the settings page if they haven't completed onboarding

Requirements

You've completed the Build an onboarding page tutorial.

Step 1: Update the checklist component

In this step, you'll update the checklist component to support a completed state, for the settings page.

In adminComponents/checklist.js update the checklist component to accept a completeLabel.

If a complete label is provided, it will return a Channels UI Checklist component with the completeLabel. Otherwise, it will return an OnboardingChecklist. For consistency between the onboarding and settings pages, in both cases you'l render the same set of items.

Step 2: Build the settings page

  1. In pages/admin, create a settings.js file.

  2. In pages/admin/settings.js, add a settings page query that fetches the eligibility requirements data.

  3. Add a LoadingState component that resembles the layout of the settings page.

  4. Add a default Settings component that renders a SettingsPage containing the requirements checklist and a link to your marketplace terms.

  5. Update the Settings component to redirect to the channel homepage if onboarding is not completed.

    Merchants shouldn't be able to access the settings page if they have not yet completed onboarding. You'll create the channel homepage in a subsequent tutorial.

  6. Update the Settings component to create a ChannelMenu with overview and settings items, with the settings item marked as active.

If onboarding is complete, merchants should be able to access the settings page at the /admin/settings path in your channel app. The page should look something like the following:

An image of the settings page in a channel app

Next steps