Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Settings and templates',
defaultExample: {
image: 'adminaction-default.png',
description:
'Sync product data to a warehouse system from a modal with primary and cancel actions. This example uses `AdminAction` with `primaryAction` and `secondaryAction` [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) props to confirm or dismiss the sync.',
codeblock: {
title: 'Configure action modal with buttons',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Settings and templates',
defaultExample: {
image: 'adminblock-default.png',
description:
"Show a warehouse connection status, sync timestamp, and inventory count in a product details block. This example renders an `AdminBlock` titled 'Warehouse integration' with a `success` tone [Badge](/docs/api/admin-extensions/{API_VERSION}/components/feedback-and-status-indicators/badge) and status lines inside a [BlockStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/blockstack).",
codeblock: {
title: 'Display warehouse status block',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Settings and templates',
defaultExample: {
image: 'adminprintaction-default.png',
description:
'Generate a printable document from a product details page. This example configures an `AdminPrintAction` with a `src` prop that builds a packing slip URL from the selected product ID, and shows a status message while the document loads.',
codeblock: {
title: 'Generate product packing slip',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Feedback and status indicators',
defaultExample: {
image: 'badge-default.png',
description:
'Indicate fulfilled, partially fulfilled, and unfulfilled order states with color-coded labels. This example renders three `Badge` components using `success`, `warning`, and `critical` tones to visually distinguish each state.',
codeblock: {
title: 'Display order fulfillment status',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Feedback and status indicators',
defaultExample: {
image: 'banner-default.png',
description:
'Show a product sync failure with a retry action. This example renders a dismissible `Banner` with a `critical` tone, a primary action [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that retries the sync, and a message explaining the issue.',
codeblock: {
title: 'Warn about API sync failure',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Layout and structure',
defaultExample: {
image: 'blockstack-default.png',
description:
'Stack a sync status label, two detail lines, and an action button in a vertical column with consistent spacing. This example uses `BlockStack` with the `gap` prop to control the vertical rhythm, and includes a secondary [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) for viewing the sync log.',
codeblock: {
title: 'Stack extension content vertically',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Layout and structure',
defaultExample: {
image: 'box-default.png',
description:
'Add padding around a warehouse slot name, aisle reference, and unit count. This example uses `Box` with `padding` inside a [BlockStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/blockstack) to inset the slot details from the heading above.',
codeblock: {
title: 'Create a padded content container',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Actions',
defaultExample: {
image: 'button-default.png',
description:
'Sync product data to a warehouse and close the action modal, or cancel. This example renders a `primary` `Button` that posts to a backend API and calls `close()`, alongside a `secondary` cancel button.',
codeblock: {
title: 'Sync product to backend',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'checkbox-default.png',
description:
'Toggle automatic inventory sync on or off. This example uses `Checkbox` with a `checked` state, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the setting and closes the modal.',
codeblock: {
title: 'Toggle feature settings',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'choicelist-default.png',
description:
'Pick a shipping speed from standard, express, and overnight radio options. This example renders a `ChoiceList` with three tiers as radio buttons, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the selected method.',
codeblock: {
title: 'Choose a shipping method',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'colorpicker-default.png',
description:
'Pick a product accent color from a visual selector and save it. This example uses `ColorPicker` to capture the selected hex value, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the color.',
codeblock: {
title: 'Select product accent color',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Settings and templates',
defaultExample: {
image: 'customersegmenttemplate-default',
description:
'Define a reusable customer segment for high-value repeat buyers. This example creates a `CustomerSegmentTemplate` with a `query` that filters by order count and total spend, plus a `title`, `description`, and `createdOn` date.',
codeblock: {
title: 'Create a repeat buyer segment template',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'datefield-default.png',
description:
'Schedule a product launch date and save it from an action modal. This example uses `DateField` to capture the date, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that schedules the launch.',
codeblock: {
title: 'Schedule product launch date',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'datepicker-default.png',
description:
'Schedule a promotion start date using an inline calendar. This example renders a `DatePicker` that captures the selected date, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that schedules the promotion.',
codeblock: {
title: 'Schedule promotion start date',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Layout and structure',
defaultExample: {
image: 'divider-default.png',
description:
'Separate a sync status summary from a recent changes list with a horizontal rule. This example places a `Divider` between two sections, each with its own [Heading](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/heading) and detail text.',
codeblock: {
title: 'Separate content sections',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'emailfield-default.png',
description:
'Set a low-stock notification email address and save it. This example uses `EmailField` to capture the address, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the notification email.',
codeblock: {
title: 'Collect notification email',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'form-default.png',
description:
'Submit a warehouse SKU and storage location, or cancel to close the modal. This example uses `Form` with `onSubmit` and `onReset` callbacks around two [TextField](/docs/api/admin-extensions/{API_VERSION}/components/forms/textfield) inputs, where `onReset` calls `close()` to dismiss the modal.',
codeblock: {
title: 'Submit product metadata form',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'form-default.png',
description:
'Build a settings page for a [Shopify Function](/docs/api/functions) that saves configuration as metafields. This example uses `FunctionSettings` with `applyMetafieldsChange` to save a validation rule name entered in a [TextField](/docs/api/admin-extensions/{API_VERSION}/components/forms/textfield).',
codeblock: {
title: 'Configure function validation settings',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Typography and content',
defaultExample: {
image: 'heading-default.png',
description:
'Add a title and description to a product analytics block. This example renders a `Heading` above descriptive [Text](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/text) inside a [BlockStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/blockstack).',
codeblock: {
title: 'Label extension sections',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Typography and content',
defaultExample: {
image: 'headinggroup-default.png',
description:
'Create a two-level title hierarchy for accessible screen reader navigation. This example uses `HeadingGroup` to nest a subsection under a parent [Heading](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/heading), so screen readers announce the correct levels.',
codeblock: {
title: 'Group related heading content',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Media and visuals',
defaultExample: {
image: 'icon-default.png',
description:
'Pair status icons with text labels to indicate sync success and pricing errors. This example uses `Icon` with `CircleTickMajor` and `CircleAlertMajor` names inside an [InlineStack](/docs/api/admin-extensions/{API_VERSION}/components/layout-and-structure/inlinestack), with `accessibilityLabel` props for screen readers.',
codeblock: {
title: 'Show action status indicators',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Media and visuals',
defaultExample: {
image: 'image-default.png',
description:
"Fetch a product's featured image from the [GraphQL Admin API](/docs/api/admin-graphql/) and show it with alt text. This example queries the `product.featuredImage` field and displays the result in an `Image` component with an `accessibilityLabel` that falls back to the product title.",
codeblock: {
title: 'Display product featured image',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Layout and structure',
defaultExample: {
image: 'inlinestack-default.png',
description:
'Arrange metadata labels, values, and badges in a horizontal row. This example uses `InlineStack` with the `gap` prop to space product IDs, SKUs, weights, and a status [Badge](/docs/api/admin-extensions/{API_VERSION}/components/feedback-and-status-indicators/badge) side by side.',
codeblock: {
title: 'Arrange metadata in rows',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Actions',
defaultExample: {
image: 'link-default.png',
description:
'Navigate to extension settings and a sync dashboard without leaving the admin. This example uses `Link` with `extension://` URLs to open internal extension pages from a product details block.',
codeblock: {
title: 'Navigate to app pages',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'moneyfield-default.png',
description:
'Set a cost-per-item price in USD and save it from an action modal. This example uses `MoneyField` with `currencyCode` set to USD, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the price and closes the modal.',
codeblock: {
title: 'Set product cost price',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'numberfield-default.png',
description:
'Specify a restock quantity between 1 and 10,000. This example uses `NumberField` with `min` and `max` props to constrain the input, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that submits the restock and closes the modal.',
codeblock: {
title: 'Set inventory restock quantity',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Typography and content',
defaultExample: {
image: 'paragraph-default.png',
description:
'Show a sync status message with bolded key figures like the completion time and field count. This example nests [Text](/docs/api/admin-extensions/{API_VERSION}/components/typography-and-content/text) with `fontWeight` props inside a `Paragraph` to emphasize specific details within a sentence.',
codeblock: {
title: 'Display product sync summary',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'passwordfield-default.png',
description:
'Store a warehouse API key without exposing it on screen. This example uses `PasswordField` to mask the input, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the credentials.',
codeblock: {
title: 'Enter API credentials securely',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Actions',
defaultExample: {
image: 'pressable-default.png',
description:
'Trigger an inventory sync or a data export from icon-labeled action rows. This example uses `Pressable` with `onPress` callbacks and [Icon](/docs/api/admin-extensions/{API_VERSION}/components/media-and-visuals/icon) labels to create clickable rows that call backend APIs without visible button styling.',
codeblock: {
title: 'Build custom action rows',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Feedback and status indicators',
defaultExample: {
image: 'progressindicator-default.png',
description:
'Show a loading indicator while querying product data from the [GraphQL Admin API](/docs/api/admin-graphql/), then replace it with the results. This example uses `ProgressIndicator` with `size` and `accessibilityLabel` props during the query, then displays the product title and inventory count.',
codeblock: {
title: 'Show loading during API query',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Layout and structure',
defaultExample: {
image: 'section-default.png',
description:
'Group warehouse location details under a labeled heading. This example uses `Section` with a `heading` prop to bundle a warehouse name, storage slot, and stock count into one content area.',
codeblock: {
title: 'Group content with a heading',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'select-default.png',
description:
'Assign a product to a warehouse location from a dropdown of four regions. This example uses `Select` with four warehouse options, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that assigns the warehouse and closes the modal.',
codeblock: {
title: 'Assign warehouse location',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Typography and content',
defaultExample: {
image: 'text-default.png',
description:
'Differentiate a current price from a compare-at price with bold and italic styling. This example uses `Text` with `fontWeight` for the current price and `fontStyle` for the compare-at value, showing how props change the visual weight of inline content.',
codeblock: {
title: 'Highlight product pricing',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'textarea-default.png',
description:
'Write internal product notes and save them from an action modal. This example uses `TextArea` with a `rows` prop to set the input height, and a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the notes.',
codeblock: {
title: 'Collect internal product notes',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'textfield-default.png',
description:
'Tag a product with a custom warehouse label and save it from an action modal. This example uses `TextField` to capture the value, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the label.',
codeblock: {
title: 'Collect product metadata',
tabs: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
subCategory: 'Forms',
defaultExample: {
image: 'urlfield-default.png',
description:
'Record an external product source URL and save it from an action modal. This example uses `URLField` to capture the address, with a [Button](/docs/api/admin-extensions/{API_VERSION}/components/actions/button) that saves the source URL.',
codeblock: {
title: 'Set external product source URL',
tabs: [
Expand Down