If the Invoice template we provide does not meet the expectations or requirements of the business transaction that occurs, you could use CSS/XML to customize the template. Kindly see the explanation in this article for the detailed steps, which are quite technical, and we will provide some commonly used customizations:

You can Login to tools.dealpos.app by using your POS domain, username, and password :

After you clicking Advance Menu, you can change the File Name into PaperSize8cm_custom.css :

Copy the CSS Code down below to PaperSize8cm_custom.css box

I. Resize Store Name

II. Bold Store Name, Invoice number & Total

III. Resize Logo from Square to Rectangle

IV. Give Space Between Total Amount & Footer

V. Change Font on Invoice

VI. Delete Row Space Between Address and Phone Number

CSS code :

.invoice_mini h1, .invoice_mini h2, .invoice_mini h3, .invoice_mini h4, .invoice_mini h5, .invoice_mini h6, .sales_order_mini h1, .sales_order_mini h2, .sales_order_mini h3, .sales_order_mini h4, .sales_order_mini h5, .sales_order_mini h6 {

font-family: Arial !important;

font-size: 39px;

}

Notes :

You can customize font-size for adjust the size.

Output will be like :

CSS code :

.font-weight-bold {

font-weight: 1000 !important;

}

Notes :

You also can customize font-weight size for adjustment.

The output will be like :

CSS code :

.img-fluid {

height: 75px;

}

Notes :

You also can customize height size for adjustment.

Output will be like :

CSS code :

.mt-2, .my-2 {

margin-top: 0.4cm !important;

}

Notes :

You can customize margin-top for adjustment..

Output will be like :

CSS code :

.invoice_mini, .sales_order_mini {

width: 264px;

margin: auto;

padding: 0 4px;

color: #000;

font-family: Verdana !important;

}

*you can change font-family for your invoice, for example : Arial, Times New Roman, Candara, Calibri, and many more.

Output will be like :

CSS code :

br{content:' ';}

br:after{content:' ';}

Output will be like :