Update Your HTML Inventory Templates for PDF Generator Upgrade

Update Your HTML Inventory Templates for PDF Generator Upgrade

Who is this for?

This upgrade applies only to the organizations that support the old PDF generator. Zoho CRM will notify these users with an in-app banner inside the Inventory Templates page and while generating PDFs. 

Hence, only the users from these organizations will have to update their HTML inventory templates.

What needs to be done?

All you need to do is review and edit the header, footer, and page number tags in the HTML of the inventory templates to the supported format. After saving the template, generate a PDF of it to check the alignment by switching to the new PDF generator. 

To avoid breakages or misalignment in the generated PDF and ensure compatibility with the optimized PDF generator, kindly complete this update by March 31, 2026. 
Notes
Note: As a fallback option, the old PDF generator will be available for a month and then be discontinued.  
The example provided illustrates the use of header tags. You can apply the same approach to other tags using the detailed guidance that follows.


How to update

To update your HTML tags for all your inventory templates that were created using HTML, follow the alignment steps below.
  1. Navigate to Setup → Customization → Templates → Inventory.
  2. Click the edit icon of the template created with HTML.
  3. Click on the Edit HTML icon.
  4. Look near the top of your HTML for the outermost <table> tag. In the old templates, it typically looks like this:
    Quote
    <table>
    <thead> 
         <!-- your header content: logo, company name, etc. --> 
       </thead> 
       <tbody> 
         <!-- your main content: line items, totals, etc. --> 
       </tbody> 
       <tfoot> 
         <!-- your footer content: page numbers, terms, etc. --> 
       </tfoot> 
    </table>

  5. Replace that entire outer table with three separate HTML section blocks. Copy your header, body, and footer content into the corresponding block:
    Quote
    <!-- HEADER BLOCK --> 
     <section id="header-container" class=""> 
       <div id="pdfgen-header"> 
         <!-- Paste your former <thead> content here --> 
       </div> 
     </section> 
       
     <!-- BODY / CONTENT BLOCK --> 
     <section id="page-container" class=""> 
       <div id="pdfgen-content"> 
         <!-- Paste your former <tbody> content here --> 
       </div> 
     </section> 

       <!-- FOOTER BLOCK --> 
     <section id="footer-container" class=""> 
       <div id="pdfgen-footer"> 
         <!-- Paste your former <tfoot> content here --> 
       </div> 
     </section> 

  6. The old engine used a CSS counter technique to generate page numbers. The enhanced engine injects page numbers automatically, so this CSS is no longer needed and should be removed. Only remove the .pagenum counter rules. Do not delete your entire <style> block — all other CSS (fonts, colors, table styles, spacing, etc.) should remain in place.
  7. After migration, if you notice extra unexpected whitespace around the edges of your PDF, add this CSS to reset the default browser spacing:
    Quote
     <style> 
       html { 
         margin: 0px; 
         padding: 0px; 
       } 
     </style> 
    This is optional — only add it if you see spacing issues in the preview.
Edit your HTML code for header, footer, and page number elements as given in the table below.
Elements
Unsupported formats
Supported formats
Header
Content enclosed within <thead>...</thead> inside table body.
Content should be enclosed within

<section id="header-container"class="">
<div id="pdfgen-header">
...
</div>
</section>

CSS required for header content should be provided as follows:

<style>
#pdfgen-header {
}
</style>
Footer
Content enclosed within <tfoot>...</tfoot> inside table body.
Content should be enclosed within

<section id="footer-container"class="">
<div id="pdfgen-footer">
...
</div>
</section>

CSS required for footer content should be provided as follows:

<style>
#pdfgen-footer {
}
</style>
Page number


<span
class="pagenum"></span>
<style>
*.pagenum:after {
counter-increment: page;
content: "" counter(page);
}
</style>
<span class="pageNumber"></span>

To get total page number count use

<span class="totalPage"></span>

What can remain the same?

  1. Except for the above mentioned changes, the remaining code structure can be maintained.
  2. Layout table: sits at the very top level of your HTML, wraps everything, has <thead>/<tbody>/<tfoot> as its direct children.
  3. Data table: sits inside the body content area and has rows/columns of actual business data (products, prices, etc.).
  4. Only the layout table needs to be replaced. Data tables inside it remain unchanged. 
  5. Only remove the .pagenum counter rules. Do not delete your entire <style> block — all other CSS (fonts, colors, table styles, spacing, etc.) should remain in place.
Once you've updated the tags, save your template and generate a PDF of it to check the alignment. By default, you will see the preview in the new (Primary) PDF generator. If your preview is misaligned, switch to the old (Legacy) PDF generator so that you view the preview produced by the Legacy PDF generator.

Migration

After completing all the steps, you can begin the migration to the new PDF generator by clicking the Proceed to Migration button on the Inventory Templates page. This option is available to all administrators.

Idea
Still seeing issues?
  1. Check that you do not have multiple header-container or footer-container sections in the same template.
  2. Verify there are no <tr> or <td> tags outside a real <table> element.
  3. Confirm the class name is pageNumber (capital N) — not pagenum.
  4. Ensure you have not accidentally removed CSS that was unrelated to .pagenum page counters.

If you have any questions regarding this update, please reach out to support@zohocrm.com. Thank you for your patience as we continue to enhance Zoho CRM.