Example Barcode Templates

This page will show various standard and QR barcode templates that are being used by current Infoplus clients.

For more information and step-by-step instructions on creating and managing barcodes, click here.

This article is separated into two sections, one for traditional barcodes and one for QR barcodes, use these link to quickly navigate to which type of barcode you are looking for: 

• Traditional Barcodes
• QR Barcodes
  
  

---

Traditional Barcode Examples

Standard barcodes are machine-readable parallel lines of varying widths that are used to store and identify specific information.  

To set up a barcode in Infoplus, you will need to have a basic understanding of HTML. For more information on how to set barcodes up, see our article on how to create and use barcode templates in Infoplus.

Meanwhile, below are some examples of commonly utilized barcodes in Infoplus: 

Item Barcode Example:

Configuration:


Source Code: 

<table style="width: 98%; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 35%; text-align: center;"><img src="https://dka575ofm4ao0.cloudfront.net/pages-transactional_logos/retina/11842/Infoplus_Logo_Orange_Transparent.png" alt="IP Logo" width="164" height="68" /></td>
<td style="text-align: right;">
<p><strong style="font-size: 1.2em;">$record.sku<br /></strong></p>
</td>
<td style="text-align: right;"><img src="https://chart.googleapis.com/chart?chs=125x125&amp;cht=qr&amp;chl=${record.sku}" alt="address qr code" width="86" height="86" /></td>
</tr>
<tr>
<td style="text-align: center; font-size: 1.2em;" colspan="3"><strong>$record.itemDescription $!record.additionalDescription</strong><br /><br /></td>
</tr>
<tr>
<td><strong>&nbsp; Item Details:&nbsp;</strong><br />&nbsp; Qty Per Case:&nbsp; &nbsp;$!record.quantityPerCase<br />&nbsp; Qty Per Pallet:&nbsp; &nbsp;N/A</td>
<td style="text-align: center;" colspan="2">This barcode is completely customizable. Add or remove data, barcodes, images or whatever else is neccessary. Use "if this, then that" logic on conditional data. learn more <a href="https://www.infopluscommerce.com/knowledge-base/create-and-use-a-barcode-template">here</a></td>
</tr>
<tr>
<td style="text-align: center; font-size: .95em;" colspan="3"><br /><br /><img src="$barcodes.sku" alt="SKU barcode" width="400" height="50" /><br /><br />$record.sku</td>
</tr>
</tbody>
</table>

Item Receipt Barcode Example:

   
Configuration:

   

 

---

Warehouse Location Barcode Example:

Configuration:

Source Code:

<h1 style="text-align: center;"><br />$record.address</h1>
<p style="text-align: center;"><img src="$barcodes.address" alt="" width="325" height="75" /><br /><br /></p>
<p style="text-align: center;"><img src="https://s3.amazonaws.com/client-branding.infopluswms.com/infopluscommerce/logo_blue_trans.png" alt="" width="200" height="27" /></p>

---

Product ID Tag Barcode Example: 

Configuration:

Source Code:

<h1 style="text-align: center;"><br /><strong>$!record.productIdTag</strong></h1>
<p style="text-align: center;"><img src="$barcodes.productIdTag" alt="" width="325" height="75" /><br /><br /></p>
<p style="text-align: center;"><img src="https://s3.amazonaws.com/client-branding.infopluswms.com/infopluscommerce/logo_blue_trans.png" alt="" width="175" height="24" /></p>

---

Cart Location Barcode Example

Configuration:

Source Code:
<h2 style="text-align: center;"><br />$record.address<br /><br /></h2>
<p style="text-align: center;"><img src="$barcodes.address" alt="" width="325" height="75" /><br /><br /></p>
<p style="text-align: center;"><img src="https://s3.amazonaws.com/client-branding.infopluswms.com/infopluscommerce/logo_blue_trans.png" alt="" width="200" height="27" /></p>

---

Cart  Barcode Example

Configuration: 

Source Code:

<h2 style="text-align: center;"><br />Cart:&nbsp; $record.cartId<br /><br /></h2>
<p style="text-align: center;"><img src="$barcodes.cartId" alt="" width="325" height="75" /></p>
<p style="text-align: center;"><img src="https://s3.amazonaws.com/client-branding.infopluswms.com/infopluscommerce/logo_blue_trans.png" alt="" width="225" height="30" /></p>

---

Item Receipt Barcode Example

Configuration:

Source Code:

<h2 style="text-align: center;">$record.sku</h2>
<p style="text-align: center;"><img src="$barcodes.sku" alt="" width="300" height="50" /></p>
<h3 style="text-align: center;">$record.fullDescription<br />Prod Lot:&nbsp; $!record.productionLot<br />Qty:&nbsp; $record.receivedQuantity</h3>
<p style="text-align: center;">&nbsp;</p>
<h2 style="text-align: center;">&nbsp;<img src="https://s3.amazonaws.com/client-branding.infopluswms.com/infopluscommerce/logo_blue_trans.png" alt="" width="175" height="24" /></h2>

---

Item Barcode Example

Configuration:

Source Code:

<h1 style="text-align: center;">$record.sku</h1>
<h3 style="text-align: center;">$record.itemDescription</h3>
<p style="text-align: center;"><img src="$barcodes.sku" alt="" width="325" height="75" /><br /><br /></p>
<p style="text-align: center;"><img src="https://s3.amazonaws.com/client-branding.infopluswms.com/infopluscommerce/logo_blue_trans.png" alt="" width="175" height="24" /></p>

Carton Type Barcode Example

Configuration: 

Source Code: 

<h1 style="text-align: center;"><br />$record.name</h1>
<p style="text-align: center;"><img src="$barcodes.id" alt="" width="325" height="75" /><br /><br /></p>
<p style="text-align: center;"><img src="https://s3.amazonaws.com/client-branding.infopluswms.com/infopluscommerce/logo_blue_trans.png" alt="" width="200" height="27" /></p>

---

QR Barcode Examples

QR barcodes act exactly the same as traditional barcodes. The reason you might choose a QR code over a traditional barcode is because of space. Sometimes traditional barcodes can get long or dense and a scanner might struggle to read it, either due to the dpi of the printer or the way the barcode is generated. In this case, a QR code is a good solution because it can store far more data in a much smaller space. 

To make a QR code, follow all the same steps to make a barcode, but you will add in one additional line of code to call the Google API: 

1. As the image source, you will need to add in a call to the Google API using this URL: 

• https://qrcode.tec-it.com/API/QRCode?data=$record.sku

2. You will need to change the last part of the URL after the =$ (current {record.sku} in the above example) for whatever variable (record, SKU, location, PO number, etc) you want to create the barcode for in Infoplus

• You will also need to change anywhere else in the script where the $record.variable is mentioned. 

---

QR Barcode & Traditional Barcode for Item Example

Configuration:

Source Code:

<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td><img src="$barcodes.sku" alt="Address" width="175" height="30" /></td>
<td><img src="https://qrcode.tec-it.com/API/QRCode?data=$record.sku" alt="address qr code" width="40" height="40" /></td>
</tr>
<tr>
<td>$record.sku</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

---

QR Barcode Bin Example (with an Up Arrow)

Configuration:

Source Code:
<center>

<table width="100%">
<tbody>
<tr>
<td style="width: 15%; vertical-align: middle;">
<p><img src="https://qrcode.tec-it.com/API/QRCode?data=$record.address" alt="address qr code" width="100" height="100" /></p>
</td>
<td style="width: 70%; vertical-align: middle;"><span style="font-size: 45px; font-weight: bold; text-align: -webkit-center;">$record.address</span></td>
<td style="width: 15%; text-align: right; vertical-align: middle;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEX///8AAADv7+/29vbz8/P39/c2NjYvLy8tLS00NDQoKCg5OTkxMTEqKiolJSVoaGinp6dEREQ/Pz/h4eHY2Niurq6SkpJQUFBqamq2gfgaAAAEzUlEQVR4nO2d63aiMBRGQUDrbaq1t/d/0rFFKpcAyclJ8sH69m9nhS3nRkjHLIvK5ZpfL3GXjEr1lv/wVqW+kFAUx7zmWKS+lDAU27xhu0rF4pQ/Oa1QsWoL3hVXl4vVMe9yXJliccr7rCtQDYLrUmxV0TbrqaiDHFxbLpa7EcE835WpL06DalzwrriCu1iMhegjUBefiyNFZj3lxtgmuiy7aRT7WcE83y9YcbRN9HJxseWmnA/RR6AutGkUU22iy26RgTpbRdsssaI6CS5RcWJUM7O0AW5yVBtRXFRFnRnVzCxpgLNq9EOW0/od2kSXpTQN4R1czl20HNXMLGGAK188BPP8Bb5piHOwAT0XHScZE9jTjYIgtqLzqGYGd4Cz2LKwA3VjQzSqmcEc4Kyf6G1AfOr3bhNd8JqGShVtg1ZRK23BuyLUAOc5qplBGuCqEIJ3RZi7qNgmuqA0DfUi8wSj3CiNamYQBji1Uc1M+gEuWA42pM5F1VHNTNoBTnlUM5NygAtYRdukq6iRBNMpBhnVzKQZ4AKNaiOKCQa4aCFaEz9QS/nWvYx95EANOqqZiTvAebx8kRPztU3kHGyIl4sR20SXWE2jSCV4V4xyFxOFaE2MQE0qGEMxQZvoErppRHlcmlEMehcTh2hNyECN8ERvQ7infoAQrQkVqElGNTNhBjiIHGwIkYvlObVVh7N6LiYc1cxoD3BQIVqjG6hAReaJZrkRjmr/Anyyjd4AJ3z5crpZf/QmXEHpLgpz8FCW1p8ty4NoDZ1cFIbovsw21h/eSPfuNAJV2CZ+Nv9cDKWK/k1DHKKZo2FWysqNb6AKz8nUE4eboXRq8jx38ypbtM4OR8OslH2drz6C76Ilm+c3V0Pp8+e7h+FFsuDfUOxsmMmahs9/WiQxfD6BuxvK7qKPoSBKt88OJTAU5aJPlLpXmvZzm8RQUFG/fQSdm9ShPWOIDP2WFFA45X63/coMHaebs/dQ41Leeu9phYZOihqvozbWg2l/70Rq6PCtnnr/UqhomRiDr1NsaP2GUms/qrBS3A5WkxtaNo2z2hkUm0A1bLV7GFo9lWru7m9mm5QpXnwMLXLxRSUHbdcznnbxMpwd4LT3hKdzcZiD/oYzTeOgvq8/lYsjXdfTcDJwdNpE73pH7+JYvPgaTgxwhwCC4wPc6E6Jt+FooOq1id56xoo6fqTO33Ck3IQ7rWBqGhMlTcHQmIu7ICH6WG+QGFNdV8PQ0Pr1Xx226TcNc5t4oGI4GOAOgY8Ld5vG9JEBHcPeGB7+zy82rcSYiRclw04ungPm4HC9uQ11LcNWRY1zOLEpN5M5+IOa4V9f9N+ysKP83YF7nc14PcOs+F3yO95R7/fLxWKTUtEwy24fHzf/C1dG1RASGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQHxrSEB8a0hAfGtIQn8riVxp/2QX+gaNwfFoafqa+UDlfVoJfqS/Th8t11u/q88PhFvwHSJ9J1G+G7tsAAAAASUVORK5CYII=" alt="" width="50" height="60" /></td>
</tr>
</tbody>
</table>
</center>