New 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; }

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

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

  .commercial-invoice .header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 20px;
    justify-content: space-between;
    border-bottom: 2px solid #000;
    padding-bottom: 12px;
  }
  .commercial-invoice .invoice-title-section {
    flex: 1;
  }
  .commercial-invoice .shop-logo-area {
    flex-shrink: 0;
    text-align: right;
  }
  .commercial-invoice .commercial-invoice-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px 0;
  }
  .commercial-invoice .shop-logo {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 80px;
    object-fit: contain;
  }

  .commercial-invoice .invoice-details {
    display: flex;
    flex-direction: row;
    margin-bottom: 16px;
    gap: 40px;
  }
  .commercial-invoice .detail-box {
    flex: 1;
  }
  .commercial-invoice .detail-label {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 10px;
  }
  .commercial-invoice .detail-content p {
    margin: 2px 0;
  }

  .commercial-invoice .exporter-section {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-bottom: 20px;
  }
  .commercial-invoice .exporter-box,
  .commercial-invoice .importer-box {
    flex: 1;
  }
  .commercial-invoice .section-title {
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 8px;
    text-decoration: underline;
  }

  .commercial-invoice .shipping-details {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-bottom: 20px;
  }
  .commercial-invoice .shipping-method-box,
  .commercial-invoice .origin-destination-box {
    flex: 1;
  }

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

  .commercial-invoice .items-table {
    margin: 16px 0;
  }
  .commercial-invoice .table-header {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    border-bottom: 2px solid #000;
    padding: 8px 0;
    margin-bottom: 8px;
  }
  .commercial-invoice .table-header-cell {
    flex: 1;
    font-size: 10px;
  }
  .commercial-invoice .table-header-description {
    flex: 2;
  }
  .commercial-invoice .table-header-qty {
    flex: 0.5;
    text-align: center;
  }
  .commercial-invoice .table-header-price {
    flex: 0.75;
    text-align: right;
  }
  .commercial-invoice .table-header-value {
    flex: 0.75;
    text-align: right;
  }
  .commercial-invoice .table-header-origin {
    flex: 0.75;
    text-align: center;
  }

  .commercial-invoice .item-row {
    display: flex;
    flex-direction: row;
    padding: 6px 0;
    border-bottom: 1px solid #ddd;
    page-break-inside: avoid;
  }
  .commercial-invoice .item-description {
    flex: 2;
    font-size: 10px;
  }
  .commercial-invoice .item-description-line {
    display: block;
    margin: 0;
  }
  .commercial-invoice .item-qty {
    flex: 0.5;
    text-align: center;
    font-size: 10px;
  }
  .commercial-invoice .item-unit-price {
    flex: 0.75;
    text-align: right;
    font-size: 10px;
  }
  .commercial-invoice .item-value {
    flex: 0.75;
    text-align: right;
    font-size: 10px;
  }
  .commercial-invoice .item-origin {
    flex: 0.75;
    text-align: center;
    font-size: 10px;
    border: 1px solid #ccc;
  }

  .commercial-invoice .summary-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid #000;
  }
  .commercial-invoice .summary-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 20px;
    margin: 4px 0;
  }
  .commercial-invoice .summary-label {
    font-weight: bold;
    font-size: 10px;
    min-width: 150px;
  }
  .commercial-invoice .summary-value {
    font-size: 10px;
    min-width: 80px;
    text-align: right;
  }

  .commercial-invoice .declaration {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #000;
    font-size: 9px;
    line-height: 1.4;
  }
  .commercial-invoice .declaration-text {
    margin: 0;
    font-style: italic;
  }

  .commercial-invoice .signature-section {
    display: flex;
    flex-direction: row;
    gap: 60px;
    margin-top: 20px;
  }
  .commercial-invoice .signature-box {
    flex: 1;
  }
  .commercial-invoice .signature-line {
    border-top: 1px solid #000;
    margin-top: 30px;
    padding-top: 4px;
    font-size: 9px;
  }

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

  @media print {
    @page { size: 8.5in 11in; margin: 0; }
    html, body { margin: 0; padding: 0; }
    .commercial-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="commercial-invoice">
  <div class="header">
    <div class="invoice-title-section">
      <p class="commercial-invoice-title">COMMERCIAL INVOICE</p>
      <p><strong>Invoice Number:</strong> {{ order.name }}</p>
      <p><strong>Date:</strong> {{ order.created_at.strftime('%b %d, %Y') if order.created_at else '' }}</p>
    </div>
    <div class="shop-logo-area">
      {% if settings.logo_url %}
        <img src="{{ settings.logo_url }}" class="shop-logo">
      {% endif %}
    </div>
  </div>

  <div class="invoice-details">
    <div class="detail-box">
      <p class="detail-label">EXPORTER (SELLER)</p>
      <div class="detail-content">
        <p><strong>{{ settings.shop_display_name or '' }}</strong></p>
        <p>{{ settings.shop_email or '' }}</p>
      </div>
    </div>
    <div class="detail-box">
      <p class="detail-label">IMPORTER/CONSIGNEE (BUYER)</p>
      <div class="detail-content">
        {% 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>
          <p>{{ shipping_address.country or '' }}</p>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="shipping-details">
    <div class="shipping-method-box">
      <p class="detail-label">SHIPMENT DETAILS</p>
      {% if order.shipping_method %}
        <p><strong>Shipping Method:</strong> {{ order.shipping_method }}</p>
      {% endif %}
    </div>
    <div class="origin-destination-box">
      <p class="detail-label">SHIPPING ROUTE</p>
      <p><strong>Destination Country:</strong> {{ shipping_address.country or '' }}</p>
    </div>
  </div>

  <hr>

  <div class="items-table">
    <div class="table-header">
      <div class="table-header-cell table-header-description">Description</div>
      <div class="table-header-cell table-header-qty">Qty</div>
      <div class="table-header-cell table-header-price">Unit Price</div>
      <div class="table-header-cell table-header-value">Total Value</div>
      <div class="table-header-cell table-header-origin">Country of Origin</div>
    </div>
    {% for item in line_items %}
      <div class="item-row">
        <div class="item-description">
          <p>
            <span class="item-description-line">{{ item.product_title }}</span>
            {% if item.variant_options %}
              {% for option in item.variant_options %}
                <span class="item-description-line">{{ option }}</span>
              {% endfor %}
            {% endif %}
          </p>
        </div>
        <div class="item-qty">{{ item.quantity }}</div>
        <div class="item-unit-price">{{ '%.2f' | format((item.price | float)) }}</div>
        <div class="item-value">{{ '%.2f' | format((item.quantity | float) * (item.price | float)) }}</div>
        <div class="item-origin"></div>
      </div>
    {% else %}
      <div class="item-row">
        <p>No items for this invoice</p>
      </div>
    {% endfor %}
  </div>

  <div class="summary-section">
    <div class="summary-row">
      <span class="summary-label">Total Items:</span>
      <span class="summary-value">
        {% set total_qty = line_items | map(attribute='quantity') | sum %}
        {{ total_qty }}
      </span>
    </div>
    <div class="summary-row">
      <span class="summary-label">Total Invoice Value:</span>
      <span class="summary-value">{{ order.total_price }} {{ order.currency }}</span>
    </div>
  </div>

  <div class="declaration">
    <p class="declaration-text">I hereby certify that the information on this invoice is true and correct and that the contents of this shipment are as stated above.</p>
  </div>

  <div class="signature-section">
    <div class="signature-box">
      <p style="font-size: 10px; margin: 0 0 4px 0;"><strong>Authorized Signature</strong></p>
      <div class="signature-line">
        <p style="font-size: 9px; margin: 0;">Signature</p>
      </div>
    </div>
    <div class="signature-box">
      <p style="font-size: 10px; margin: 0 0 4px 0;"><strong>Date</strong></p>
      <div class="signature-line">
        <p style="font-size: 9px; margin: 0;">{{ order.created_at.strftime('%b %d, %Y') if order.created_at else '' }}</p>
      </div>
    </div>
  </div>

  {% 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.
Save your template first to enable AI editing.
Available Template Variables

Unsaved Changes
