Custom Templates - Showing the quote summary as a single line total

This guide and video will show you how to change your custom quote layout so that the quote summary shows as a single line total.

Steps:

Access the Quote Letter:
- Go to the quote letter for the estimate you want to modify.
Open the Quote Summary:
- On the left-hand side, scroll down to the Quote Summary section and then on the right hand side click on Advanced Editing.
Find and Edit Code:
- Scroll to the bottom of the page until you find text on the right-hand side that begins with the line “Subtotal”.
- Click on it, and the code will appear on the left side of the screen.
Update the Code:
- Copy the code provided in this help article, replace the existing code, and click Save.

Pro tip:
If you plan to apply this change frequently, it's recommended to save the entire quote layout. This way, you won’t need to update the code each time.

Once saved, your quote summary will now only display the total, without tax details.

This is the code you need to copy in

<html>

<head>
    <style>
        .quote-summary-body {
            margin-left: 65%;
        }

        .quote-summary {
            color: #525d6c;
            font-family: 'Arial';
        }

        .quote-summary-rows div:nth-child(odd) {
            background-color: #F6F7F7;
        }

        .quote-summary-rows div:nth-child(even) {
            background-color: #EDEEF0;
        }

        .quote-summary-row {
            display: grid;
            grid-template-columns: 40% auto;
            font-size: 16px;
        }

        .bold {
            font-weight: bold;
        }

        @page {
            size: a4;
        }
    </style>
</head>

<body>
    <div class="quote-summary quote-summary-body">
        <div class="quote-summary-rows">
            {{#if (showMarkup)}}
            <div class="quote-summary-row">
                <span class="bold">Markup:</span>
                <span style="text-align: right;">{{price estimate.markup}}</span>
            </div>
            {{/if}}
            <div class="quote-summary-row">
                <span class="bold">Total:</span>
                <span class="bold" style="text-align: right;">{{price estimate.quotedTotalIncTax}}</span>
            </div>
        </div>
    </div>
</body>

</html>