Astral
/ Pixi

Liquid Template

Pixi-specific variables and custom filters for template customization.

Liquid in Pixi

Liquid is the templating language created and preferred by Shopify for theme development. Pixi uses Liquidjs in its backend, which is directly compatible with Shopify Liquid. If you've worked with Shopify themes before, you already know how to build Pixi templates.

For general Liquid syntax and built-in filters, see:

Core Variables

Pixi provides four main variables that give you access to all the data you need for rendering invoices, packing slips, and other documents. These variables are automatically available in every template.

{{ order }}           # Order data from GraphQL
{{ config }}          # Template Customizer settings
{{ settings }}        # Workspace settings
{{ draftOrder }}      # Draft order data (if applicable)

Accessing Nested Data

Navigate through complex data structures using dot notation. GraphQL returns nested objects for orders, and Schema settings are grouped by sections.

{{ order.name }}                              # Order number
{{ order.billingAddress.name }}               # Customer name
{{ order.lineItems.edges[0].node.title }}     # First item title
{{ config.global.logo_show }}                 # Schema setting value

Pixi Custom Filters

Beyond standard Liquid filters, Pixi adds specialized filters for e-commerce documents. These handle currency formatting, generate visual codes, and transform images—all optimized for invoice and order document creation.

Money Filters

money

Automatically formats currency based on template settings (shop or customer currency). Works with MoneyBag objects from GraphQL or plain numbers.

{{ order.totalPriceSet | money }}              # Auto-formats based on settings
{{ item.discountedTotalSet | money }}          # Works with MoneyBag objects
{{ "99.99" | money }}                          # Formats plain numbers

money_format

Custom currency formatting with format strings:

{{ order.totalPriceSet.presentmentMoney.amount | money_format: '${{amount}}' }}
{{ item.price | money_format: '€ {{amount}}' }}
{{ "99.99" | money_format: '{{amount}} USD' }}

raw_money

Extracts raw number from MoneyBag for calculations:

{% assign subtotal = order.subtotalPriceSet | raw_money %}
{% assign tax = order.totalTaxSet | raw_money %}
{% assign total = subtotal | plus: tax %}
Total: {{ total | money }}

Image Filters

image_url

Transform Shopify CDN image URLs with size parameters:

{{ item.image.url | image_url: width: 300 }}
{{ product.image | image_url: width: 600, height: 400 }}
{{ logo | image_url: width: 200, crop: 'center' }}

Parameters:

  • width or w: Image width
  • height or h: Image height
  • crop or c: Crop position - "left", "right", "top", "bottom", "center"

QR Code

Generate QR codes for any text or URL:

<img src='{{ order.name | qr }}'>
<img src='{{ order.statusPageUrl | qr: width: 3, margin: 1, colorDark: "#000" }}'>

Parameters:

  • width: QR code module width (default: 3)
  • margin: White space around code (default: 1)
  • colorDark: Foreground color (default: "#000")
  • colorLight: Background color (default: "#fff")

Barcode

Generate barcodes for SKUs, order numbers, or any text:

<img src='{{ item.sku | barcode }}'>
<img src='{{ order.name | barcode: height: 50, displayValue: true, fontSize: 14 }}'>

Parameters:

  • height: Barcode height in units (default: 50)
  • displayValue: Show text below barcode (default: false)
  • fontSize: Text size when displayed (default: 12)
  • textAlign: Text alignment - "left", "center", "right" (default: "center")
  • bgColor: Background color hex (default: transparent)
  • lineColor: Barcode line color (default: "#000")
  • margin: Space around barcode (default: 5)

Icons

icon_tag

Renders SVG icons:

{{ 'facebook' | icon_tag }}
{{ 'mail' | icon_tag: class: 'social-icon' }}
{{ 'gift' | icon_tag: class: 'icon-large' }}

Available icons: facebook, instagram, web, bank, mail, link, twitter, tiktok, discount, gift