patterns/app-settings-layout

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

App settings layout pattern structure

The app settings layout pattern uses a two-column design on medium and larger screens. The left column contains glanceable labels and descriptions to help merchants scan and find settings. The right column groups settings in cards to make configuration easier. On smaller screens, this becomes a single-column layout.

App settings layout uses BlockStack, Card, InlineGrid, and Box components

The app settings layout pattern is built using four layout components: BlockStack for vertical stacking, Card for grouping settings, InlineGrid for creating the two-column layout, and Box for sectioning and padding.

App settings layout responsive columns configuration

The InlineGrid component is configured with columns={{xs: '1fr', md: '2fr 5fr'}} to create a single column on extra small screens and a two-column layout on medium screens and above. The left column takes 2fr and the right column takes 5fr of the available space.

App settings layout padding for responsive design

The Box component (left column section) applies paddingInlineStart and paddingInlineEnd of 400 units on extra small and small screens, and 0 on medium screens and above.

App settings layout gap spacing

The BlockStack wrapping the entire layout uses gap={{xs: '800', sm: '400'}}, creating larger gaps between sections on extra small screens (800) and smaller gaps on small screens and above (400). The InlineGrid within uses gap='400'.

App settings layout Card rounded styling

The Card component in the right column uses roundedAbove='sm', which means the card corners are rounded on small screens and above.

App settings layout use case

The app settings layout pattern is used specifically for finding and updating individual app settings within the Shopify admin.

App settings layout guidance: include descriptions only when helpful

Descriptions for settings should only be included when they are helpful. Avoid including unnecessary descriptions in the left column.

App settings layout guidance: place grouped settings within cards

Settings that belong together should be grouped within Card components in the right column.

App settings layout guidance: stack setting groups vertically

All setting groups should be stacked vertically on the page, not arranged in other layouts.

App settings layout example code

function AppSettingsLayoutExample() { const {smUp} = useBreakpoints(); return ( <Page divider primaryAction={{content: 'View on your store', disabled: true}} secondaryActions={[ { content: 'Duplicate', accessibilityLabel: 'Secondary action label', onAction: () => alert('Duplicate action'), }, ]} > <BlockStack gap={{xs: '800', sm: '400'}}> <InlineGrid columns={{xs: '1fr', md: '2fr 5fr'}} gap="400"> <Box as="section" paddingInlineStart={{xs: 400, sm: 0}} paddingInlineEnd={{xs: 400, sm: 0}} > <BlockStack gap="400"> <Text as="h3" variant="headingMd"> InterJambs </Text> <Text as="p" variant="bodyMd"> Interjambs are the rounded protruding bits of your puzzlie piece </Text> </BlockStack> </Box> <Card roundedAbove="sm"> <BlockStack gap="400"> <TextField label="Interjamb style" /> <TextField label="Interjamb ratio" /> </BlockStack> </Card> </InlineGrid> {smUp ? <Divider /> : null} <InlineGrid columns={{xs: '1fr', md: '2fr 5fr'}} gap="400"> <Box as="section" paddingInlineStart={{xs: 400, sm: 0}} paddingInlineEnd={{xs: 400, sm: 0}} > <BlockStack gap="400"> <Text as="h3" variant="headingMd"> Dimensions </Text> <Text as="p" variant="bodyMd"> Interjambs are the rounded protruding bits of your puzzlie piece </Text> </BlockStack> </Box> <Card roundedAbove="sm"> <BlockStack gap="400"> <TextField label="Horizontal" /> <TextField label="Interjamb ratio" /> </BlockStack> </Card> </InlineGrid> </BlockStack> </Page> ); }

Layout.Section oneHalf prop replaced with variant

The Layout.Section component's oneHalf boolean prop is replaced with variant="oneHalf". For example, <Layout.Section oneHalf> becomes <Layout.Section variant="oneHalf">.

Layout.Section fullWidth prop replaced with variant

The Layout.Section component's fullWidth boolean prop is replaced with variant="fullWidth". For example, <Layout.Section fullWidth> becomes <Layout.Section variant="fullWidth">.

Layout.Section secondary prop replaced with variant

The Layout.Section component's secondary boolean prop is replaced with variant="oneThird". For example, <Layout.Section secondary> becomes <Layout.Section variant="oneThird">.

Give your agent this brain