Liquid Template
Barcode

Barcode Filter Documentation

Overview

The barcode filter is a versatile tool that enables you to generate various types of barcodes directly in your template. You can use this filter to encode texts, numbers, or other data into a barcode image.

Here's how you can use this filter in your template:

 
<img src='{{ "sample" | barcode }}'>
 
<img src='{{ "sample" | barcode: displayValue: true, bgColor: "#fff" }}'>

Parameters

All parameters are optional.

height

  • Type: Integer
  • Default: 50
  • Description: Specifies the height of the barcode in units.

displayValue

  • Type: Boolean
  • Default: false
  • Description: Determines whether to include the text value below the barcode.

textAlign

  • Type: String ("left", "center", "right")
  • Default: "center"
  • Description: Aligns the text value (if displayed) relative to the barcode.

fontSize

  • Type: Integer
  • Default: 12
  • Description: Specifies the font size of the text value (if displayed).

bgColor

  • Type: String (Hex color code)
  • Default: ""
  • Description: Specifies the background color of the barcode. This must be a valid hex color code or an empty string for transparent background.

lineColor

  • Type: String (Hex color code)
  • Default: "#000"
  • Description: Specifies the color of the barcode lines. This must be a valid hex color code.

margin

  • Type: Integer
  • Default: 5
  • Description: Defines the margin around the barcode.

Usage

Here's an example of how you can use the barcode filter to generate a barcode for a given text:

 
<img src='{{ "data" | barcode: displayValue: true, bgColor: "#fff" }}'>

This code will generate a barcode with the text "data", displaying the text below the barcode, and having a white background.

Notes

  • You can override any of the default parameters by specifying them in the filter.
  • Ensure that the data you want to encode in the barcode is compatible with the barcode standards.
  • If an invalid value is provided for any of the parameters, the barcode may not render correctly.

For further information or support, please refer to the official documentation or contact support.

Liquid OverviewCurrency