Astral
/ Pixi

Template Editor

Edit templates using visual customizer or code editor.

Editor Modes

Pixi provides two ways to edit templates:

  1. Customize template - Visual editor with sidebar controls
  2. Code editor - Direct code editing (Liquid, Query, Schema)

Walkthrough of the Customizer

Customize Template Mode

The visual editor lets you modify templates without touching code. Each section in the sidebar controls a specific part of your document:

  • Branding and Style - Fonts, colors, spacing
  • Overview - Logo and invoice details
  • Address - Billing, shipping, QR codes
  • Line Items - Product display options
  • Totals - Subtotal, tax, discounts
  • Notes - Custom messages
  • Footer - Thank you notes, social links

Your changes appear instantly in the preview panel.

Code Editor Mode

The code editor gives you complete control through three tabs:

Liquid Tab

Write HTML with Liquid templating to structure your document. Access all order variables, implement custom logic, and control exactly how data displays.

Query Tab

Add GraphQL queries to fetch additional data like metafields, customer details, or product information that isn't available in the standard order object.

Schema Tab

Define the settings that appear in Customize template mode. This JSON configuration determines what options users see in the visual editor.

Switching Modes

You can toggle between modes at any time. Updates to the Schema tab directly affect what appears in Customize template mode.

Next Steps