App home and onboarding

Your App Home page is the first page that merchants see, and it should provide daily value to them.

Anchor to DesignDesign

Design the App Home page in a way that quickly answers any questions that merchants might have and conveys the actions that are available to them. See the Homepage pattern for more information.

The Puzzlify App Home page with different sections inviting merchants to either upload an image or start creating a puzzle.

Anchor to PurposePurpose

App Home pages take many forms. A good home page should do the following:

Provide status updates.
Enable merchants to respond to immediate needs.
Provide clear call-to-action (CTA) buttons so that merchants can easily see the actions that they can perform in the app.

Various elements that are suitable for a homepage, such as a card with an action button, a dismissible informational banner, and a graph.

Your App Home page should provide merchants with quick statistics, status updates, or information that's immediately actionable.

Providing stellar customer support is a great way to set your app and service apart from the rest. Place your support CTAs in a place that's consistent and discoverable. Be as responsive to merchant questions as you can.

Some highlighted examples of support CTAs in the Puzzlify app.

Place your support CTAs consistently, but also out of the way of merchants. You can use an item in the Polaris App nav, place a link in your page footers, or use a floating action button.

Anchor to OnboardingOnboarding

Onboarding is the process that merchants follow to set up your app. The onboarding process is crucial to merchant success.

Anchor to Onboarding purposeOnboarding purpose

Onboarding should welcome merchants and make them eager to use your app or feature. Onboarding makes merchants comfortable and sets their expectations as soon as they start using your app.

Merchants should feel like they know what to do in your app after they've completed the onboarding experience. This leads to higher usage retention. Refer to the Polaris Setup guide pattern.

Onboarding screen welcoming merchants to the Puzzlify app, with onboarding steps presented in separate, dismissible cards. Each card has a title, body text, and a button that merchants can click to complete the onboarding step and learn about the app.

Onboarding is about sharing your app's benefits and quickly getting merchants ready to use your app.

Onboarding screen welcoming merchants to the Puzzlify editor, with onboarding steps presented in separate, dismissible cards. Each card has a title, body text, and a button that merchants can click to complete the onboarding step.

Onboarding should be brief and direct. Provide clear instructions and guide merchants to completion.

Anchor to GuidanceGuidance

Onboarding experiences efficiently guide merchants through your app's features so that merchants don't have to discover them on their own.

A great onboarding experience presents the basics of your app to merchants as quickly as possible.

Onboarding screen showing three different options to choose in the Puzzlify puzzle editor. There are options to edit an existing puzzle, start from a template, and start from scratch.

Onboarding experiences can also come in the form of a selection of actions that are quick and easy for merchants to understand.

A dismissible onboarding screen with a primary button to proceed and a secondary button that's labeled 'Remind me later'.

In some cases, complex onboarding can take longer than expected. Give merchants the option to complete the onboarding at a later time to avoid stopping their workflow.

An onboarding interface with steps, checkboxes, and a progress bar indicating how far along the user is in the process.

While there isn't a ready-made Polaris pattern for setup guides, you can compose your own with Polaris components and look for examples across the Shopify admin. A good setup acts as a quick start, with discrete steps that are automatically marked as complete. Including a progress indicator is another good practice that provides encouraging feedback to merchants.

A dismissible onboarding step that asks merchants to name their first puzzle, with a primary button that's labeled 'Create puzzle'.

Request information from merchants only if it's necessary.

An onboarding screen with the 'X' icon for dismissing the screen highlighted in the upper right corner.

If your onboarding isn't essential, then make it dismissible using a Polaris Cancel icon.

An onboarding screen showing that the merchant is currently on step six out of eight.

Avoid more than five steps in your onboarding process, as additional steps can lead to merchant drop off.

Was this page helpful?