Skip to main content
Customei ships a first-class QR code layer with configurable styles and colors. The QR data can be hard-coded at design time or driven by a customer input on the storefront.

​
When to use a QR layer

  • Order tracking — QR that links to a tracking page unique to each customer.
  • Vanity URLs — a personalized short link printed on the product.
  • Event info — wedding invitations where each QR goes to a guest-specific RSVP page.
  • Decorative / branded — a QR in your brand colors that happens to encode your website.
If the data is the same for every order, you’re better off exporting the QR once and placing it as an image layer. Reach for the QR layer when the encoded text needs to vary per order — that’s when live rendering pays off.

​
Add a QR layer

1

Pick QR from the Add panel

A default QR layer is dropped onto the canvas with placeholder content.
2

Set the encoded value

In the Properties panel, type the URL or text to encode. The layer updates live.
3

Style it

Pick a dot style, colors, and error correction. See below.

​
Style properties

QR layers support enough customization to match your brand without becoming unscannable:
  • Dot type — square, rounded, dots, classy. Square reads fastest; the others are more decorative.
  • Foreground color — the color of the dots. Dark colors scan best.
  • Background color — can be transparent so the QR overlays product artwork.
  • Error correction — L / M / Q / H. Higher levels tolerate more damage and overlays but produce denser codes:
    • L — 7% recoverable.
    • M — 15% (default, balanced).
    • Q — 25%.
    • H — 30% (lets you overlay a small logo).
  • Quiet zone — the margin around the code. Keep a few modules of clear space or scanners fail.
Fancy colors and shapes look great but can break scanning. Always test your QR on a real phone before publishing. Low-contrast combinations (yellow on white, red on black) are common failure modes.

​
Binding to an option field

To let customers drive the QR content from the storefront:
  1. Open the option set.
  2. Add a Text field labeled something like Your tracking URL.
  3. In the field’s settings, pick Bound layer → your QR layer, targeting the value property.
  4. (Optional) Validate the input as a URL from the field’s validation settings.
Now whatever the customer types is re-encoded into the QR every time they edit the field. The preview updates in real time; the final value lands in the order payload.

​
Binding colors

Like other layers, a QR’s foreground and background colors can be driven by swatch fields. A “QR color” option set field is a nice touch when the QR needs to match a theme the customer picks separately. QR layers render through the same engine in three places:
  • Editor preview — live as you edit.
  • Storefront preview — on the product page, updates as the customer types.
  • Print file — re-rendered at full resolution when the order is paid, using the final value from the order payload.
All three use the same settings, so a QR that scans in the editor will scan on the print.

​
Tips

  • Stick with M or Q for error correction. L is flaky under real-world scanning conditions; H creates visual noise.
  • Print QRs at least 2 × 2 cm (roughly 0.8 × 0.8 in) so consumer phone cameras can resolve the dots.
  • Dark on light scans faster than light on dark, though both work.

​
Next