Shopify invoices templates

Just the other day, I was helping a friend improve his online store and among many changes he needed, one of them was a personalization of his invoice template. The online store is made with Shopify (www.shopify.com), personally I had never worked with Shopify, but for me it is quite complete and customizable, or at least if you know how to program and you are willing to read the tons of documentation available. It is important to say that there are several applications in the Shopfy Apps Store for this purpose therefore if you do not feel very comfortable with the technologies used you can always choose that option. Even can be read in the description of the app for the modification of invoice templates.

“To make customizations to templates, you’ll need experience with HTML and Liquid. If you don’t have experience with HTML or Liquid, Shopify Design Gurus can assist with minor customizations. Major customizations will need to be done by a third-party app, designer, or developer.”

To start, install the Shopify application for managing invoice templates at https://apps.shopify.com/order-printer after that you can go to the template management:

Then go to template management:

My recommendation is to duplicate the existing invoice template but you can always add a completely new from the scratch. The default template is really simple and lacks from style and good design. I really don’t recommend it specially if online store is in production. The default template looks like the next image:

And this is what we are trying to achieve:

Basically we are changing the header, the footer and adding the image of the product. If you are not familiar with Liquid no worries, Shopify has a very good documentation of the variables available as well as the main control flows. Here I leave the modifications The next section shows the modifications I made to achieve the desired aspect, any idea or suggestion please leave your comment.

<div style="float: right; text-align: right; margin: 0; margin-bottom: 20px;"> 
<p>
  {{ "now" | date: "%m/%d/%y" }}<br />
  Invoice for {{ order_name }}
</p>
<br/>
<strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br />
{{ shop.address }}<br/>
{{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
{{ shop.country }}
<br/>
</div>

<div style="float: left; margin: 0 0 1.5em 0;" >
<img style="width: 70%;" src="path-to-the-logo-image">
<div style="margin-left: 10%;">https://storeurl.com</div>  
<br/>
</div>

<hr />

<h3 style="margin: 0 0 1em 0;">Item Details</h3>

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      <th>Item Image</th>
      {% if show_line_item_taxes %}
      <th>Taxes</th>
      {% endif %}
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td>{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        <td><img src="{{ line_item.product.featured_image | product_img_url: 'thumb' }}"/> </td>
        {% if line_item.tax_lines %}
          <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>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% if transactions.size > 1 %}
  <h3 style="margin: 0 0 1em 0;">Transaction Details</h3>
  <table class="table-tabular" style="margin: 0 0 1.5em 0;">
    <thead>
      <tr>
        <th>Type</th>
        <th>Amount</th>
        <th>Kind</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td>{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.kind }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<h3 style="margin: 0 0 1em 0;">Payment Details</h3>

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <tr>
    <td>Subtotal price:</td>
    <td>{{ 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><strong>Total price:</strong></td>
    <td><strong>{{ total_price | money }}</strong></td>
  </tr>
  {% if total_paid != total_price %}
    <tr>
      <td><strong>Total paid:</strong></td>
      <td><strong>{{ total_paid | money }}</strong></td>
    </tr>
    <tr>
      <td><strong>Outstanding Amount:</strong></td>
      <td><strong>{{ total_price | minus: total_paid | money }}</strong></td>
    </tr>
  {% endif %}
</table>

{% if note %}
  <h3 style="margin: 0 0 1em 0;">Note</h3>
  <p>{{ note }}</p>
{% endif %}

{% if shipping_address %}
  <div style="margin: 0 2em 1em 0; padding: 1em; float: left;">
    <strong>Ship to:</strong><br/>
    {{ shipping_address.name }}<br/>
    {% if shipping_address.company %}
      {{ shipping_address.company }}<br/>
    {% endif %}
    {{ shipping_address.street }}<br/>
    {{ shipping_address.city }}
    {{ shipping_address.province_code }}
    {{ shipping_address.zip | upcase }}<br/>
    {{ shipping_address.country }}
  </div>
{% endif %}

{% if billing_address %}
  <div style="margin: 0 2em 1em 0; padding: 1em; float:left;">
    <strong>Bill to:</strong><br/>
    {{ billing_address.name }}<br/>
    {% if billing_address.company %}
      {{ billing_address.company }}<br/>
    {% endif %}
    {{ billing_address.street }}<br/>
    {{ billing_address.city }}
    {{ billing_address.province_code }}
    {{ billing_address.zip | upcase }}<br/>
    {{ billing_address.country }}
  </div>
{% endif %}

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

1 Response

  1. Leo says:

    WOW, like a ring to my fingers. I was about to start working in a new project like this and you’ve saved me so much trouble. Keep helping. Nice echo.

Leave a Reply

Your email address will not be published. Required fields are marked *