Edit Template - Pick and Pack

Template Name
Output Size
Default
Multi-Store
Uses store profiles to show correct store info per order tag.
Template Code (Jinja2 HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  @page { size: 8.5in 11in; margin: 0; }

  .invoice {
    display: flex;
    flex-direction: column;
    width: 8.5in;
    min-height: 10in;
    margin: 0;
    padding: 36px;
    page-break-after: always;
  }
  .invoice:last-child {
    page-break-after: auto;
  }

  .invoice * {
    font-family: "Open Sans", sans-serif !important;
    font-size: 10px;
    font-weight: normal;
    line-height: 1.4;
    box-sizing: border-box;
  }
  .invoice p { margin: 0 0 6px 0; }
  .invoice a { color: #000; text-decoration: none; }

  .invoice .header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 24px;
    justify-content: space-between;
    border-bottom: 2px solid #000;
    padding-bottom: 16px;
  }
  .invoice .order-title {
    flex: 1;
  }
  .invoice .shop-logo-area {
    flex-shrink: 0;
    text-align: right;
  }
  .invoice .invoice-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 12px 0;
    line-height: 1.2;
  }
  .invoice .shop-logo {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 90px;
    object-fit: contain;
  }
  .invoice .barcode-img {
    height: auto;
    max-height: 40px;
    margin-bottom: 6px;
  }

  .invoice .subtitle-bold {
    font-weight: bold;
    font-size: 10px;
  }

  .invoice .customer-addresses {
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
    gap: 40px;
  }
  .invoice .billing-address {
    flex: 1;
  }
  .invoice .shipping-address {
    flex: 1;
  }
  .invoice .address-title {
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 8px;
    text-decoration: underline;
  }

  .invoice hr {
    height: 1px;
    border: none;
    border-bottom: 1px solid #333;
    margin: 12px 0;
  }

  .invoice .order-table {
    margin: 0 0 16px 0;
  }
  .invoice .order-table-header {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    border-bottom: 2px solid #000;
    padding: 8px 0;
    margin-bottom: 4px;
  }
  .invoice .order-table-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
    page-break-inside: avoid;
  }
  .invoice .item-description {
    flex: 3;
  }
  .invoice .item-description-line { display: block; margin: 0; }
  .invoice .item-description p { margin: 0; line-height: 1.5; }
  .invoice .item-sku {
    flex: 1;
    text-align: center;
  }
  .invoice .item-quantity {
    flex: 0.5;
    text-align: center;
  }
  .invoice .item-price {
    flex: 1;
    text-align: right;
  }
  .invoice .item-total {
    flex: 1;
    text-align: right;
  }

  .invoice .totals-section {
    margin-top: 16px;
    margin-left: auto;
    width: 280px;
  }
  .invoice .totals-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 4px 0;
  }
  .invoice .totals-label {
    font-size: 10px;
  }
  .invoice .totals-value {
    text-align: right;
    font-size: 10px;
  }
  .invoice .order-total-row {
    font-weight: bold;
    font-size: 12px;
    border-top: 2px solid #000;
    padding-top: 8px;
    margin-top: 4px;
  }
  .invoice .order-total-row .totals-label,
  .invoice .order-total-row .totals-value {
    font-size: 12px;
    font-weight: bold;
  }

  .invoice .payment-status {
    margin-top: 12px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 4px;
    text-align: center;
    font-size: 10px;
  }

  .invoice .notes-section {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
  }

  .invoice .footer {
    margin-top: auto;
    text-align: center;
    line-height: 1.4;
    font-size: 9px;
    padding-top: 16px;
    border-top: 1px solid #ccc;
  }

  @media print {
    @page { size: 8.5in 11in; margin: 0; }
    html, body { margin: 0; padding: 0; }
    .invoice {
      width: 8.5in;
      max-height: 11in;
      min-height: auto;
      padding: 36px;
      margin: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
</style>
</head>
<body style="margin:0;padding:0;">
{% for order_data in orders %}
{% set order = order_data.order if order_data.order is defined else order_data %}
{% set shipping_address = order_data.shipping_address if order_data.shipping_address is defined else {} %}
{% set billing_address = order_data.billing_address if order_data.billing_address is defined else {} %}
{% set line_items = order_data.line_items if order_data.line_items is defined else [] %}
{% set barcode_base64 = order_data.barcode_base64 if order_data.barcode_base64 is defined else '' %}

<div class="invoice">
  <div class="header">
    <div class="order-title">
      <p class="invoice-title">Invoice</p>
      {% if barcode_base64 %}
        <img src="{{ barcode_base64 }}" class="barcode-img"><br>
      {% endif %}
      <p><strong>Order:</strong> {{ order.name }}</p>
      <p><strong>Date:</strong> {{ order.created_at.strftime('%b %d, %Y') if order.created_at else '' }}</p>
      {% if order.shipping_method %}
        <p><strong>Shipping:</strong> {{ order.shipping_method }}</p>
      {% endif %}
    </div>
    <div class="shop-logo-area">
      {% if settings.logo_url %}
        <img src="{{ settings.logo_url }}" class="shop-logo">
      {% endif %}
    </div>
  </div>

  <div class="customer-addresses">
    <div class="billing-address">
      <p class="address-title">BILL TO</p>
      {% if billing_address %}
        <p><strong>{{ billing_address.name or '' }}</strong></p>
        {% if billing_address.company %}<p>{{ billing_address.company }}</p>{% endif %}
        <p>{{ billing_address.address1 or '' }}{% if billing_address.address2 %}<br>{{ billing_address.address2 }}{% endif %}</p>
        <p>{{ billing_address.city or '' }}, {{ billing_address.province_code or '' }} {{ billing_address.zip or '' }}</p>
        {% if billing_address.country %}<p>{{ billing_address.country }}</p>{% endif %}
      {% endif %}
    </div>
    <div class="shipping-address">
      <p class="address-title">SHIP TO</p>
      {% if shipping_address %}
        <p><strong>{{ shipping_address.name or '' }}</strong></p>
        {% if shipping_address.company %}<p>{{ shipping_address.company }}</p>{% endif %}
        <p>{{ shipping_address.address1 or '' }}{% if shipping_address.address2 %}<br>{{ shipping_address.address2 }}{% endif %}</p>
        <p>{{ shipping_address.city or '' }}, {{ shipping_address.province_code or '' }} {{ shipping_address.zip or '' }}</p>
        {% if shipping_address.country %}<p>{{ shipping_address.country }}</p>{% endif %}
      {% endif %}
    </div>
  </div>

  <div class="order-table">
    <div class="order-table-header">
      <div class="item-description subtitle-bold">Item</div>
      <div class="item-sku subtitle-bold" style="text-align: center;">SKU</div>
      <div class="item-quantity subtitle-bold" style="text-align: center;">Qty</div>
      <div class="item-price subtitle-bold" style="text-align: right;">Unit Price</div>
      <div class="item-total subtitle-bold" style="text-align: right;">Total</div>
    </div>
    {% for item in line_items %}
      <div class="order-table-row">
        <div class="item-description">
          <p>
            <span class="item-description-line"><strong>{{ item.product_title }}</strong></span>
            {% if item.variant_options %}
              {% for option in item.variant_options %}
                <span class="item-description-line" style="font-size: 9px; color: #666;">{{ option }}</span>
              {% endfor %}
            {% endif %}
          </p>
        </div>
        <div class="item-sku" style="text-align: center;">
          {{ item.sku or '' }}
        </div>
        <div class="item-quantity" style="text-align: center;">
          {{ item.quantity }}
        </div>
        <div class="item-price" style="text-align: right;">
          {% if item.price %}{{ '%.2f' | format(item.price | float) }}{% else %}0.00{% endif %}
        </div>
        <div class="item-total" style="text-align: right;">
          {% if item.price and item.quantity %}{{ '%.2f' | format((item.price | float) * (item.quantity | int)) }}{% else %}0.00{% endif %}
        </div>
      </div>
    {% else %}
      <div class="order-table-row">
        <p>No items on this invoice</p>
      </div>
    {% endfor %}
  </div>

  <div class="totals-section">
    <div class="totals-row">
      <div class="totals-label">Subtotal</div>
      <div class="totals-value">{{ order.subtotal_price if order.subtotal_price else order.total_price }} {{ order.currency or '' }}</div>
    </div>
    {% if order.total_tax %}
    <div class="totals-row">
      <div class="totals-label">Tax</div>
      <div class="totals-value">{{ order.total_tax }} {{ order.currency or '' }}</div>
    </div>
    {% endif %}
    <div class="totals-row order-total-row">
      <div class="totals-label">Total</div>
      <div class="totals-value">{{ order.total_price }} {{ order.currency or '' }}</div>
    </div>
  </div>

  {% if order.financial_status %}
  <div class="payment-status">
    <strong>Payment Status:</strong> {{ order.financial_status | upper }}
  </div>
  {% endif %}

  {% if order.note %}
  <div class="notes-section">
    <p class="subtitle-bold">Order Notes</p>
    <p>{{ order.note }}</p>
  </div>
  {% endif %}

  {% if settings.footer_text %}
  <div class="footer">
    <p>{{ settings.footer_text | e | replace("\n", "<br>") }}</p>
  </div>
  {% endif %}
</div>
{% endfor %}
</body>
</html>
AI-Powered Template editing assisted by AI. Results may vary — review before saving.
Hi! I can help you edit your template. Describe the changes you'd like to make.
Live Preview
Ready
Available Template Variables

Version History

Available Template Variables

Version History

Unsaved Changes
