The QR Code element turns a link or a piece of text into a scannable code. Merchants use it for wedding-photo albums, playlist links, care instructions and business cards. This guide covers making one that actually scans off a printed product, which is a slightly different problem from making one that scans off a screen.
Add the code
Add the element
Open Elements and click the QR Code tile. It arrives with a placeholder link so you can see it drawing.
Set what it points at
Under Content, choose Link or Text, then type it in the field below. A full link including the protocol, such as https://, is what most phone cameras open directly.
The panel refuses an empty code rather than drawing an unscannable square, and it tells you when the content is too long for the level of error correction you chose.
Choose the error correction
Error correction, under More, decides how much of the code can be damaged and still read. Higher levels add redundancy, which makes the pattern denser and leaves less room for content.
A new code starts on Auto. It picks the most correction that keeps the code no denser than Medium, so a short link gets High for free and a long text drops to Low only when Medium cannot hold it. Auto follows the content, including what a shopper types. Choose a fixed level only when your printer asks for one.
For print, err on the higher side. A code on fabric, on a curved mug or on a matte finish loses more than a code on a screen does.
Colour it without breaking it
Under Colors in the Look section, Code and Background are the two colours of the code. Both are checked as you set them, and the panel objects for two reasons:
- A colour that is not fully opaque. A scanner reads black-and-white contrast, and a semi-transparent code takes on whatever is behind it.
- Not enough contrast between the two. This is the common one. A pale grey code on white looks tasteful in the editor and fails on the printed item.
Take those warnings seriously. The cost of ignoring one is a product that looks right and does not work, which reaches you as a refund rather than a support ticket.
Let each shopper set their own link
A QR code has one thing a shopper changes, so it uses the standard field controls rather than per-feature switches.
- Field sets the Label, Placeholder and Help text. Be specific here: “Paste the link to your photo album” gets usable input, “QR data” does not.
- The data you enter on the Design tab is what the code contains until the shopper types something. There is no separate default to keep in step.
- Required to order stops an order arriving with an empty code.
The validation applies to what the shopper types too, so a customer cannot check out with content the code cannot hold.
Next
To build a whole product around it, follow a QR gift label.
Barcode covers retail and inventory codes, which follow stricter rules about what content is allowed.