Comment on page


The Barcode code represent 2D barcodes.
The Barcode is also available as an Experience Cloud Component.


The Barcode Component allows users to generate new barcodes or customize the appearance of the barcodes by selecting from a range of options.


Learn to create and display product code barcodes in Salesforce efficiently and effectively.

Changing the properties

Customizing the barcode value

The value for the barcode can be set in two ways. Firstly, you can manually enter the desired value for the barcode. Alternatively, the value can be sourced from one of your existing collections. To use a value from a collection, switch to the 'Mapped' input option and select the appropriate collection as your source.
Switch to Mapped input field to select a source collection as a value.

Choosing the barcode type

The Barcode component comes with more than 150 different types of barcodes to render. Select the one you need.
Main types of Barcode supported
  • UPC-A:
    • Description: Universal Product Code, widely used in retail in the USA.
    • Requirements: Encodes 12 numerical digits.
  • UPC-E:
    • Description: Compressed version of UPC-A for smaller packages.
    • Requirements: Encodes 6 numerical digits.
  • EAN-13:
    • Description: International Article Number, used globally for retail products.
    • Requirements: Encodes 13 numerical digits.
  • EAN-8:
    • Description: A shorter version of EAN-13 for small items.
    • Requirements: Encodes 8 numerical digits.
  • Code 128:
    • Description: Highly versatile and can encode all 128 ASCII characters.
    • Requirements: Variable length, often used for packaging and shipping.
  • Code 39:
    • Description: Older type, can encode letters, numbers, and symbols.
    • Requirements: Variable length, less compact than Code 128.
  • QR Code:
    • Description: Two-dimensional barcodes that encode text, URLs, or other data.
    • Requirements: Variable length, can encode a significant amount of data.
  • Data Matrix:
    • Description: Two-dimensional code, often used in electronics and healthcare.
    • Requirements: Variable size, can encode text or raw data.
  • Interleaved 2 of 5:
    • Description: A numeric-only barcode is typically used in warehousing and distribution.
    • Requirements: Must have an even number of digits.
  • Codabar:
    • Description: Older format often used in libraries and blood banks.
    • Requirements: Variable length, can include numbers and a few special characters.
  • PDF417:
    • Description: A stacked, two-dimensional barcode used for documents and identification cards.
    • Requirements: Variable length, can encode large amounts of data.
  • GS1 DataBar:
    • Description: A family of barcodes used for fresh foods and coupons.
    • Requirements: Varies based on the specific GS1 DataBar type.
  • Aztec Code:
    • Description: Two-dimensional barcodes are used mainly in transportation tickets.
    • Requirements: Variable length, can encode significant amounts of data.
  • ITF-14:
    • Description: Used to mark cartons, cases, or pallets with an EAN-13 or UPC number.
    • Requirements: Encodes 14 numerical digits.


🎛️ Attributes
🎨 Styling
The Value to encode in the barcode.
The type of barcode to render.
Hide Value
If present, hide the value of the barcode.
If present, show the checksum value.
Changes the background color of the barcode.
Choose any color to match your design.
Alters the color of the barcode stripes.
Select a color that contrasts well with the background.
Text Color
Modifies the color of the barcode value text.
Ensure readability with a contrasting text color.
Text Alignment
Adjusts the position of the barcode value.
Options include left, center, or right alignment.
Sets the height of the barcode.
Adjust according to the space available.
Defines the width of the barcode.
Choose a width that fits your layout.
Last modified 16d ago