How to change Headings on Sale Invoice

sleepycat · April 16, 2026, 6:08pm

Heyy, how do I change the heading for “Item” to “Services”. I have been trying to figure it out for hours and can’t find a solution for it. Btw I have used Non inventory items for this invoice. and is there a way I can change “Qty” to hours?

zeem · April 16, 2026, 8:25pm

Do you mean something like this?
Settings-----Theme-----

sleepycat · April 17, 2026, 3:50am

OMG YESSSS. I followed the link but I can’t find themes on the form defaults. When I go to “settings” and click on “themes”, I get like a coding kind of thing, if that’s what it is called, so I don’t know what to do. I see so many comments on “themes” and its easy to use but I don’t know why am I getting this. the version I am using is 26.4.16 and it’s the desktop download version. I will show you the screenshot, one by one cause it doesn’t allow me to show multiple screenshot / can’t let me show the screen recording

sleepycat · April 17, 2026, 3:51am

sleepycat · April 17, 2026, 3:52am

sleepycat · April 17, 2026, 3:52am

This is what I see when I click on “New Themes”

zeem · April 17, 2026, 2:59pm

Go to:
Settings → Themes → New Theme
Paste your HTML/CSS (Liquid) code
Save the theme
When creating an invoice:
Select your theme from the Theme dropdown

</body>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
	<style>
		@page {
			size: A4;
			margin: 15mm;
		}

		*, ::after, ::before, ::backdrop, ::file-selector-button {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			border: 0 solid;
		}

		/* تم تعديل عرض الصفحة ليملأ المساحة بدون سكرول */
		html, body {
			background-color: #ffffff;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden; /* يمنع ظهور أشرطة التمرير الخاصة بـ body */
		}

		.paper-container {
			width: 100%;
			max-width: 210mm;
			background-color: #ffffff;
			padding: 20px; /* تقليل البادينغ ليتناسب مع نافذة العرض */
			margin: 0 auto; /* توسيط المحتوى بدون هوامش خارجية تسبب سكرول */
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			color: #171717;
			font-size: 12px;
			line-height: 1.428571429;
		}

		address {
			font-style: normal;
			line-height: 1.5em;
		}

		dt {
			font-weight: bold;
			margin: 0 0 2px 0;
		}

		dd {
			margin: 0 0 16px 0;
		}

		dd:last-of-type {
			margin-bottom: 0;
		}

		@media print {
			html, body {
				overflow: visible;
			}
			.paper-container {
				width: 100%;
				max-width: none;
				padding: 0;
				margin: 0;
			}
		}

		table {
			font-size: 12px;
			width: 100%;
		}

		tr#table-headers th {
			font-weight: bold;
			padding: 5px 10px;
			border: 1px solid #000;
			text-align: start;
		}

		tbody#table-rows td {
			padding: 5px 10px;			
			text-align: start;
			vertical-align: top;
		}

		tbody#table-rows tr.row td {
			border-left: 1px solid #000;
			border-right: 1px solid #000;
		}

		tbody#table-rows tr.last-row td {
			padding-bottom: 30px;
			border-bottom: 1px solid #000;
		}

		tbody#table-rows tr.column-total td {
			font-weight: bold;
			border: 1px solid #000;
			white-space: nowrap;
			text-align: right;
		}

		tbody#table-rows tr.total td {
			white-space: nowrap;
		}

		tbody#table-rows tr.total td:first-child {
			text-align: end;
		}

		tbody#table-rows tr.total td:last-child {
			border: 1px solid #000;
			text-align: right;
		}
	</style>
</head>
<body>
	<div class="paper-container">
		<table>
			<thead>
				<tr>
					<td>
						<header style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
							<h1 id="title" style="font-size: 32px; line-height: 32px; font-weight: bold;"></h1>
							<div id="business-logo" style="text-align: end"></div>
						</header>

						<section style="display: flex; margin-bottom: 20px; width: 100%; align-items: flex-start; gap: 20px;">
							<address id="recipient-info" style="flex: 1;"></address>
							<dl id="fields" style="flex: 1; text-align: end;"></dl>
							<div aria-hidden="true" style="width: 1px; border-left: 1px solid #000; align-self: stretch;"></div>
							<address id="business-info" style="white-space: nowrap"></address>
						</section>

						<p style="font-weight: bold; font-size: 14px; margin-bottom: 20px" id="description"></p>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<table style="border-collapse: collapse; width: 100%">
							<thead>
								<tr id="table-headers"></tr>
							</thead>
							<tbody id="table-rows"></tbody>
						</table>

						<script src="resources/qrcode/qrcode.js"></script>
						<script src="resources/writtennumber/writtennumber.js"></script>
						<div id="qrcode" style="margin-bottom: 20px; margin-top: 20px;"></div>

						<div id="custom-fields"></div>

						<table><tr><td><div id="footers"></div></td></tr></table>

						<div id="status" style="text-align: center"></div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<script>
		function sendResize() {
			// تم تقليص القيم المضافة لعدم تجاوز إطار البرنامج
			window.parent.postMessage({
				type: "resize",
				width: document.body.scrollWidth,
				height: document.body.scrollHeight
			}, "*");
		}

		window.addEventListener("message", (event) => {
			if (event.source !== window.parent) return;
			if (event.data.type !== 'context-response') return;

			const data = event.data.body;

			if (data && data.table && data.table.columns) {
				data.table.columns.forEach(col => {
					if (col.label === "Item" || col.label === "العنصر" || col.label === "الوصف") {
						col.label = "Services";
					}
					if (col.label === "Qty" || col.label === "الكمية" || col.label === "الكميات") {
						col.label = "Hours";
					}
				});
			}

			document.documentElement.dir = data.direction;
			document.title = [data?.business?.name, data?.title, data?.reference].filter(Boolean).join(' - ');

			document.getElementById("title").innerHTML = data.title || "No title";
			document.getElementById("description").innerHTML = data.description || "";

			var businessLogoTd = document.getElementById("business-logo");
			if (data.business.logo) {
				const img = document.createElement("img");
				img.addEventListener("load", sendResize);
				img.src = data.business.logo;
				img.style = "max-height: 100px; max-width: 200px; display: inline"; 
				businessLogoTd.appendChild(img);
			}

			const business = data.business || {};
			document.getElementById("business-info").innerHTML = `<strong>${business.name || ""}</strong><br>${business.address ? business.address.replace(/\\n/g, "<br>") : ""}`;

			const recipient = data.recipient || {};
			document.getElementById("recipient-info").innerHTML = `<strong>${recipient.name || ""}</strong><br>${recipient.address ? recipient.address.replace(/\\n/g, "<br>") : ""}`;

			const fieldsDiv = document.getElementById("fields");
			fieldsDiv.innerHTML = "";
			(data.fields || []).forEach(f => {
				const dt = document.createElement("dt");
				dt.innerHTML = f.label;
				const dd = document.createElement("dd");
				dd.innerHTML = f.text;
				fieldsDiv.appendChild(dt);
				fieldsDiv.appendChild(dd);
			});

			const headersRow = document.getElementById("table-headers");
			headersRow.innerHTML = "";
			(data.table.columns || []).forEach(col => {
				const th = document.createElement("th");
				th.innerHTML = col.label;
				th.style.textAlign = col.align;
				
				if (col.minWidth) {
					th.style.whiteSpace = 'nowrap';
					th.style.width = '1px';
				}
				else if (col.nowrap) {
					th.style.whiteSpace = 'nowrap';
					th.style.width = '80px';
				}
				headersRow.appendChild(th);
			});

			const rowsBody = document.getElementById("table-rows");
			rowsBody.innerHTML = "";
			(data.table.rows || []).forEach(row => {
				const tr = document.createElement("tr");
				tr.className = 'row';
				
				row.cells.forEach((cell, i) => {
					var col = data.table.columns[i];
					const td = document.createElement("td");
					td.innerHTML = (cell.text || "").split("\\n").join("<br />");
					td.style.textAlign = col.align;
					
					if (col.minWidth) {
						td.style.whiteSpace = 'nowrap';
						td.style.width = '1px';
					}
					else if (col.nowrap) {
						td.style.whiteSpace = 'nowrap';
						td.style.width = '80px';
					}
					tr.appendChild(td);
				});
				rowsBody.appendChild(tr);
			});

			const rows = rowsBody.querySelectorAll('tr.row');
			if (rows.length > 0) {
				const lastRow = rows[rows.length - 1];
				lastRow.classList.add('last-row');
			}

			const tr = document.createElement("tr");
			tr.classList.add('column-total');
			(data.table.columns || []).forEach(col => {
				const td = document.createElement("td");
				td.style.textAlign = col.align;
				if (col.sumText) td.textContent = col.sumText;
				tr.appendChild(td);
			});
			if (tr.innerText) rowsBody.appendChild(tr);

			(data.table.totals || []).forEach(total => {
				const tr = document.createElement("tr");
				tr.className = 'total';
				
				const tdLabel = document.createElement("td");
				tdLabel.innerHTML = total.label;
				tdLabel.colSpan = data.table.columns.length - 1;
				
				const tdValue = document.createElement("td");
				tdValue.innerHTML = total.text;
				tdValue.id = total.key;
				if (total.class) tdValue.classList.add(total.class);
				tdValue.dataset.value = total.number;

				if (total.emphasis) {
					tdLabel.style.fontWeight = 'bold';
					tdValue.style.fontWeight = 'bold';
				}
				tr.appendChild(tdLabel);
				tr.appendChild(tdValue);
				rowsBody.appendChild(tr);
			});

			const customFieldsDiv = document.getElementById("custom-fields");
			customFieldsDiv.innerHTML = "";
			(data.custom_fields || []).forEach(f => {
				if (f.displayAtTheTop) {
					const dt = document.createElement("dt");
					dt.innerHTML = f.label;
					const dd = document.createElement("dd");
					dd.innerHTML = f.text;
					fieldsDiv.appendChild(dt);
					fieldsDiv.appendChild(dd);
				}
				else {
					const div = document.createElement("div");
					div.innerHTML = `<strong>${f.label || ""}</strong><br />${(f.text || "").split("\\n").join("<br />")}<br /><br />`;
					customFieldsDiv.appendChild(div);
				}
			});

			if (data.amountInWords) {
				var aiw = data.amountInWords;
				var aiwScript = document.createElement('script');
				aiwScript.src = 'resources/writtennumber/lang-' + aiw.language + '.js';
				aiwScript.onload = function () {
					var totalEntry = (data.table.totals || []).filter(function (t) { return t.key === "Total"; });
					if (totalEntry.length === 0) return;
					var totalNumber = totalEntry[totalEntry.length - 1].number;
					var text = "";
					if (aiw.currencyPrefix === "\\u20B9" || aiw.currencyCode === "INR") {
						text = spellOutRupees(totalNumber) + " Rupees";
						var fraction = Math.round(totalNumber * 100) % 100;
						if (fraction === 0) text += " Only";
						else if (fraction === 1) text += " and One Paisa";
						else text += " and " + spellOutRupees(fraction) + " Paise";
					} else if (aiw.currencyPrefix === "\\u09F3" || aiw.currencyCode === "BDT") {
						text = spellOutRupees(totalNumber) + " Taka";
						var fraction = Math.round(totalNumber * 100) % 100;
						if (fraction === 0) text += " Only";
						else if (fraction === 1) text += " and One Paisa";
						else text += " and " + spellOutRupees(fraction) + " Paise";
					} else {
						var decimalPlaces = aiw.decimalPlaces;
						var multiplier = 1;
						for (var dp = 0; dp < decimalPlaces; dp++) multiplier *= 10;
						var wn = writtenNumber(Math.floor(totalNumber), { language: aiw.language, currency: aiw.currencyCode });
						if (wn.length > 0) wn = wn.charAt(0).toUpperCase() + wn.substring(1);
						text = wn;
						var fraction = Math.round(totalNumber * multiplier) % multiplier;
						if (fraction > 0) {
							var denominator = "1";
							for (var dp = 0; dp < decimalPlaces; dp++) denominator += "0";
							text += " " + aiw.andText + " " + fraction + "/" + denominator;
						}
					}
					if (text) {
						var div = document.createElement("div");
						div.innerHTML = '<strong>' + aiw.label + '</strong><br />' + text + '<br /><br />';
						document.getElementById("custom-fields").appendChild(div);
					}
					sendResize();
				};
				document.head.appendChild(aiwScript);
			}

			const footersDiv = document.getElementById("footers");
			footersDiv.innerHTML = "";
			(data.footers || []).forEach(f => {
				const div = document.createElement("div");
				div.style = 'margin-top: 20px';
				div.innerHTML = f;
				footersDiv.appendChild(div);

				const scripts = div.querySelectorAll("script");
				scripts.forEach(script => {
					const newScript = document.createElement("script");
					for (const attr of script.attributes) {
						newScript.setAttribute(attr.name, attr.value);
					}
					if (script.textContent) {
						newScript.textContent = script.textContent;
					}
					script.parentNode.replaceChild(newScript, script);
				});
			});

			const statusDiv = document.getElementById("status");
			if (data.emphasis?.text != null) {
				statusDiv.style.marginTop = '40px';
				const span = document.createElement("span");
				span.style = 'border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px; text-transform: uppercase';
				
				if (data.emphasis.positive) {
					span.style.color = 'green';
					span.style.borderColor = 'green';
				}
				if (data.emphasis.negative) {
					span.style.color = 'red';
					span.style.borderColor = 'red';
				}
				span.innerHTML = data.emphasis.text;
				statusDiv.appendChild(span);
			}

			if (data.legacyQrCodeForSaudiArabia) {
				function appendTLV(tag, text, byteList) {
					const encoded = new TextEncoder().encode(text);
					byteList.push(tag);
					byteList.push(encoded.length);
					for (let b of encoded) byteList.push(b);
				}

				const byteList = [];
				let businessName = 'No name';
				if (data.business) businessName = data.business.name;

				let vatNumber = '0000000000000';
				let vatField = data.business.custom_fields.find(item => item.key === "d96d97e8-c857-42c6-8360-443c06a13de9");
				if (vatField) vatNumber = vatField.text;

				let timestamp = new Date((data.timestamp - 621355968000000000) / 10000).toISOString();

				let total = 0;
				let totalElement = document.getElementById('Total');
				if (totalElement != null) total = parseFloat(totalElement.getAttribute('data-value'));

				let vat = 0;
				let taxAmounts = document.getElementsByClassName('taxAmount');
				for (let i = 0; i < taxAmounts.length; i++) {
					vat += parseFloat(taxAmounts[i].getAttribute('data-value'));
				}

				appendTLV(1, businessName, byteList);
				appendTLV(2, vatNumber, byteList);
				appendTLV(3, timestamp, byteList);
				appendTLV(4, total.toFixed(2), byteList);
				appendTLV(5, vat.toFixed(2), byteList);

				const tlvBytes = Uint8Array.from(byteList);
				const qrData = btoa(String.fromCharCode(...tlvBytes));

				new QRCode(document.getElementById("qrcode"), {
					text: qrData,
					width: 128,
					height: 128,
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.L
				});
			}

			setTimeout(sendResize, 100);
		}, false);

		window.addEventListener("load", () =>
			window.parent.postMessage({ type: "context-request" }, "*")
		);
		
		window.addEventListener("resize", sendResize);
	</script>
</body>
</html>

Topic		Replies	Views
Is there documentation or guide on Theme?	15	528	August 12, 2025
How can i change my sales invoice to this format	10	594	August 27, 2021
Sales Invoice Customization	6	842	January 18, 2023
Invoice and Packing Slip Themes	3	149	April 5, 2026
Custom Invoice theme. I would like to fix it so I can use PDF button	4	742	April 12, 2022

How to change Headings on Sale Invoice

Related topics