--- title: QRCode description: >- The QRCode component displays a scannable QR code representing data such as URLs or text. Use QRCode to let customers quickly access information by scanning with a smartphone or other device. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # QRCode The QRCode component displays a scannable QR code representing data such as URLs or text. Use QRCode to let customers quickly access information by scanning with a smartphone or other device. QR codes support optional logo overlays for branding and can scale to fill their parent container. Always provide an alternative way for customers to access the encoded content. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Store links**: Let customers scan a code to visit a store page, product listing, or promotional landing page. * **Loyalty programs**: Provide scannable codes for loyalty card registration or rewards redemption. * **Return labels**: Display a scannable code that customers can present at a drop-off location for returns. * **Digital receipts**: Encode order details or receipt URLs for easy sharing or record-keeping. *** ## Properties Configure the following properties on the QRCode component. * **accessibilityLabel** **string** **Default: 'QR code' (translated to the user’s locale)** A label that describes the purpose or contents of the QR code. When set, it will be announced to users using assistive technologies and will provide them with more context. * **border** **'base' | 'none'** **Default: 'base'** The border style around the QR code. * `base`: A standard border that visually frames the QR code. * `none`: No border is rendered. * **content** **string** The data to encode in the QR code. Accepts any string, such as a URL, email address, or plain text. Specific string formats can trigger actions on the user’s device when scanned, like opening geolocation coordinates on a map, launching an app, preparing an email, or composing a text message. * **id** **string** A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component. * **logo** **string** The URL of an image to display in the center of the QR code. Use this for branding or to indicate what scanning the QR code will do. By default, no image is displayed. * **onError** **() => void** A callback that fires when the conversion of `content` to a QR code fails. When an error occurs, the QR code and its child elements are not displayed. Use this to show a fallback or error state. * **size** **'auto' | 'fill'** **Default: 'auto'** The displayed size of the QR code. * `auto`: The QR code is displayed at its default size. * `fill`: The QR code takes up 100% of the available inline size and maintains a 1:1 aspect ratio. *** ## Examples ### Display a QR code Render a scannable QR code from a URL. This example encodes a link that customers can scan with their smartphone to visit the destination. ## Display a QR code ![A scannable QR code linking to a URL.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/qrcode-default-B8Ik8Yjd.png) ## Display a QR code ##### React ```tsx import { reactExtension, Link, QRCode, TextBlock, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( <> Scan to visit{' '} Shopify.com ); } ``` ##### JS ```js import { extension, Link, QRCode, TextBlock, } from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const qrCode = root.createComponent(QRCode, { content: 'https://shopify.com', }); const textBlock = root.createComponent(TextBlock, null, [ 'Scan to visit ', root.createComponent(Link, {to: 'https://shopify.com'}, 'Shopify.com'), ]); root.appendChild(qrCode); root.appendChild(textBlock); }); ``` ### Add a logo overlay Include a branded logo in the center of the QR code for recognition and trust. This example uses the `logo` property to overlay an image on the code. ## Add a logo overlay ##### React ```tsx import { reactExtension, Link, QRCode, TextBlock, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { return ( <> Scan to visit{' '} Shopify.com ); } ``` ##### JS ```js import { extension, QRCode, TextBlock, Link, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root) => { const qrCode = root.createComponent(QRCode, { content: 'https://shopify.com', logo: 'https://cdn.shopify.com/YOUR_IMAGE_HERE', }); const textBlock = root.createComponent( TextBlock, null, [ 'Scan to visit ', root.createComponent( Link, {to: 'https://shopify.com'}, 'Shopify.com', ), ], ); root.appendChild(qrCode); root.appendChild(textBlock); }, ); ``` ### Fill a container Scale the QR code to fill its parent container. This example sets `size="fill"` so the code expands to match the available width. ## Fill a container ##### React ```tsx import { reactExtension, QRCode, View, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import { extension, View, QRCode, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root) => { const view = root.createComponent(View, { maxInlineSize: 300, }); const qrCode = root.createComponent(QRCode, { content: 'https://shopify.com', size: 'fill', }); view.appendChild(qrCode); root.appendChild(view); }, ); ``` ### Provide a text alternative Pair the QR code with a clipboard button so all customers can access the content. This example adds a copy button below the code for customers who can't scan. ## Provide a text alternative ##### React ```tsx import { reactExtension, BlockStack, Button, ClipboardItem, QRCode, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const bitcoinAddress = '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd'; return ( ); } ``` ##### JS ```js import { extension, BlockStack, Button, ClipboardItem, QRCode, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root) => { const bitcoinAddress = '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd'; const qrCodeContent = `bitcoin:${bitcoinAddress}`; const qrCode = root.createComponent(QRCode, { content: qrCodeContent, size: 'fill', }); const clipboardItem = root.createComponent( ClipboardItem, { text: bitcoinAddress, id: 'bitcoin-address', }, ); const button = root.createComponent( Button, { activateTarget: 'bitcoin-address', }, 'Copy Bitcoin address', ); const blockStack = root.createComponent( BlockStack, { maxInlineSize: 200, }, ); blockStack.appendChild(qrCode); blockStack.appendChild(button); blockStack.appendChild(clipboardItem); root.appendChild(blockStack); }, ); ``` *** ## Best practices * **Always test that the QR code scans correctly**: Verify the code scans from a smartphone before publishing. Test at different sizes and screen brightness levels. * **Use a square logo when customers expect one**: Adding a logo increases brand trust and sets expectations for the action when scanning. * **Add a text description of what the QR code does**: Include a brief label or heading near the QR code so customers know what they'll get after scanning. * **Provide an alternative way to access the content**: Not all customers can scan QR codes. For URLs, add a [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/link) nearby. For data, add a [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button) to copy to clipboard. *** ## Limitations * The QR code renders at a fixed square aspect ratio. Non-square containers cause the code to scale proportionally rather than stretch. * Logo overlays reduce the scannable area of the QR code. Large logos might make the code harder to scan, especially at smaller sizes. * The component encodes data as a standard QR code. Other barcode formats (for example, Code 128 or EAN-13) aren't supported. ***