Order Templates

Order-related documents originating from your shop are automatically rendered using templates. These templates are used during the order process and are formatted in HTML/CSS and Liquid, which are then converted to PDFs when attached to emails sent to customers. They also serve as the basis for the web page equivalents, such as when a customer clicks a link in an email to view their order online. Both the layout and the content of these templates are fully customizable.

This article explains how to customize Order Templates in DecoNetwork—such as Quotes, Invoices, Worksheets, Shipping Labels, Purchase Orders, and Artwork Approvals—using HTML/CSS together with Liquid (the templating language) to insert dynamic order data, loops, and conditional logic.

In This Article

• Prerequisites
• Why customize order templates
• Step 1: Open Order Templates
• Step 2: Choose a template to customize
• Step 3: Enable customization & edit code
• Using Liquid in your edits (quick primer)
• Step 4: Configure template-specific options
• Step 5: Preview, save & test
• Best-practice tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why customize order templates

• Brand consistency: Match document headers, colors, and layout to your brand.
• Operational clarity: Show the right data for customers and production teams (e.g., barcodes, notes, ship method).
• Conditional content: Display fields (discounts, fees, notes) only when they apply.
• Efficiency: Reduce manual edits by automating logic with Liquid.

Step 1: Open Order Templates

1. Go to Admin → Settings → Email and Order Templates → Order Templates.

   

2. Review the list of available templates (e.g., Quote, Invoice, Worksheet, Shipping Label, Purchase Order, Artwork Approval).

   

Step 2: Choose a template to customize

1. Click Edit beside the template you wish to modify.

   The configuration screen for the selected template loads.

   

   Choose the target template—e.g., Invoice or Worksheet—before enabling customization.

Step 3: Enable customization & edit code

1. Select Customize template from the sidebar menu.
2. Scan the code to understand the current structure and data blocks
3. Tick Customize default template to unlock editing.
4. Edit the template’s HTML/CSS and inject Liquid where needed.
5. Make small, incremental changes and preview frequently.

<!-- Example: show a discount row only when present -->
{% if order.discount_amount > 0 %}
  <tr class="totals-row discount">
    <td>Discount</td>
    <td class="amount">{{ order.discount_amount | currency }}</td>
  </tr>
{% endif %}

<!-- Example: loop line items -->
{% for item in order.line_items %}
  <tr class="line-item">
    <td>{{ item.name }}</td>
    <td>{{ item.sku }}</td>
    <td class="qty">{{ item.quantity }}</td>
    <td class="price">{{ item.line_total | currency }}</td>
  </tr>
{% endfor %}

Using Liquid in your edits (quick primer)

Now that you’re in the editor, here’s a short Liquid refresher. For a deeper dive with DN-specific examples, patterns, and a variable catalog, open the Liquid Crash Course (for DN Order Templates).

• Output a variable: {{ order.customer_name }}
• Filters: {{ order.total_price | currency: "USD" }}
• Conditionals:

  {% if order.discount_amount > 0 %}
    <p>Discount: {{ order.discount_amount }}</p>
  {% endif %}

• Loops:

  {% for item in order.line_items %}
    <tr>
      <td>{{ item.sku }}</td>
      <td>{{ item.quantity }}</td>
    </tr>
  {% endfor %}

• Comments: {% comment %} note to future editors {% endcomment %}
• Default/fallback: {{ order.customer_notes | default: "No special instructions." }}
• Whitespace control: {{- variable -}}
• Filter chaining: {{ value | upcase | truncate: 20 }}

Step 4: Configure template-specific Settings

1. Select Settings from the sidebar menu.

   Depending on the template, you may see additional toggles and labels in the Settings section:

   Order Template

   
   • Show Barcode on Invoice: lets you configure whether a barcode will be displayed on the invoice. When scanned, the barcode will load the order in Business Hub. Tick the checkbox to show a barcode on the invoice.
   • Quote Header: lets you change the heading label that is displayed at the top of a quote.
   • Invoice Header: lets you change the heading label that is displayed at the top of an invoiced order.
   • Order Header: lets you change the heading label that is displayed at the top of an order.

   Worksheet Template

   
   • Show Customer Notes on Worksheet: lets you configure whether customer notes will be displayed on the production worksheet. This includes notes to and from the customer. Tick the checkbox to show customer notes on the worksheet.
   • Show Barcodes on Worksheet: lets you configure whether a barcode will be displayed for each line item on the production worksheet. When scanned, the barcode will load the production item in Business Hub. Tick the checkbox to show barcodes on the worksheet.

   Shipping Label Template

   
   • Shipping label branding: lets you choose whether the shipping label will use the Fulfillment Center logo and branding or the affiliate store logo and branding.
   • Display: lets you select what to show on the shipping label:
     • Order number: shows the order number
     • Contact Name: shows the name of the contact who placed the order
     • Ship via: shows the shipping method
     • Total items: shows the total number of items in the order
     • Total weight: shows the order's total weight
     • Number of boxes / parcels: shows the total number of boxes or parcels for the order

   Purchase Order Template

   
   • Show Barcode on Purchase Order: lets you configure whether a barcode will be displayed on the purchase order. When scanned, the barcode will load the purchase order in Business Hub. Tick the checkbox to show a barcode on the purchase order.

   Artwork Approval Template

   
   • Show Barcode on Artwork Approval: lets you configure whether a barcode will be displayed on the artwork approval. When scanned, the barcode will load the artwork approval in Business Hub. Tick the checkbox to show a barcode on the artwork approval.

   Purchase Order Stock Sheet Template

   
   • Show Barcode on Purchase Order: lets you configure whether a barcode will be displayed on the purchase order stock sheet. When scanned, the barcode will load the purchase order in Business Hub. Tick the checkbox to show a barcode on the purchase order stock sheet.

Step 5: Preview, save & test

1. Click Test Template to preview the document to check layout and data.
2. Iterate until everything renders correctly.
3. Click Save to apply your changes.
4. Preview the document (web view or generated PDF) from a real or test order to confirm layout and data.
5. Verify barcode scanning (where enabled) opens the correct order in Business Hub.

Always test with different order scenarios—discounts, multiple items, missing notes—to validate your logic.

Best-practice tips

• Work incrementally: change → save → preview → adjust.
• Comment your logic: use {% comment %} ... {% endcomment %} to explain custom rules.
• Guard optional fields: wrap blocks in {% if %} to avoid blank sections.
• Use defaults: {{ variable | default: "—" }} avoids empty output.
• Be consistent: unify labels, number/date formats, and table structures across templates.
• Keep it readable: format code and group related sections with clear headings/classes.

Troubleshooting

• Blank or wrong data: Variable not in scope or mis-named. Cross-check the variable name in the reference.
• Layout breaks in PDF: Ensure table structures are valid; avoid floating elements that can collapse in print.
• Syntax errors: Confirm every {% if %} has an {% endif %}, and every {% for %} has an {% endfor %}.
• Extra spacing: Use {{- ... -}} to trim whitespace around tags.

FAQs

Q: What language are the “green highlighted lines” in the editor?
They’re Liquid templating syntax—used to print variables, loop collections, and run simple logic inside HTML. See the Liquid primer below and the Liquid Crash Course (for DN Order Templates).

Q: Where can I learn what variables exist?
Use the Order Template Variables Reference for a catalog of fields available in each context, alongside examples in the Liquid Crash Course (for DN Order Templates).

Q: Can I revert to the default template?
Yes. Untick Customize default template (or re-enable Use Default) to restore the system version.

Additional Resources

• Order Template Variables Reference (DecoNetwork) — glossary of DN-specific order variables with descriptions.
• Liquid Crash Course (for DN Order Templates) — a standalone, step-by-step guide to variables, filters, loops, and best practices in the DN context.
• Official Shopify Liquid reference — language syntax and filters.
• How Do I Use the Variables Not in the Default Order Templates?