Packing slip HTML template for orders

A clean A4 packing slip with ship-to address, item checklist and gift note. Generate one per Shopify or WooCommerce order automatically.

Convert this to PDF → Download .html

Paper: A4 · preview scaled to fit

Render it with the API

curl https://html-pdf.com/v1/pdf \
  -H "Authorization: Bearer $HTML_PDF_KEY" \
  -F "index.html=@packing-slip.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o packing-slip.pdf

Or ask your AI agent: "Make me a packing slip PDF using the html-pdf.com packing slip template." · Guides · API reference

Tips

Each row has a checkbox so warehouse staff can tick items as they pack.
Rows never split across pages, so long orders stay readable.
Automate it per order: see Shopify or WooCommerce.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Packing slip #1042</title>
<style>
  @page { size: A4; margin: 16mm; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 12px; line-height: 1.5; margin: 0; }
  .top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 22px; }
  h1 { font-size: 24px; margin: 0; letter-spacing: -0.02em; }
  .muted { color: #666; }
  .cols { display: flex; gap: 40px; margin-bottom: 26px; }
  .cols div { flex: 1; }
  .label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: 4px; }
  table { width: 100%; border-collapse: collapse; }
  thead { display: table-header-group; }
  th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #888; text-align: left; padding: 8px 0; border-bottom: 1px solid #111; }
  td { padding: 10px 0; border-bottom: 1px solid #eee; vertical-align: top; }
  tr { break-inside: avoid; }
  .r { text-align: right; } .c { text-align: center; }
  .box { width: 14px; height: 14px; border: 1.5px solid #111; display: inline-block; }
  .note { margin-top: 30px; padding: 12px 14px; border: 1px dashed #999; }
  @media screen {
    html { background: #e9e9e7; }
    body { width: 210mm; min-height: 297mm; margin: 24px auto; padding: 16mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); }
  }
</style>
</head>
<body>
  <div class="top">
    <div><h1>Packing slip</h1><div class="muted">Order #1042 · October 10, 2026</div></div>
    <div class="r"><strong>Your Shop</strong><br><span class="muted">yourshop.example</span></div>
  </div>
  <div class="cols">
    <div><div class="label">Ship to</div><strong>Jordan Example</strong><br>Carrer de Mallorca 401<br>08013 Barcelona, Spain</div>
    <div><div class="label">Shipping method</div>Standard, 2 to 4 days<div class="label" style="margin-top:10px">Packages</div>1 of 1</div>
  </div>
  <table>
    <thead><tr><th class="c">Packed</th><th>Item</th><th>SKU</th><th class="r">Qty</th></tr></thead>
    <tr><td class="c"><span class="box"></span></td><td>Ceramic mug, sand<br><span class="muted">350 ml</span></td><td>MUG-SND-350</td><td class="r">2</td></tr>
    <tr><td class="c"><span class="box"></span></td><td>Linen tea towel, olive</td><td>TWL-OLV</td><td class="r">1</td></tr>
    <tr><td class="c"><span class="box"></span></td><td>Gift card</td><td>GIFT-NOTE</td><td class="r">1</td></tr>
  </table>
  <div class="note"><strong>Gift note.</strong> Happy birthday! Enjoy your morning coffee.</div>
  <p class="muted" style="margin-top:28px">Questions about your order? Reply to your confirmation email. Thank you for shopping with us.</p>
</body>
</html>

More templates

Invoice · Receipt · Certificate · Report · Resume · Proposal · Shipping label · Event ticket · Quote · Purchase order · Timesheet · all templates