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 25, 2026.
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.
- Navigate to Setup → Customization → Templates → Inventory.
- Click the edit icon of the template created with HTML.
- Click on the Edit HTML icon.
- Look near the top of your HTML for the outermost <table> tag. In the old templates, it typically looks like this:
<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> - Replace that entire outer table with three separate HTML section blocks. Copy your header, body, and footer content into the corresponding block:
<!-- 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>
-
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.
- After migration, if you notice extra unexpected whitespace around the edges of your PDF, add this CSS to reset the default browser spacing:
<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 break tags 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 remains the same?
- Except for the above mentioned changes, the remaining code structure can be maintained.
- Layout table: sits at the very top level of your HTML, wraps everything, has <thead>/<tbody>/<tfoot> as its direct children.
- Data table: sits inside the body content area and has rows/columns of actual business data (products, prices, etc.).
- Only the layout table needs to be replaced. Data tables inside it remain unchanged.
- 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. To verify the alignment use Click here at the bottom so that you view the preview produced by the optimized (new) PDF generator.
Still seeing issues?
- Check that you do not have multiple header-container or footer-container sections in the same template.
- Verify there are no <tr> or <td> tags outside a real <table> element.
- Confirm the class name is pageNumber (capital N) — not pagenum.
- 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.
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Creating Inventory Templates
With the Zoho CRM - Inventory Templates functionality, you can customize the Quote, Purchase Order, Sales Order and Invoice print layout as per your business requirements. As part of the template customization, you can change the fields in the print ...Troubleshooting Email Templates
Product details are not populated in the table created in a template. Product details will only be available if the default product table in the template has been added. If the fields in the Product Details section are added separately, the values of ...Managing Mail Merge Templates
Mail merge is a function that helps you to simplify repetitive tasks to create personalized documents (forms, letters, address labels, envelopes, etc.). You can create a mail merge template which contains variables (merge fields), which will merge ...Understanding Inventory Template Builder
Components of Template Builder The template builder is made up of various components that can be dragged and dropped on to the template. Header and Footer Header and footer are available at the beginning and the end of the template. You can add them ...FAQs: Inventory Management
How can I create inventory templates? Zoho CRM has a gallery of predefined inventory templates, you can choose any sample and use it for your business purpose. Alternatively, you can build a template of your own and customize it as needed. Follow the ...
New to Zoho LandingPage?
Zoho LandingPage Resources