Shopify Packing Slip Template Generator

{%- comment -%}
  Packing slip {{ order.name }} — Liquid template for Shopify's Order Printer app.
  Paste this into Order Printer > your template > Edit code, or create a new template with it.
{%- endcomment -%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Packing slip {{ order.name }}</title>
<style>
  * { box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #111; margin: 0; padding: 32px; font-size: 13px; line-height: 1.5; background: #fff; }
  .doc { max-width: 760px; margin: 0 auto; }
  .row { display: flex; justify-content: space-between; gap: 24px; }
  .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 16px; }
  h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; }
  h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #666; margin: 24px 0 8px; }
  table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e3e3e3; font-size: 12.5px; }
  th { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; color: #666; border-bottom: 2px solid #111; }
  td.num, th.num { text-align: right; }
  .totals { margin-top: 12px; width: 260px; margin-left: auto; }
  .totals div { display: flex; justify-content: space-between; padding: 4px 0; }
  .totals .grand { font-weight: 700; border-top: 2px solid #111; margin-top: 4px; padding-top: 8px; font-size: 15px; }
  .muted { color: #666; }
  .box { border: 1px solid #ddd; border-radius: 8px; padding: 12px 14px; }
  .scan { text-align: center; }
  @media print { body { padding: 0; } @page { size: auto; margin: 12mm; } }
@media print { @page { size: A4; margin: 14mm; } }</style>
</head>
<body>
<div class="doc">
<div class="head">
  <div>
    <h1>Packing slip</h1>
    <p class="muted">Order {{ order.name }} · {{ order.created_at | date: "%B %d, %Y" }}</p>
  </div>
  <div class="box" style="text-align:right">
    <p><strong>{{ shop.name }}</strong></p>
    {%- if shop.email %}<p class="muted">{{ shop.email }}</p>{% endif -%}
  </div>
</div>
<div class="row">
  <div>
    <h2>Ship to</h2>
    <p><strong>{{ shipping_address.name }}</strong></p>
    <p class="muted">
      {{ shipping_address.address1 }}{% if shipping_address.address2 != blank %}<br>{{ shipping_address.address2 }}{% endif %}<br>
      {{ shipping_address.city }}, {{ shipping_address.province_code }} {{ shipping_address.zip }}<br>
      {{ shipping_address.country }}
    </p>
  </div>
  <div style="text-align:right">
    <h2>Order details</h2>
    <p>Email: {{ order.email }}</p>
    {%- if order.phone %}<p>Phone: {{ order.phone }}</p>{% endif -%}
  </div>
</div>
{%- if order.note != blank -%}
<div class="box" style="margin-bottom:16px">
  <h2 style="margin-top:0">Gift message</h2>
  <p>{{ order.note }}</p>
</div>
{%- endif -%}
<table>
  <thead>
    <tr>
      <th>SKU</th>
      <th>Item</th>
      <th class="num">Qty</th>
    </tr>
  </thead>
  <tbody>
    {%- for line in line_items -%}
    <tr>
      <td>{{ line.sku }}</td>
      <td>{{ line.title }}{% if line.variant_title != blank and line.variant_title != "Default Title" %} ({{ line.variant_title }}){% endif %}</td>
      <td class="num">{{ line.quantity }}</td>
    </tr>
    {%- endfor -%}
  </tbody>
</table>
<div class="scan" style="margin-top:20px">
  <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ order.name | url_encode }}" width="120" height="120" alt="Scan for order {{ order.name }}">
  <p class="muted">{{ order.name }}</p>
</div>
<h2>Returns</h2>
<p class="muted">Questions about this order? Contact {{ shop.email }}.</p>
</div>
</body>
</html>