Experience Editor
Add a barcode to an image template
With this new feature, you can now add a Barcode to an Image template! 

1. Within the Image editor, you can locate the Barcode component under Components Click on this component to add it to the canvas

2. Click on the Barcode within the canvas to open its properties to the right

3. Under Source Tools, you can select the Barcode type from the dropdown.
By default, the Barcode type is set to Code 128. If a different type suits your need, you may select it from the dropdown. This link details the different barcode types and conventions

4. Under this section, you can also type in the Barcode content.  

Note: This Barcode content is based on the selected Barcode type. 

Please note: If you enter non-compatible content for a selected Barcode type, you will receive an error prompt

5. You can also set the Barcode content to a variable. For this ensure that you enlist a new variable for the content (compatible with the selected code type) 

Within Source tools, click on the select variable  dropdown and copy the created variable. You can then paste that variable within the Barcode content.

6. Under Design Tools, you can adjust the look and feel of the Barcode component

7. To edit the border:
  • Click on the border color block to select the border color of your choice
  • Set your desired value for the border width/ weight from the weight input
8. By default, the Barcode component takes a square shape. To edit the border radius, enter your desired value in the Radius input.

Please note: It is not advised to set this value too high, as it may accidentally cut out the edges of the code and your audience will be unable to scan it. 

9. You can also set the value for Rotate to adjust the rotation of the Barcode

10. Lastly, you can adjust the size of the component by dragging out the edges of the component on the canvas.
You can also enter the desired height and width from under Design Tools

Check the box for Lock to lock the aspect ratio for the Barcode component.

Your Barcode component is successfully added! Ensure to click on Save Template to save any changes

A few points to note with regard to the barcode code component:

1. This component is only available for Image templates

2. Ensure that the size of your base image is large and that the size of the Barcode is large enough to be visible and clear enough to be scannable  to your audience. To preview the image, as it would appear to your audience, you can go to the Define Meta tab and click on Generate Preview

Was this article helpful?
Nexweave Knowledge Base | 2024