Skip to main content

Homepage

The app URL specified in the Partner Dashboard should point to your app homepage. The home page of your app is the first thing merchants will see, and it should provide daily value to them. Design the page to provide status updates and show merchants what actions they can take.

Used toExamples
Teach merchants how to use the appOnboarding, how-to guides
Display app functionalitiesCall-to-actions to app features, resource tables
Show updatesStatus banners, company news

Preview of the homepage pattern

This pattern uses Badge, Banner, Box, Button, Checkbox, Clickable, Divider, Grid, Heading, Image, Link, Paragraph, Section, Stack, and Text components.

Design guidelines

Your app home page should be designed to provide users with relevant, timely information like quick statistics, status updates, or information that’s immediately actionable.

Onboarding

The onboarding experience quickly introduces users to your app's essential features. A good onboarding should be self-guided, easy to follow and make users feel they understand how the app works after finishing it. If the onboarding is long or complex, give users the option to complete it at a later time to avoid stopping their workflow.

  • Onboarding must be brief and direct. Provide clear instructions and guide users to completion
  • Only request information from users if it's necessary
  • If your onboarding isn't essential, then make it dismissible
  • Don't have more than five steps in your onboarding process. This can lead users to drop off and not use your app

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?

Homepage

// ===
// Home page pattern
// ===

import React, { useState } from "react";

export default function HomePage() {
const [visible, setVisible] = useState({
banner: true,
setupGuide: true,
calloutCard: true,
featuredApps: true,
});
const [expanded, setExpanded] = useState({
setupGuide: true,
step1: false,
step2: false,
step3: false,
});
const [progress, setProgress] = useState(0);
return (
<s-page inlineSize="small">
{/* === */}
{/* Title Bar */}
{/* The ui-title-bar on the homepage should not have a title attribute */}
{/* Note: ui-title-bar requires AppBridge to render correctly */}
{/* === */}
<ui-title-bar>
<button variant="primary">Create puzzle</button>
<section>
<button>Browse templates</button>
<button>Import image</button>
</section>
</ui-title-bar>

{/* === */}

Anchor to relatedRelated

RequirementsBuilt for Shopify