The Barcode element draws a scannable barcode in one of four formats. It is for retail labels, inventory tags and anything that has to pass a shop scanner. Unlike a QR code, a barcode format decides what content is legal, so most of this guide is about matching the two.
Add the barcode
Add the element
Open Elements and click the Barcode tile.
Choose the format first
Under Content, set Format before you type the content. Changing format afterwards can invalidate what you already entered.
Enter the content
Number, under the format, takes the value. The panel checks it against the chosen format and explains any problem in words rather than refusing silently.
Which format to choose
| Format | Accepts | Use it for |
|---|---|---|
| Code 128 | Printable ASCII, including spaces and punctuation | Internal codes, order references, anything not sold through a till |
| EAN-13 | 12 digits, or 13 with a valid check digit | Retail products sold outside North America |
| UPC-A | 11 digits, or 12 with a valid check digit | Retail products sold in North America |
| Code 39 | Letters, digits, spaces and - . $ / + % |
Older warehouse and logistics systems |
Two behaviours are worth knowing:
Check digits are calculated for you. Give EAN-13 twelve digits and it works out the thirteenth. Give it all thirteen and it checks the one you supplied, which is how a typo in a code from a spreadsheet gets caught before it is printed.
Code 39 converts letters to uppercase. Lowercase input is not rejected, it is changed. The asterisk is reserved by the format and cannot appear in your content.
Colour and legibility
Under Colors in the Look section, Bars and Background set the bars and the space behind them. Both are validated for full opacity and for contrast, and the barcode has less tolerance than a QR code: a scanner reads the width of bars, so a low-contrast barcode fails more often than a low-contrast QR code does.
Show number prints the human-readable digits under the bars. Leave it on for retail: it is what a cashier types when the scanner refuses.
Bar width sets how thick the narrowest bar is. Too thin and printing bleeds the bars together; a proof scan is the only reliable test.
Let the shopper supply the code
- Field sets the Label, Placeholder and Help text. Say which format you expect, because “12 digits” is the difference between usable input and a support ticket.
- The data you enter on the Design tab is what the barcode holds 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.
Format validation applies to shopper input as well, so a customer cannot check out with eleven digits in an EAN-13 field.
Next
QR Code is the freer option when the code only needs to open a link.