📖 Looking for karrio's legacy docs? Visit docs.karrio.io

Document Template Management

Community Edition
Advanced Feature

The document template system allows you to create custom business documents including invoices, packing slips, shipping labels, and custom forms. Use the visual template designer to build branded documents that match your business needs.

Template Designer Interface

Document template designer showing drag-and-drop interface with formatting options

Template System Overview

Document Types

Karrio supports various document templates:

Business Documents

  • Invoices: Customer billing documents
  • Packing Slips: Order fulfillment documentation
  • Commercial Invoices: International shipping forms
  • Certificates of Origin: Export documentation
  • Custom Forms: Business-specific documents

Shipping Documents

  • Shipping Labels: Carrier-specific label formats
  • Return Labels: Customer return documentation
  • Manifest Documents: Batch shipping summaries
  • Customs Forms: International trade documentation

Template Features

Visual Designer

  • Drag-and-Drop Interface: Intuitive document building
  • WYSIWYG Editor: See results as you design
  • Grid Layout: Precise element positioning
  • Real-time Preview: Instant design feedback

Dynamic Content

  • Variable Substitution: Automatic data population
  • Conditional Logic: Show/hide based on data
  • Calculated Fields: Automatic calculations
  • Multi-language Support: Localized documents

Accessing Templates

Navigation

Access template management:

  1. Settings Menu: Navigate to Settings → Templates
  2. Template Editor: Use the visual designer interface
  3. Template List: View and manage existing templates
  4. Quick Access: Template shortcuts in relevant workflows

Template Categories

Templates are organized by purpose:

Order Templates

  • Order Confirmation: Customer order acknowledgment
  • Packing Slips: Fulfillment documentation
  • Shipping Labels: Order-specific labels
  • Return Forms: Customer return documentation

Invoice Templates

  • Sales Invoices: Customer billing
  • Commercial Invoices: International shipping
  • Credit Notes: Refund documentation
  • Statements: Account summaries

Shipping Templates

  • Carrier Labels: FedEx, UPS, DHL specific formats
  • Customs Forms: International documentation
  • Manifest Reports: Batch shipping summaries
  • Tracking Notifications: Customer communications

Creating New Templates

Template Creation Process

Build templates with the visual designer:

  1. Choose Template Type: Select document category
  2. Start with Base: Use blank or existing template
  3. Add Elements: Drag components to canvas
  4. Configure Properties: Set element attributes
  5. Preview and Test: Verify with sample data
  6. Save and Deploy: Make template available

Design Elements

Text Elements

  • Static Text: Fixed labels and headers
  • Dynamic Fields: Variable content from data
  • Rich Text: Formatted text with styling
  • Multi-line Text: Paragraphs and descriptions

Layout Components

  • Headers: Document titles and branding
  • Footers: Contact information and disclaimers
  • Tables: Structured data display
  • Sections: Grouped content areas
  • Dividers: Visual content separation

Data Fields

  • Order Information: Order numbers, dates, status
  • Customer Data: Names, addresses, contact info
  • Product Details: Items, quantities, prices
  • Shipping Info: Carriers, services, tracking
  • Company Details: Business information
Tip

Template Variables

Use template variables like {order.order_id} or {customer.name} to dynamically populate document content. The system automatically replaces these with actual data when generating documents.

Template Designer Features

Visual Editor Tools

Element Manipulation

  • Drag and Drop: Move elements visually
  • Resize Handles: Adjust element dimensions
  • Alignment Guides: Precise positioning
  • Layer Management: Control element stacking

Formatting Options

  • Typography: Fonts, sizes, colors, alignment
  • Borders: Element borders and styling
  • Background: Colors and patterns
  • Spacing: Margins and padding
  • Visibility: Show/hide conditions

Property Configuration

Element Properties

  • Position: X, Y coordinates and sizing
  • Content: Text content and variables
  • Style: Font, color, and appearance
  • Behavior: Conditional display rules
  • Data Binding: Link to data sources

Template Settings

  • Page Size: A4, Letter, custom dimensions
  • Margins: Document edge spacing
  • Orientation: Portrait or landscape
  • Units: Inches, centimeters, pixels
  • Color Mode: RGB, CMYK for printing

Template Variables and Data

Available Data Sources

Templates can access various data:

Order Data

1<!-- Order Information -->
2{{order.order_id}}
3{{order.created_at}}
4{{order.status}}
5{{order.total_value}}
6{{order.currency}}
7
8<!-- Line Items -->
9{{#each order.line_items}}
10  {{title}}
11  - Qty:
12  {{quantity}}
13  - Price:
14  {{value_amount}}
15{{/each}}

Customer Information

1<!-- Shipping Address -->
2{{order.shipping_to.person_name}}
3{{order.shipping_to.address_line1}}
4{{order.shipping_to.city}},
5{{order.shipping_to.state_code}}
6{{order.shipping_to.postal_code}}
7
8<!-- Contact Details -->
9{{order.shipping_to.email}}
10{{order.shipping_to.phone_number}}

Company Details

1<!-- Business Information -->
2{{company.name}}
3{{company.address}}
4{{company.phone}}
5{{company.email}}
6{{company.website}}
7{{company.logo_url}}

Shipment Data

1<!-- Shipping Information -->
2{{shipment.tracking_number}}
3{{shipment.carrier_name}}
4{{shipment.service}}
5{{shipment.estimated_delivery}}
6{{shipment.shipping_cost}}

Conditional Logic

Show content based on conditions:

1<!-- Show only for international orders -->
2{{#if order.is_international}}
3  <div>Customs Declaration Required</div>
4{{/if}}
5
6<!-- Display different content by status -->
7{{#switch order.status}}
8  {{#case "fulfilled"}}
9    <div>Order Complete</div>
10  {{/case}}
11  {{#case "partial"}}
12    <div>Partially Fulfilled</div>
13  {{/case}}
14  {{#default}}
15    <div>Processing Order</div>
16  {{/default}}
17{{/switch}}

Calculations and Formatting

Numeric Formatting

1<!-- Currency formatting -->
2{{formatCurrency order.total_value order.currency}}
3
4<!-- Number formatting -->
5{{formatNumber item.quantity 0}}
6
7<!-- Percentage -->
8{{formatPercent discount_rate 2}}

Date Formatting

1<!-- Date formats -->
2{{formatDate order.created_at "MM/DD/YYYY"}}
3{{formatDate shipment.estimated_delivery "MMMM Do, YYYY"}}
4{{formatTime shipment.pickup_time "h:mm A"}}
Warning

Data Availability

Template variables depend on the context where the template is used. Not all data is available in every situation. Test templates thoroughly with different data scenarios.

Template Management

Template Organization

Categories and Tags

  • Organize by Type: Group related templates
  • Tag System: Label templates for easy finding
  • Search Function: Find templates quickly
  • Favorite Templates: Mark frequently used templates

Version Control

  • Template Versions: Track template changes
  • Revision History: See template evolution
  • Rollback Options: Revert to previous versions
  • Change Tracking: Monitor template modifications

Template Deployment

Activation Process

  1. Design Template: Create using visual editor
  2. Test with Sample Data: Verify with real data
  3. Review Output: Check generated documents
  4. Activate Template: Make available for use
  5. Monitor Usage: Track template performance

Usage Integration

  • Order Processing: Automatic template selection
  • Manual Generation: On-demand document creation
  • Batch Processing: Multiple document generation
  • API Integration: Programmatic template usage

Branding and Customization

Brand Identity Integration

Visual Branding

  • Logo Placement: Company logo positioning
  • Color Schemes: Brand color consistency
  • Typography: Brand font selection
  • Layout Design: Professional document appearance

Business Information

  • Company Details: Name, address, contact information
  • Legal Information: Registration numbers, tax IDs
  • Terms and Conditions: Standard business terms
  • Disclaimers: Legal and service disclaimers

Multi-language Support

Localization Features

  • Language Selection: Template language variants
  • Content Translation: Multi-language text
  • Regional Formatting: Date, currency, address formats
  • Cultural Adaptation: Local business practices

Implementation

1<!-- Language-specific content -->
2{{#if language.en}}
3  <div>Thank you for your order</div>
4{{/if}}
5{{#if language.es}}
6  <div>Gracias por su pedido</div>
7{{/if}}
8{{#if language.fr}}
9  <div>Merci pour votre commande</div>
10{{/if}}

Document Generation

Generation Triggers

Templates generate documents automatically:

Order Events

  • Order Creation: Confirmation documents
  • Fulfillment: Packing slips and labels
  • Shipping: Carrier documentation
  • Delivery: Completion certificates

Manual Generation

  • On-Demand: Generate specific documents
  • Batch Processing: Multiple document creation
  • Custom Triggers: Business-specific events
  • API Requests: Programmatic generation

Output Formats

Supported Formats

  • PDF: Professional document format
  • HTML: Web-displayable format
  • PNG: Image format for labels
  • SVG: Scalable vector graphics

Optimization Options

  • Print Quality: High-resolution for printing
  • Screen Display: Optimized for viewing
  • Email Delivery: Compressed for transmission
  • Archive Format: Long-term storage

Advanced Template Features

Dynamic Tables

Create tables with variable row counts:

1<!-- Order items table -->
2<table>
3  <thead>
4    <tr>
5      <th>Item</th>
6      <th>Quantity</th>
7      <th>Price</th>
8      <th>Total</th>
9    </tr>
10  </thead>
11  <tbody>
12    {{#each order.line_items}}
13    <tr>
14      <td>{{title}}</td>
15      <td>{{quantity}}</td>
16      <td>{{formatCurrency value_amount ../order.currency}}</td>
17      <td>{{formatCurrency (multiply quantity value_amount) ../order.currency}}</td>
18    </tr>
19    {{/each}}
20  </tbody>
21</table>

Conditional Sections

Show sections based on data:

1<!-- International shipping section -->
2{{#if order.is_international}}
3<div class="customs-section">
4  <h3>Customs Information</h3>
5  <p>Customs Value: {{formatCurrency order.declared_value order.currency}}</p>
6  <p>Country of Origin: {{order.origin_country}}</p>
7
8  {{#each order.customs_items}}
9  <div>
10    <span>{{description}}: {{quantity}} x {{formatCurrency unit_value ../order.currency}}</span>
11  </div>
12  {{/each}}
13</div>
14{{/if}}

Custom Styling

Apply CSS styles to elements:

Template-specific styles */
1.header {
2  background-color: #f8f9fa;
3  padding: 20px;
4  border-bottom: 2px solid #dee2e6;
5}
6
7.company-logo {
8  max-height: 60px;
9  float: left;
10  margin-right: 20px;
11}
12
13.order-table {
14  width: 100%;
15  border-collapse: collapse;
16  margin: 20px 0;
17}
18
19.order-table th,
20.order-table td {
21  border: 1px solid #dee2e6;
22  padding: 8px;
23  text-align: left;
24}
25
26.total-row {
27  font-weight: bold;
28  background-color: #f8f9fa;
29}

Integration with Orders and Shipments

Automatic Template Selection

The system automatically selects appropriate templates:

Selection Logic

  • Document Type: Invoice, packing slip, label
  • Order Source: Different templates per source
  • Customer Preferences: Custom template requirements
  • Business Rules: Automated template assignment

Template Mapping

Template assignment rules
1const templateRules = {
2  order_confirmation: {
3    default: "standard_confirmation",
4    wholesale: "wholesale_confirmation",
5    international: "international_confirmation",
6  },
7  packing_slip: {
8    default: "standard_packing",
9    fragile: "fragile_packing",
10    multi_package: "split_packing",
11  },
12  invoice: {
13    default: "standard_invoice",
14    tax_exempt: "tax_exempt_invoice",
15    international: "commercial_invoice",
16  },
17};

Batch Document Generation

Generate multiple documents efficiently:

Bulk Operations

  • Select Multiple Orders: Choose orders for processing
  • Template Selection: Pick appropriate templates
  • Generate All: Create documents in batch
  • Download Archive: Get all documents together

Processing Workflow

  1. Order Selection: Choose orders to process
  2. Template Validation: Verify template compatibility
  3. Data Preparation: Gather order information
  4. Document Generation: Create PDF/HTML files
  5. Archive Creation: Package documents for download

Troubleshooting

Common Template Issues

Design Problems

  • Element Positioning: Objects not aligning correctly
  • Data Missing: Variables not displaying values
  • Formatting Issues: Text or numbers displaying incorrectly
  • Layout Problems: Elements overlapping or misplaced

Data Issues

  • Variable Errors: Template variables not resolving
  • Missing Information: Required data not available
  • Formatting Problems: Dates, numbers, currency display issues
  • Conditional Logic: If/then statements not working

Generation Failures

  • Template Errors: Syntax or logic problems
  • Data Access: Cannot retrieve order/shipment information
  • Output Problems: PDF generation failures
  • Performance Issues: Slow document generation

Debugging Templates

Testing Approach

  1. Use Sample Data: Test with known good data
  2. Check Variables: Verify all variables resolve correctly
  3. Validate Logic: Test conditional statements
  4. Review Output: Check generated document quality
  5. Performance Testing: Verify generation speed

Common Solutions

  • Variable Syntax: Ensure correct Handlebars syntax
  • Data Availability: Check data exists in context
  • CSS Conflicts: Resolve styling issues
  • Template Structure: Verify proper HTML structure

Best Practices

Template Design Guidelines

Design Principles

  • Clean Layout: Simple, professional appearance
  • Consistent Branding: Match company visual identity
  • Clear Hierarchy: Logical information organization
  • Readable Typography: Appropriate fonts and sizes
  • Print Compatibility: Ensure documents print correctly

Content Organization

  • Essential Information First: Most important data prominent
  • Logical Grouping: Related information together
  • White Space: Adequate spacing for readability
  • Clear Labels: Obvious field identification
  • Contact Information: Easy to find business details

Performance Optimization

Efficient Templates

  • Minimize Elements: Use only necessary components
  • Optimize Images: Compress logos and graphics
  • Efficient Logic: Streamline conditional statements
  • Cache Static Content: Reuse common elements
  • Test Performance: Monitor generation times

Scalability Considerations

  • Bulk Generation: Optimize for multiple documents
  • Large Orders: Handle orders with many line items
  • Complex Data: Efficiently process detailed information
  • Resource Usage: Monitor server performance

API Integration

Programmatic Template Management

Manage templates via API:

Template Operations

Get available templates
1const templates = await karrio.templates.list({
2  type: "invoice",
3  active: true,
4});
5
6// Generate document
7const document = await karrio.documents.generate({
8  template_id: "invoice_template_123",
9  order_id: "order_456",
10  format: "pdf",
11});
12
13// Download generated document
14const documentUrl = document.document_url;

Batch Generation

Generate multiple documents
1const batchRequest = {
2  template_id: "packing_slip_template",
3  orders: ["order_1", "order_2", "order_3"],
4  format: "pdf",
5};
6
7const batchResult = await karrio.documents.batchGenerate(batchRequest);

Next Steps

Now that you understand document templates:

  1. Developer Tools - Access APIs for template automation
  2. Label Creation - Use templates in shipping workflows
  3. Order Management - Generate order documents automatically
  4. Live vs Test Mode - Test templates safely

Need help? Join our community Discord or contact our support team.