Skip to main content

Components

BadgeBadge

Badge

Badges are used to inform merchants of the status of an item or action that’s been taken.

BannerBanner

Banner

A banner informs merchants about important changes or persistent conditions. Use if you need to communicate to merchants in a prominent way, without blocking other actions.

BoxBox

Box

A box component is a container that can be used to group and display content in a consistent manner.

ButtonButton

Button

Buttons enable the merchant to initiate actions, like "add", "save", or "next".

CameraScannerCameraScanner

CameraScanner

The camera scanner uses the devices camera to scan and decode barcodes or QR codes. It displays a live feed with guidance markers for alignment and triggers actions within the app upon successful recognition.

DateFieldDateField

DateField

A component that enables users to open a dialog and select a date through a text input.

DatePickerDatePicker

DatePicker

A component used to select a date through a dialog.

DialogDialog

Dialog

A dialog is a high-priority, intentionally disruptive message that requires action from the merchant before they can continue using POS.

EmailFieldEmailField

EmailField

Use an email field to conveniently and accurately capture merchant email addresses.

IconIcon

Icon

A component that renders an icon from the POS asset catalog.

ImageImage

Image

The image component displays an image to a merchant in Shopify POS.

ListList

List

The list is a scrollable component in which the list rows are rendered.

NavigatorNavigator

Navigator

A component used to navigate between different screens.

NumberFieldNumberField

NumberField

Use a number field to conveniently and accurately capture numerical values.

PinPadPinPad

PinPad

A component used to authenticate or identify individuals through a standarized number pad.

POSBlockPOSBlock

POSBlock

The POSBlock provides a surface on the specified extension target as an entry point to an extension. Note that the title displayed on this POSBlock is dependent on the description of the extension.

POSBlockRowPOSBlockRow

POSBlockRow

Renders a POSBlockRow in a POSBlock.

POSReceiptBlockPOSReceiptBlock

POSReceiptBlock

A component used to group other components together for display on POS receipts.

PrintPreviewPrintPreview

PrintPreview

A component that displays a preview of a printable document.

QRCodeQRCode

QRCode

A component that renders a QR code in Shopify POS.

RadioButtonListRadioButtonList

RadioButtonList

A radio button list lets merchants select from a given set of options.

ScreenScreen

Screen

A component used in the root of a modal extension to define a screen.

ScrollViewScrollView

ScrollView

The ScrollView component allows content that doesn’t fully fit on screen to scroll. Typically, the ScrollView component serves as the root component of a Screen.

SearchBarSearchBar

SearchBar

The search bar lets merchants enter search queries for objects throughout the app.

SectionSection

Section

A component used to group other components together in a card-like UI. Usually, sections will be used inside a ScrollView.

SectionHeaderSectionHeader

SectionHeader

A heading style text component with an optional divider line to structure content.

SegmentedControlSegmentedControl

SegmentedControl

The segmented control lets the merchant easily switch between different lists or views on the same page.

SelectableSelectable

Selectable

The selectable component allows you to wrap any non-interactive UI component to make it selectable.

SpacingSpacing

Spacing

Set of spacing constants to be used in the UI Extensions components library.

StackStack

Stack

A container for other components that allows them to be stacked horizontally or vertically. When building complex UIs, this will be your primary building block. Stacks always wrap the content to the next column or row.

StepperStepper

Stepper

A component used for increasing or decreasing quantities.

TextText

Text

Text can be rendered in different sizes and colors in order to structure content. By default, Text will always stretch to fill the width of the container, but it can be wrapped in a Box to limit its width to what it needs. When the width of Text reaches its limit, the string will automatically wrap to the next line.

TextAreaTextArea

TextArea

Use a text input to allow merchants to input or modify multiline text.

TextFieldTextField

TextField

Use a text field to allow merchants to enter or edit text. If you want to specify the kind of input, then use a formatted text field.

TileTile

Tile

Tiles are customizable buttons that allow staff to complete actions quickly. Think of them as shortcuts--adding a 10% discount to an order, for example. Tiles provide contextual information and let merchants quickly access workflows, actions, and information from the smart grid and the top of detail pages. They’re dynamic and can change based on surrounding context, such as what’s in the cart.

TimeFieldTimeField

TimeField

A component that enables users to open a dialog and select a time through a text input.

TimePickerTimePicker

TimePicker

A component used to select a time through a dialog.