Enhancing Shopify OrderPrinter Invoice Template with Open Sans Font: A Stylistic Journey (with Complete Code)

Enhancing Shopify OrderPrinter Invoice Template with Open Sans Font: A Stylistic Journey (with Complete Code)

Introduction:

In this blog post, we'll explore how we transformed a plain and unremarkable Order Printer invoice template into a visually appealing and professional document. Through a series of iterative modifications, we leveraged the power of Open Sans, a Google Font using a weight of 600, to infuse the template with a sense of modernity and sophistication.

The Original Template:

We started with a basic invoice template that served its purpose but lacked visual finesse. The original template had headings in default font styles and lacked any cohesive design elements. The content was presented clearly, but it lacked the aesthetic appeal that could elevate the overall impression of the invoice.

Incorporating Open Sans Font:

To begin our transformation journey, we decided to incorporate the Open Sans font, a popular and versatile typeface. The addition of this font brought a touch of elegance and professionalism to the template. We used the Open Sans font with a weight of 600 for all headings, ensuring they stood out prominently, making them more visually appealing.

Styling and Layout Improvements:

We proceeded to improve the styling and layout of various sections in the template. For instance, we added appropriate padding, margins, and borders to create a sense of organization and structure. By defining styles for headings, tables, and other elements, we maintained consistency throughout the invoice, resulting in a more polished and cohesive look.

Additionally, we carefully assessed the relevance of the transaction processing table included in the original template. As it served no practical purpose for the specific use case, we decided to remove it to further streamline the invoice and eliminate any extraneous content.

Custom Classes for Bold Text:

To address an issue with the bold styling, we created a custom class called "bold-text" instead of using the strong tag. This class allowed us to apply bold styling to specific elements without the inherent problems of strong tag, ensuring better control over the visual appearance.

Dynamic Logo Inclusion:

A major enhancement came in the form of a dynamic logo. We implemented a feature that retrieved the logo from a specified URL and seamlessly integrated it into the invoice alongside the shop name and address. This branding addition not only personalized the document but also reinforced the professional identity of the business.

Total Column Addition:

In response to user feedback and to further optimize the template's clarity, we added a "Total" column in the "Item Details" table. This column automatically calculates the total price for each line item by multiplying the quantity with the rate, providing a clear and concise summary of the invoice's components.

Dynamic Content Visibility:

A notable improvement we made was the implementation of a conditional check. This check ensures that line items with a quantity of 0 are automatically excluded from the invoice. This not only improves clarity but also prevents any unnecessary clutter in the document.

Conclusion:

Through the integration of Open Sans font, the addition of custom styling, and the implementation of dynamic elements, we successfully elevated the appeal and functionality of the invoice template. The result is a sleek and modern invoice that is not only visually impressive but also informative and easy to understand. By taking an iterative approach and listening to user feedback, we were able to optimize the template and provide a truly enhanced invoicing experience. Whether you are a business owner or an invoice recipient, the new template ensures a seamless and professional transaction process.


The complete code is below for those who wish to use it for their own means and ends.

 

---- Invoice Code For Order Printer ----- 

<!-- Add Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">

<style>
/* Global styles */
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
}

/* Heading styles */
h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 16px;
margin: 0 0 1em 0;
}

/* Payment details table styles */
table.table-tabular {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.5em 0;
border: 2px solid black;
}
table.table-tabular th,
table.table-tabular td {
border: 1px solid black;
padding: 0.5em;
text-align: left;
font-weight: normal;
}
table.table-tabular th {
font-weight: 600;
}

/* Shipping details styles */
.shipping-details {
margin: 0 0 1em 0;
padding: 1em;
border: 1px solid black;
}
.shipping-details strong {
font-weight: 600;
}

/* Total price and Outstanding Amount styles */
.total-price {
font-weight: normal;
}

/* Subtotal price styles */
.subtotal-price {
font-style: italic;
}

/* Logo styles */
.logo {
float: left;
margin-right: 1.5em;
max-width: 150px;
}

/* Custom class for bold text */
.bold-text {
font-weight: 600;
}

</style>

<!-- Logo -->
<img src="https://jodiabaazar.com/cdn/shop/files/JB_Transparent_180x.png?v=1639304115" alt="Your Logo" class="logo">

<p style="float: right; text-align: right; margin: 0;">
{{ "now" | date: "%m/%d/%y" }}<br />
Invoice for {{ order_name }}
</p>

<div style="margin: 0 0 1.5em 0;" >
<p style="font-size: 1.2em;">{{ shop_name }}</p>
{{ shop.address }}<br/>
{{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
{{ shop.country }}
</div>

<hr />

<p style="font-size: 1.5em;">Item Details</p>

<table class="table-tabular">
<thead>
<tr>
<th><p>Quantity</p></th>
<th><p>Item</p></th>
{% if show_line_item_taxes %}
<th>Taxes</th>
{% endif %}
<th><p>Rate</p></th>
<th><p>Total</p></th>
</tr>
</thead>
<tbody>
{% for line_item in line_items %}
{% if line_item.quantity > 0 %}
<tr>
<td>{{ line_item.quantity }} x</td>
<td>{{ line_item.title }}</td>
{% if show_line_item_taxes %}
<td>
{% for tax_line in line_item.tax_lines %}
{{ tax_line.price | money }} {{ tax_line.title }}<br/>
{% endfor %}
</td>
{% endif %}
<td>
{% if line_item.original_price != line_item.price %}
<s>{{ line_item.original_price | money }}</s>
{% endif %}
{{ line_item.price | money }}
</td>
<td>{{ line_item.quantity | times: line_item.price | money }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>


<p style="font-size: 1.5em;">Payment Details</p>

<table class="table-tabular">
<tr>
<td>Subtotal price:</td>
<td class="subtotal-price">{{ subtotal_price | money }}</td>
</tr>
{% for discount in discounts %}
<tr>
<td>Includes discount "{{ discount.code }}"</td>
<td>{{ discount.savings | money }}</td>
</tr>
{% endfor %}
<tr>
<td>Total tax:</td>
<td>{{ tax_price | money }}</td>
</tr>
{% if shipping_address %}
<tr>
<td>Shipping:</td>
<td>{{ shipping_price | money }}</td>
</tr>
{% endif %}
<tr>
<td>Total price:</td>
<td class="total-price">{{ total_price | money }}</td>
</tr>
{% if total_paid != total_price %}
<tr>
<td>Total paid:</td>
<td>{{ total_paid | money }}</td>
</tr>
<tr>
<td><p>Outstanding Amount:</p></td>
<td><p style="font-size: 16;">{{ total_price | minus: total_paid | money }}</td>
</tr>
{% endif %}
</table>

{% if note %}
<h3>Note</h3>
<p>{{ note }}</p>
{% endif %}

{% if shipping_address %}
<p style="font-size: 1.5em;">Shipping Details</p>

<div class="shipping-details">
<p class="bold-text">{{ shipping_address.name }}</p><br/>
{{ shipping_address | format_address }}
</div>
{% endif %}

<p>If you have any questions, please send an email to <u>{{ shop.email }}</u></p>