How to configure a QR code on Thank you and Order status pages
What you will achieve in this guide
Follow the feature-specific setup and testing instructions below. Check the supported pages and plan requirements before activating the feature.
Use Image or QR code on its supported pages to help customers with the task described below. Configure it in Rivio, save its activation state, and then add the corresponding block in Shopify’s checkout and accounts editor.
Supported pages and requirements
Supported pages: Thank you, Order status. Eligible Thank you and Order status app blocks are supported on Shopify Basic and higher. Your Rivio app plan must also include the feature. Check the page labels on the current block card before setup.
When to use this block
- Display a useful visual guide after purchase.
- Provide a scannable link to instructions or other relevant information.
Configuration settings
| Setting | How to configure it |
|---|---|
| Mode | Select image or QR code according to the content you want to display. |
| Image / QR content | Select the image, or enter the intended content such as a full care-guide URL. |
| Accessibility | Provide clear accompanying text; add descriptive alternative text when the image control offers it. |
| Layout | Review proportions, sizing, and scanning at mobile width. |
Use the controls available in your current configuration screen. Save a clearly named configuration, then confirm that Shopify’s editor uses that same configuration.
Screenshot to add: The Image or QR code configuration form with its content and appearance settings visible.
Rivio blocks add content or input fields to supported checkout and account pages. Configure the content in Rivio and place the block in Shopify’s editor.
Worked example: Offer a scannable link to your care guide
Example setup: A public product-care guide URL.
Step-by-step instructions
Open UI extension blocks and find Image or QR code. Check the supported pages on its card.
Choose Set up or Manage and create a configuration with a clear internal name.
Choose QR-code mode and enter the complete care-guide URL as the content.
Generate or preview the QR code using the form’s supported controls.
Use enough size and clear surrounding space for reliable scanning.
Add an accompanying label such as Scan for care instructions where supported.
Review the preview and any display conditions. For the first demo, leave optional conditions empty so you can isolate placement.
Save as Active. Open the Checkout and Accounts Editor, select the intended configuration and supported target page, and add the matching Rivio block in a supported location.
Select the saved configuration if prompted and save Shopify’s editor. Test the actual customer page on desktop and a phone.
Verify the result
| Test case | Expected result or verification |
|---|---|
| QR scanned from actual page | A phone decodes the intended care-guide URL. |
| Guide opened | The destination is publicly accessible and useful for the purchased item. |
| Small phone view | Verify scan/readability and offer a normal link when the block supports it. |
Important: Check the decoded destination, not just the appearance of the code. Checkout-step UI blocks require Shopify Plus. For another surface, use only the pages supported by this block’s card.
If the result is different
| Check | What it means / what to do |
|---|---|
| Configured but not visible | Confirm the matching block is placed and saved on the exact supported Shopify page/configuration. |
| Only some buyers see it | Compare Active status and condition inputs, including customer login and surface data. |
| Configuration is not applied | Check the saved configuration selected by the editor block and verify the correct page. |
Add and verify each supported placement
- Open Settings → Checkout in Shopify admin and customise the intended configuration.
- Select the exact supported page: Thank you, Order status. For Profile, use the customer-account page selector.
- Add the matching Rivio app block in a supported location and select the saved configuration if prompted.
- Save the editor. Add and save each other intended page separately; one placement does not establish every placement.
- Preview desktop and mobile, then test the actual checkout, completed order, or signed-in account appropriate to that page.
Screenshot to add: Shopify’s editor showing the Image or QR code block on the selected supported page, followed by the final customer view.
Limitations
- Displaying a payment QR code does not verify that a payment was received.
- Test the destination and scanning separately; a preview alone does not prove the link works.
Display conditions depend on the page. Customer tags require logged-in customer context. Selected shipping method is unavailable on Order status. On Profile, only Customer, Language, Market, and Time on page conditions are evaluated; cart and order conditions are ignored.
Related guides
- How to Add Custom Blocks to Shopify Checkout
- How to Configure and Place an Individual Rivio Block
- How to Add a Survey or Form to the Shopify Checkout Page
Need help?
Email support@rivioapps.com with your store domain, feature name, target page, the relevant settings, and a screenshot of the actual result. Include the test cart, customer, or order details needed to reproduce the issue.
Was this article helpful?
Your feedback helps us continuously improve our setup guides and documentation.
Thank you for your feedback! Our documentation team reviews all suggestions.