Professional packing slip templates for your e-commerce business. Preview instantly, print to PDF, or copy the HTML code.
Add checkboxes next to each item so packers can verify all items are included.
Always include SKU or product codes for easy identification and inventory tracking.
For retail/gift orders, omit prices. Include them only for wholesale or B2B.
Use your logo and brand colors. Packing slips are a touchpoint with customers.
Clean, professional design with all essential information. Perfect for most businesses.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Packing Slip - Order #[ORDER_NUMBER]</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; font-size: 12px; color: #333; padding: 20px; }
.container { max-width: 800px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #333; padding-bottom: 15px; margin-bottom: 20px; }
.logo { font-size: 24px; font-weight: bold; }
.company-info { font-size: 11px; color: #666; margin-top: 5px; }
.order-info { text-align: right; }
.order-number { font-size: 18px; font-weight: bold; }
.addresses { display: flex; gap: 40px; margin-bottom: 20px; }
.address-block { flex: 1; }
.address-label { font-weight: bold; font-size: 11px; color: #666; margin-bottom: 5px; text-transform: uppercase; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th { background: #f5f5f5; padding: 10px; text-align: left; font-size: 11px; text-transform: uppercase; border-bottom: 2px solid #333; }
td { padding: 10px; border-bottom: 1px solid #ddd; }
.checkbox { width: 20px; height: 20px; border: 1px solid #333; display: inline-block; }
.totals { background: #f9f9f9; padding: 15px; margin-bottom: 20px; }
.notes { border-top: 1px solid #ddd; padding-top: 15px; margin-top: 20px; }
.footer { text-align: center; margin-top: 30px; padding-top: 15px; border-top: 1px solid #ddd; font-size: 11px; color: #666; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<div>
<div class="logo">[COMPANY_NAME]</div>
<div class="company-info">
[ADDRESS]<br>
[CITY, STATE ZIP]<br>
[PHONE] | [EMAIL]
</div>
</div>
<div class="order-info">
<div class="order-number">Order #[ORDER_NUMBER]</div>
<div>Order Date: [ORDER_DATE]</div>
<div>Ship Date: [SHIP_DATE]</div>
</div>
</div>
<div class="addresses">
<div class="address-block">
<div class="address-label">Ship To</div>
<div>
[SHIP_NAME]<br>
[SHIP_ADDRESS]<br>
[SHIP_CITY_STATE_ZIP]<br>
[SHIP_PHONE]
</div>
</div>
<div class="address-block">
<div class="address-label">Bill To</div>
<div>
[BILL_NAME]<br>
[BILL_ADDRESS]<br>
[BILL_CITY_STATE_ZIP]<br>
[BILL_PHONE]
</div>
</div>
</div>
<table>
<thead>
<tr>
<th>Qty</th>
<th>SKU</th>
<th>Description</th>
<th>Packed</th>
</tr>
</thead>
<tbody>
<!-- Repeat for each item -->
<tr>
<td>[QTY]</td>
<td>[SKU]</td>
<td>[DESCRIPTION]</td>
<td><span class="checkbox"></span></td>
</tr>
</tbody>
</table>
<div class="totals">
<strong>Total Items: [TOTAL_ITEMS]</strong>
</div>
<div class="notes">
<strong>Special Instructions:</strong><br>
[SPECIAL_INSTRUCTIONS]
</div>
<div class="footer">
Thank you for your order!<br>
Questions? Contact us at [EMAIL]
</div>
</div>
</body>
</html>Includes item prices and order totals. Good for wholesale or B2B orders.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Packing Slip - Order #[ORDER_NUMBER]</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; font-size: 12px; color: #333; padding: 20px; }
.container { max-width: 800px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; border-bottom: 2px solid #333; padding-bottom: 15px; margin-bottom: 20px; }
.logo { font-size: 24px; font-weight: bold; }
.order-info { text-align: right; }
.addresses { display: flex; gap: 40px; margin-bottom: 20px; }
.address-block { flex: 1; padding: 15px; background: #f9f9f9; }
.address-label { font-weight: bold; margin-bottom: 8px; text-transform: uppercase; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th { background: #333; color: white; padding: 10px; text-align: left; }
td { padding: 10px; border-bottom: 1px solid #ddd; }
.text-right { text-align: right; }
.totals { width: 300px; margin-left: auto; }
.totals tr td { padding: 5px 10px; }
.totals .grand-total { font-size: 16px; font-weight: bold; background: #f5f5f5; }
.payment-status { margin-top: 20px; padding: 10px; background: #d4edda; color: #155724; text-align: center; }
.footer { text-align: center; margin-top: 30px; font-size: 11px; color: #666; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<div>
<div class="logo">[COMPANY_NAME]</div>
<div>[ADDRESS], [CITY_STATE_ZIP]</div>
<div>[PHONE] | [EMAIL]</div>
</div>
<div class="order-info">
<div style="font-size: 18px; font-weight: bold;">Order #[ORDER_NUMBER]</div>
<div>Order Date: [ORDER_DATE]</div>
<div>Ship Date: [SHIP_DATE]</div>
</div>
</div>
<div class="addresses">
<div class="address-block">
<div class="address-label">Ship To</div>
[SHIP_NAME]<br>[SHIP_ADDRESS]<br>[SHIP_CITY_STATE_ZIP]
</div>
<div class="address-block">
<div class="address-label">Bill To</div>
[BILL_NAME]<br>[BILL_ADDRESS]<br>[BILL_CITY_STATE_ZIP]
</div>
</div>
<table>
<thead>
<tr>
<th>Qty</th>
<th>SKU</th>
<th>Description</th>
<th class="text-right">Price</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>[QTY]</td>
<td>[SKU]</td>
<td>[DESCRIPTION]</td>
<td class="text-right">[PRICE]</td>
<td class="text-right">[LINE_TOTAL]</td>
</tr>
</tbody>
</table>
<table class="totals">
<tr><td>Subtotal:</td><td class="text-right">[SUBTOTAL]</td></tr>
<tr><td>Shipping:</td><td class="text-right">[SHIPPING]</td></tr>
<tr><td>Tax:</td><td class="text-right">[TAX]</td></tr>
<tr class="grand-total"><td>TOTAL:</td><td class="text-right">[TOTAL]</td></tr>
</table>
<div class="payment-status">
Payment Status: PAID via [PAYMENT_METHOD]
</div>
<div class="footer">
Thank you for your business! | [WEBSITE]
</div>
</div>
</body>
</html>Clean, simple design without prices. Ideal for gifts or retail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Packing Slip</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px; color: #333; padding: 40px; }
.container { max-width: 600px; margin: 0 auto; }
.header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.company-name { font-size: 28px; font-weight: 300; letter-spacing: 2px; margin-bottom: 10px; }
.order-info { color: #888; }
.shipping-address { margin-bottom: 30px; padding: 20px; background: #f9f9f9; }
.label { font-size: 12px; color: #888; text-transform: uppercase; margin-bottom: 8px; }
.items { margin-bottom: 30px; }
.items-title { font-size: 12px; color: #888; text-transform: uppercase; margin-bottom: 15px; }
.item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
.checkbox { width: 18px; height: 18px; border: 1px solid #ddd; margin-right: 15px; flex-shrink: 0; }
.footer { text-align: center; padding-top: 30px; border-top: 1px solid #eee; color: #888; font-size: 13px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="company-name">[COMPANY_NAME]</div>
<div class="order-info">
Order #[ORDER_NUMBER]<br>
[ORDER_DATE]
</div>
</div>
<div class="shipping-address">
<div class="label">Ship To</div>
<div>
[SHIP_NAME]<br>
[SHIP_ADDRESS]<br>
[SHIP_CITY_STATE_ZIP]
</div>
</div>
<div class="items">
<div class="items-title">Items in this shipment</div>
<!-- Repeat for each item -->
<div class="item">
<span class="checkbox"></span>
<span>([QTY]) [DESCRIPTION]</span>
</div>
</div>
<div class="footer">
Thank you for shopping with us!<br>
[WEBSITE]
</div>
</div>
</body>
</html>Includes promotional content and social media. Great for brand building.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thanks for your order!</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; color: #333; }
.container { max-width: 650px; margin: 0 auto; padding: 30px; }
.header { text-align: center; padding: 30px; background: linear-gradient(135deg, [BRAND_COLOR] 0%, [BRAND_COLOR_2] 100%); color: white; border-radius: 10px; margin-bottom: 25px; }
.logo { font-size: 32px; font-weight: bold; margin-bottom: 5px; }
.tagline { font-size: 14px; opacity: 0.9; }
.order-bar { display: flex; justify-content: space-between; padding: 15px 20px; background: #f8f8f8; border-radius: 8px; margin-bottom: 25px; }
.greeting { font-size: 18px; margin-bottom: 20px; }
.items-section { margin-bottom: 25px; }
.items-title { font-weight: bold; margin-bottom: 15px; text-transform: uppercase; font-size: 12px; color: #666; }
.item { display: flex; align-items: center; padding: 12px; background: #f9f9f9; margin-bottom: 8px; border-radius: 6px; }
.item-check { color: [BRAND_COLOR]; margin-right: 12px; font-size: 18px; }
.promo-box { background: linear-gradient(135deg, #fff6e5 0%, #ffe4cc 100%); padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 25px; }
.promo-title { font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.promo-code { font-size: 24px; font-weight: bold; color: [BRAND_COLOR]; background: white; display: inline-block; padding: 8px 20px; border-radius: 5px; margin-top: 10px; }
.social-box { background: #333; color: white; padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 25px; }
.footer { text-align: center; font-size: 12px; color: #888; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">[COMPANY_NAME]</div>
<div class="tagline">[TAGLINE]</div>
</div>
<div class="order-bar">
<span><strong>Order #[ORDER_NUMBER]</strong></span>
<span>Ship Date: [SHIP_DATE]</span>
</div>
<div class="greeting">
Hi [CUSTOMER_FIRST_NAME]! 👋<br>
<span style="color: #666; font-size: 14px;">Thanks for your order! We hope you love it.</span>
</div>
<div class="items-section">
<div class="items-title">Your Items</div>
<div class="item">
<span class="item-check">✓</span>
<span>[ITEM_DESCRIPTION]</span>
</div>
</div>
<div class="social-box">
<div style="font-size: 16px; margin-bottom: 8px;">⭐ SHARE YOUR STYLE! ⭐</div>
<div style="font-size: 13px; opacity: 0.8;">Tag us @[SOCIAL_HANDLE] for a chance to be featured!</div>
</div>
<div class="promo-box">
<div class="promo-title">🎁 YOUR EXCLUSIVE OFFER</div>
<div style="font-size: 13px;">15% off your next order!</div>
<div class="promo-code">[PROMO_CODE]</div>
</div>
<div class="footer">
📧 [EMAIL] | 🌐 [WEBSITE]<br>
📱 @[SOCIAL_HANDLE] on Instagram, TikTok, Twitter
</div>
</div>
</body>
</html>Click "Copy HTML" on your chosen template. The complete HTML code is copied to your clipboard.
Find and replace bracketed placeholders like [COMPANY_NAME], [ORDER_NUMBER], [SHIP_NAME], etc. Use your e-commerce platform's merge tags if available.
Update the CSS colors to match your brand. Replace [BRAND_COLOR] with your hex color code (e.g., #6366f1). Add your logo image URL.
Open the HTML file in a browser and print a test page. Adjust margins and sizing as needed. Most templates are designed for standard letter/A4 paper.
Upload to Shopify, WooCommerce, or your shipping software. Most platforms have a custom template section in packing slip settings.
Go to Settings → Shipping → Packing Slips. Click "Edit" and paste your HTML template. Use Shopify's Liquid variables for dynamic data.
Install a packing slip plugin like "WooCommerce PDF Invoices". Go to WooCommerce → PDF Invoices → Templates and upload your custom template.
atoship automatically generates packing slips with your branding. Go to Settings → Documents → Packing Slips to customize the template.
Get started free →atoship automatically generates matching shipping labels and packing slips. Save time with batch printing and professional branding.