Branding Templates

Invoice Templates

Create and manage custom invoice templates

Overview

Invoice templates allow you to create custom invoice layouts and designs. You can have multiple templates for different use cases.

Creating an Invoice Template

Step 1: Navigate to Templates

  1. Go to SettingsTemplates
  2. Click New Template

Step 2: Basic Information

Fill in template details:

  • Template Name - Descriptive name
  • Description - Template description (optional)
  • Status - Active or Inactive

Step 3: Layout Configuration

Choose layout type:

  • Standard - Traditional invoice layout
  • Compact - Condensed layout
  • Detailed - Expanded layout with more details

Step 4: Custom Header (Optional)

Add custom HTML header:

<div class="custom-header">
  <h1>Your Custom Header</h1>
</div>

Add custom HTML footer:

<div class="custom-footer">
  <p>Thank you for your business!</p>
</div>

Step 6: Custom CSS (Optional)

Add custom CSS styling:

{
  "invoice": {
    "fontSize": "14px",
    "color": "#333"
  },
  "header": {
    "backgroundColor": "#f5f5f5"
  }
}

Step 7: Save Template

Click Save to create the template.

Template Management

Viewing Templates

  1. Go to SettingsTemplates
  2. View all templates:
    • Template name
    • Status (Active/Inactive)
    • Default indicator
    • Actions

Setting Default Template

Set a template as default:

  1. Open the template
  2. Click Set as Default
  3. Confirm

Default template is used for:

  • New invoices (unless specified)
  • Recurring invoices (unless specified)

Activating/Deactivating Templates

  • Active - Available for use
  • Inactive - Hidden from selection

Editing Templates

  1. Open the template
  2. Click Edit
  3. Make changes
  4. Save

Deleting Templates

  1. Open the template
  2. Click Delete
  3. Confirm deletion

Warning: Deleting a template does not affect existing invoices that used it.

Template Selection

When Creating Invoice

  1. Create new invoice
  2. Select template from dropdown
  3. Template applied to invoice

Default Template

If no template selected:

  • Uses organization default template
  • Or system default template

Template Layouts

Standard Layout

  • Traditional invoice format
  • Company header
  • Line items table
  • Totals section
  • Footer

Compact Layout

  • Condensed format
  • Smaller spacing
  • Essential information only
  • Good for simple invoices

Detailed Layout

  • Expanded format
  • More information displayed
  • Additional sections
  • Good for complex invoices

Custom HTML

Header HTML

Customize invoice header:

<div class="invoice-header">
  <img src="logo.png" alt="Logo">
  <h1>Invoice</h1>
</div>

Customize invoice footer:

<div class="invoice-footer">
  <p>Payment terms: Net 30</p>
  <p>Thank you!</p>
</div>

Custom CSS

Style your templates with CSS:

Basic Styling

{
  "body": {
    "fontFamily": "Arial, sans-serif",
    "fontSize": "12px"
  },
  "header": {
    "backgroundColor": "#ffffff",
    "padding": "20px"
  },
  "table": {
    "width": "100%",
    "borderCollapse": "collapse"
  }
}

Advanced Styling

  • Custom colors
  • Font styling
  • Spacing and padding
  • Border styles
  • Background colors

Template Best Practices

  1. Test Templates - Preview before using
  2. Keep It Simple - Don't overcomplicate
  3. Consistent Branding - Match company branding
  4. Mobile Friendly - Consider mobile viewing
  5. Professional - Maintain professional appearance

Use Cases

Different Clients

  • Custom templates per client type
  • Industry-specific layouts
  • Branded templates for partners

Different Services

  • Service-specific templates
  • Product-specific layouts
  • Project-specific formats

Different Regions

  • Region-specific formats
  • Language-specific templates
  • Currency-specific layouts

Next Steps