Skip to main content

Details

The details page allows merchants to view, create and edit objects. Use the right column to provide editable fields, and the right column for supporting information such as status, metadata, and summaries.

Used toExamples
View, edit and create objectsDiscounts, shipping labels, newsletters, templates.

Preview of the details page pattern

This pattern uses Badge, Box, Button, Grid, Heading, Image, Link, MoneyField, NumberField, SearchField, Section, Select, Stack, Switch, Table, TextArea, TextField, UnorderedList, and URLField components.

Design guidelines

Design details pages that enable users to create, view, and edit resource objects.

Navigation

  • Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.
  • Use tabs sparingly for secondary navigation purposes when the nav menu isn't sufficient.
    • Clicking a tab should only change the content below it, not above.
    • Tabs should never wrap onto multiple lines.
    • Navigating between tabs shouldn't cause the tabs to change position or move.
    • Offer users clear and predictable action labels.

Layout

  • 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.
  • Always use the default width. Full width tends to waste space and make the page harder to parse
  • In the primary column: Put information that defines the resource object
  • In the secondary column: Put supporting information such as status, metadata, and summaries
  • Arrange content in order of importance
  • Group similar content in the same card
  • Place unique page actions at the top of the actions list and typical object actions at the bottom

Forms

  • For more than five inputs, use sections with titles in one card or use multiple cards with headers.
  • Form inputs should be saved using the App Bridge Contextual Save Bar API. This also applies to forms within max modals. Continuous data validation or auto-save for forms is consistent with the standard Shopify admin save UX.
Was this section helpful?

Details

// ===
// Details page pattern
// ===

export default function DetailsPage() {
const handleFormReset = (event) => {
console.log("Handle discarded changes if necessary");
};

const handleFormSubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const formEntries = Object.fromEntries(formData);
console.log("Form data", formEntries);
};

return (
<form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
<s-page>
{/* === */}
{/* Title Bar */}
{/* Note: ui-title-bar requires AppBridge to render correctly */}
{/* === */}
<ui-title-bar title="Mountain view">
<button variant="breadcrumb" href="/app/puzzles">
Puzzles
</button>
<button>Duplicate</button>
<button tone="critical">Delete</button>
</ui-title-bar>
{/* === */}
{/* Puzzle information */}
{/* === */}
<s-section heading="Puzzle information">
<s-grid gap="base">
<s-text-field

Anchor to relatedRelated

RequirementsBuilt for Shopify