Skip to main content

QR code

Displays a scannable QR code representing data such as URLs or text. Use to let users quickly access information by scanning with a smartphone or other device.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

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.

Anchor to id
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.

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.

Anchor to size
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.

Anchor to eventsEvents

Learn more about registering events.

Anchor to error
error
<typeof tagName>

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

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

Preview

Anchor to best-practicesBest Practices

  • Always test that the QR code is scannable from a smartphone.
  • Include a square logo if that’s what your customers are familiar with.
  • Increase usability by adding a text description of what the QR code does.
  • Always provide an alternate method for customers to access the content of the QR code.
  • If the content is a URL, provide a s-link nearby.
  • If the content is data, provide a s-button to copy the data to the clipboard, or show the data in a readonly s-text-field.
Was this page helpful?