---
title: QR code
description: >-
  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.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/qr-code
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/qr-code.md
---

# 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](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/link) for a tappable destination instead.

### Support Targets (29)

### Supported targets

* [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/navigation#navigation-target)
* [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/block#block-target)
* [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#line-item-targets)
* [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-cart-line-list-)
* [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/information#information-target)
* [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-delivery-address-)
* [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#delivery-address-targets)
* [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/footer#footer-target)
* [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/header#header-target)
* [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#render-after-payment-methods-)
* [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#payment-targets)
* [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#render-after-pickup-locations-)
* [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-list-targets)
* [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-option-item-target)
* [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#render-after-pickup-points-)
* [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#pickup-points-targets)
* [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-reductions-after-)
* [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#reductions-targets)
* [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-item-targets)
* [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-option-)
* [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-options-)
* [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-list-targets)
* [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/announcement#thank-you-announcement-)
* [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/block#block-target)
* [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#line-item-targets)
* [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#thank-you-cart-line-list-)
* [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/information#information-target)
* [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/footer#footer-target)
* [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/header#header-target)

#### Use cases

* **App install links**: Generate a scannable code that directs buyers to install a mobile app for order tracking or loyalty programs.
* **Order tracking**: Display a QR code linked to the order's tracking page so buyers can scan it from a confirmation email or receipt.
* **Branded codes**: Add a center logo and border to the QR code for visual consistency with the store's brand.
* **Digital receipts**: Provide a scannable code that links to a digital receipt or invoice after purchase.

***

## Properties

Configure the following properties on the qr code component.

* **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.

* **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.

* **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.

* **id**

  **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.

* **logo**

  **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.

* **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.

* **size**

  **'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.

### Events

The QR code component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* **error**

  **CallbackEventListener\<typeof tagName>**

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

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

***

## Examples

### Generate 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](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/qr-code-default-WBrmncO_.png)

## html

```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>
```

### Add 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

```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>
```

### Display 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

```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>
```

***

## Best practices

* **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.

***