Advanced Template Development

Code Editor Overview

Pixi's Code Editor has three tabs for building custom templates:

• Liquid: HTML rendering and data display
• Query: GraphQL data fetching
• Schema: Template Customizer configuration

1. Liquid Tab

Build your document structure with HTML, CSS, and Liquid variables. Access order data fetched by GraphQL and customizer values from Schema.

Available Variables

{{ order }}        # GraphQL query results
{{ config }}       # Template Customizer values
{{ settings }}     # Global workspace settings

Basic Template

<style>
  .invoice { font-family: sans-serif; }
  .total { font-weight: bold; text-align: right; }
</style>

<h1>Invoice {{ order.name }}</h1>
<p>{{ order.billingAddress.name }}<br>
   {{ order.email }}</p>

<table class="invoice">
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line in order.lineItems.edges %}
    <tr>
      <td>{{ line.node.title }}</td>
      <td>{{ line.node.quantity }}</td>
      <td>{{ line.node.discountedTotalSet | money }}</td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" class="total">Total</td>
      <td class="total">{{ order.totalPriceSet | money }}</td>
    </tr>
  </tfoot>
</table>

2. Query Tab

Fetch order data from Shopify using GraphQL. Modify fields inside the order node.

Query Structure

query GetOrder($id: ID!) {
  order(id: $id) {
    name
    email
    billingAddress { name city country }
    lineItems(first: 50) {
      edges {
        node {
          title
          quantity
          discountedTotalSet { shopMoney { amount currencyCode } }
        }
      }
    }
    totalPriceSet { shopMoney { amount currencyCode } }
  }
}

Common Fields

• Order details: name, email, createdAt
• Addresses: billingAddress, shippingAddress
• Line items: lineItems with pagination
• Totals: totalPriceSet, subtotalPriceSet
• Metafields: metafields(namespace: "custom")
• Fulfillments: fulfillments(first: 10)
• Refunds: refunds(first: 10)

3. Schema Tab

Configure the Template Customizer UI with JSON. Define sections and input fields.

Schema Structure

{
  "sections": [
    {
      "id": "global",
      "name": "Branding and Style",
      "info": "Font sizes and colors",
      "settings": [
        {
          "id": "logo_show",
          "type": "checkbox",
          "label": "Show Logo",
          "default": true
        },
        {
          "id": "store_logo",
          "type": "image_picker",
          "label": "Add Logo",
          "default": "defaults:store_logo"
        }
      ]
    }
  ]
}

Common input types: text, checkbox, range, color, select, image_picker, header.

Access in Liquid

{% if config.global.logo_show %}
  <img src="{{ config.global.store_logo }}" />
{% endif %}

<style>
  h1 { 
    font-size: {{ config.global.heading_size }}px;
    color: {{ config.global.primary_color }};
  }
</style>

Combining All Three Tabs

Step 1: Add fields to GraphQL

order(id: $id) {
  statusPageUrl
}

Step 2: Configure Schema inputs

{
  "sections": [
    {
      "id": "footer",
      "name": "Footer Settings",
      "info": "Configure footer elements",
      "settings": [
        {
          "id": "show_tracking",
          "type": "checkbox",
          "label": "Display tracking link",
          "default": true
        }
      ]
    }
  ]
}

Step 3: Use in Liquid template

{% if config.footer.show_tracking and order.statusPageUrl %}
  <a href="{{ order.statusPageUrl }}">Track your order</a>
{% endif %}

Tips

• Keep GraphQL queries minimal for performance
• Use Schema for user-configurable options
• Test templates with different order types
• Reference GraphQL fields with dot notation in Liquid