Skip to main content

QR code

The QR code component renders a scannable pattern that encodes URLs or text. Use QR codes for app installs, order tracking, digital receipts, and other quick mobile actions.

QR codes support sizing, center logos, borders, and accessibilityLabel for assistive technology. When scanning isn't required, use link for a tappable destination instead.

Support
Targets (29)

Configure the following properties on the qr code component.

Anchor to accessibilityLabel
accessibilityLabel
string
Default: 'QR code' (translated to the user's locale)

A label that describes the purpose or contents of the QR code for accessibility. When set, it will be announced to users using assistive technologies such as screen readers.

Anchor to border
border
'base' | 'none'
Default: 'base'

Whether to display a border around the QR code.

  • 'base': Applies a standard border to frame the QR code.
  • 'none': Removes the border for seamless integration with the surrounding layout.
Anchor to content
content
string

The content to be encoded in the QR code, such as a URL, email address, or plain text. When scanned, the user's device will process this content — typically by opening a URL in a browser or prompting an action based on the content type.

string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

string

The URL of an image to display in the center of the QR code, typically used for branding. The image should be small enough not to interfere with the QR code's scannability.

Anchor to onError
onError
(event: Event) => void

A callback fired when the conversion of content to a QR code fails. This can happen when the content is too long or contains unsupported characters.

'base' | 'fill'
Default: 'base'

The displayed size of the QR code.

  • 'base': The QR code is displayed at its default fixed size.
  • 'fill': The QR code takes up 100% of the available inline size, useful for responsive layouts.

The QR code component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to error
error
<typeof tagName>

A callback that's fired when the conversion of content to a QR code fails.


Anchor to Generate a scannable QR codeGenerate a scannable QR code

Generate a scannable QR code linked to a URL. This example renders an s-qr-code pointing to Shopify.com with a text label and link below it.

Generate a scannable QR code

A rendered example of the qr-code component

html

<s-qr-code accessibilityLabel="Link to Shopify.com" content="https://shopify.dev"></s-qr-code>
<s-paragraph>
Scan to visit <s-link href="https://shopify.com">Shopify.com</s-link>
</s-paragraph>

Anchor to Add branding and an accessibility labelAdd branding and an accessibility label

Add center branding and a screen-reader label to a QR code. This example uses logo for visual identity, accessibilityLabel for assistive technology, and border for a visible frame.

html

<s-qr-code
content="https://shopify.com/install"
accessibilityLabel="Scan to open the app install page"
logo="https://cdn.shopify.com/YOUR_LOGO_HERE"
border="base"
size="fill"
></s-qr-code>

Anchor to Display a compact order tracking codeDisplay a compact order tracking code

Display a QR code for order tracking alongside a descriptive label. This example pairs the code with subdued helper text to explain what buyers should scan.

html

<s-stack gap="base" alignItems="center">
<s-qr-code
content="https://example.com/order/12345/tracking"
accessibilityLabel="Scan to track your order"
></s-qr-code>
<s-text type="small" color="subdued">Scan to track your order</s-text>
</s-stack>

  • Test that QR codes scan correctly: Verify that the code scans from a smartphone before publishing. Test at different sizes and screen brightness levels.
  • Provide an alternative way to access the content: Provide a clickable link using the s-link component for URLs for buyers who can't scan the code. For data, use s-button to copy it to the clipboard.
  • Add a description and accessibility label: Include a brief label or heading near the QR code indicating the code's purpose, and set accessibilityLabel to describe the code's destination.
  • Keep destination URLs short: Where possible, use shorter URLs to produce less dense QR codes that are easier to scan, especially at smaller sizes.
  • Choose logos carefully: If using a logo, limit the size to 15-20% of the QR code, and select a simple image with a white background and high contrast. Busy logos with low contrast can confuse the scanner.

Was this page helpful?