Include links to invoices on Customer account page

Customer account page in your Shopify store displays a summary of a customer's account. It includes a list of recent orders that have been made. You can add links to invoices for each order listed on this page.

Sufio Invoice Links on Customer Account page in Shopify
Links to invoices can be included on the Customer Account page

The online version of the invoice

The link will redirect a customer to an online version of their invoice where they can either download it, print it, or even view other documents related to the same order. This page also allows your customer to pay their unpaid invoices online with their credit or debit card.

Note

Including links to Sufio invoices is not available when using new customer accounts, as customization options are not yet available in Shopify.

The online version of the invoice

The online version of an invoice

To add invoice links to the Customer Account page:

  1. In your Shopify admin, go to the Online Store → Themespage.
  2. Click the Actions button, then click Edit code.
  3. Select customers/account.liquid in the left sidebar. You might use the upper search bar for a faster search.
  4. Insert the following code snippets inside the <table> that displays a list of customer's orders.

First, add a heading inside the <thead> :

<!-- Link to print or download invoice for order on the Customer Account page. Used by Sufio for Shopify (http://www.sufio.com/shopify). -->
<th><span class="table">Invoice</span></th>

Then, add the link to the invoice inside the <tbody>:

<!-- Link to print or download invoice for order on the Customer Account page. Used by Sufio for Shopify (http://www.sufio.com/shopify). -->
<td>
  <span class="invoice">
    <a target="_blank" href="{{ shop.url }}/apps/sufio/invoice/?id={{ order.id }}&number={{ order.order_number }}">Download</a>
  </span>
</td>

You can also use the same code snippet to add an invoice link to the order details page (customer/order.liquid template file).

PDF version of the invoice

If you want the link to let your customer download a PDF version of their invoice directly, use the following code snippet inside the <tbody>:

<!-- Link to download a PDF invoice for order on the Customer Account page. Used by Sufio for Shopify (http://www.sufio.com/shopify). -->
<td>
  <span class="invoice">
    <a target="_blank" href="{{ shop.url }}/apps/sufio/invoice/download/?id={{ order.id }}&number={{ order.order_number }}">Invoice</a>
  </span>
</td>
Please note that the PDF version does not allow the customer to pay their unpaid invoices online with their credit card.

Need help?

Do you need help with customizing your Shopify store theme? Please contact our experienced support team. We'll be happy to assist!

See also

You can also include invoice links on the Order Status page or in the Order Confirmation emails.

Professional invoices for Shopify stores

Let Sufio automatically create and send beautiful invoices for every order in your store.

Install Sufio - Automatic Invoices from the Shopify App Store

Get Started