Liquid Template
Qrcode

QR Code

The QR liquid filter is a powerful tool that allows you to generate QR codes directly in your template. QR codes can be used to encode various types of data, such as text, URLs, or other information that can be read by a QR code scanner.

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

<img
  src='{{ "sample-data" | qr }}'
>
 
<img
  src='{{ "sample-data" | qr: width: 2, height:2, margin: 1, colorDark:"#f00", colorLight: "#000" }}'
>

Parameters

All parameters are optional.

width

  • Type: Integer
  • Default: 100
  • Description: Specifies the width of the QR code in units.

height

  • Type: Integer
  • Default: 100
  • Description: Specifies the height of the QR code in units.

margin

  • Type: Integer
  • Default: 1
  • Description: Defines the margin around the QR code.

colorDark

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

colorLight

  • Type: String (Hex color code)
  • Default: "#fff"
  • Description: Specifies the color of the light squares in the QR code. This must be a valid hex color code.

Usage

Here's an example of how you can use the barcode liquid filter to generate a QR code for a URL:

<img src='{{ "https://www.example.com" | qr: width: 5, height: 5, colorDark: "#000", colorLight: "#fff" }}'>
CurrencyGraphQL