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 (24)

Supported targets

  • customer-account.footer.render-after
  • customer-account.order-index.announcement.render
  • customer-account.order-index.block.render
  • customer-account.order-status.announcement.render
  • customer-account.order-status.block.render
  • customer-account.order-status.cart-line-item.render-after
  • customer-account.order-status.cart-line-list.render-after
  • customer-account.order-status.customer-information.render-after
  • customer-account.order-status.fulfillment-details.render-after
  • customer-account.order-status.payment-details.render-after
  • customer-account.order-status.return-details.render-after
  • customer-account.order-status.unfulfilled-items.render-after
  • customer-account.order.action.menu-item.render
  • customer-account.order.action.render
  • customer-account.order.page.render
  • customer-account.page.render
  • customer-account.profile.addresses.render-after
  • customer-account.profile.announcement.render
  • customer-account.profile.block.render
  • customer-account.profile.company-details.render-after
  • customer-account.profile.company-location-addresses.render-after
  • customer-account.profile.company-location-payment.render-after
  • customer-account.profile.company-location-staff.render-after
  • customer-account.profile.payment.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. When set, it will be announced to users using assistive technologies and will provide more context about what the QR code may do when scanned.

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

Set the border of the QR code.

base: applies border that is appropriate for the element. none: removes the border from the element.

Anchor to content
content
string

The content to be encoded in the QR code, which can be any string such as a URL, email address, plain text, etc. Specific string formatting can trigger actions on the user's device when scanned, like opening geolocation coordinates on a map, opening a preferred app or app store entry, preparing an email, text message, and more.

Anchor to id
id
string

A unique identifier for the element.

string

URL of an image to be displayed in the center of the QR code. This is useful for branding or to indicate to the user what scanning the QR code will do. By default, no image is displayed.

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

Invoked when the conversion of content to a QR code fails. If an error occurs, the QR code and its child elements will not be displayed.

Anchor to size
size
'base' | 'fill'
Default: 'base'

The displayed size of the QR code.

fill: the QR code will takes up 100% of the available inline-size and maintain a 1:1 aspect ratio. base: the QR code will be displayed at its default size.

Anchor to eventsEvents

Learn more about registering events.

Anchor to error
error
<typeof tagName>

Invoked when the conversion of content to a QR code fails. If an error occurs, the QR code and its child elements will not be displayed.

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 scans correctly from a smartphone.
  • Use a square logo when customers expect one.
  • Add a short text description of what the QR code does.
  • Provide an alternative way to access the content:
    • For URLs: add an s-link nearby.
    • For data: add an s-button to copy to clipboard, or show it in a readonly s-text-field.
Was this page helpful?