Include links to invoices on Customer account page

You can add links to view or download invoices for each order listed on this page. Depending on the type of customer accounts you use in your Shopify store, follow one of the guides below:

• New customer accounts
• Classic customer accounts

Sufio allows you to include a View invoice or Download invoice link to each order using our Shopify Customer accounts UI extension. This way, your customers can access and retrieve invoices for past orders in their customer accounts.

Invoice links are automatically displayed in one of seven supported languages, based on the language the customer uses in your store. At the moment, the supported languages are English, German, French, Dutch, Spanish, Danish, and Italian.

To add an Invoice link to the Orders and Order status page:

1. In your Shopify admin, go to the Online Store → Themes page.
2. Click Customize next to the checkout profile you are using.
3. In the editor header, click Home page and from the dropdown, select the Checkout and new customer accounts. Then, select Orders.
4. In the left navigation tab, in the Order details section, click Add app block and select Sufio: Customer invoices.
5. Click Save to apply the changes.

A View invoice link will be displayed for each order on the Orders and Order status page.

For some older Sufio accounts, an additional step may be necessary to grant Sufio extension permissions to read order data on customer account pages.

1. Click the Click to activate button if it appears in the preview.
2. A permissions request page will open. Click Update Data Access.
3. A new browser tab will open. Click Update and wait to be redirected to your Sufio account. You can close this tab now.
4. Refresh the Shopify page.

You can either allow your customers to view or download invoices from their customer accounts. Set up the invoice link according to your preferences.

• The View invoice link will redirect the customer to an online version of their invoice where they can either download or print it. This page also lets the customer pay their unpaid invoices online with their credit card and view other documents related to the order.
• The Download invoice link allows the customer to download a PDF version of the document directly.

To configure the link so that clicking it triggers the download of a PDF version of the invoice:

1. In the Order status page editor, go to Apps → Added.
2. Click Sufio: Customer invoices.
3. From the Invoice Link Type dropdown, select Download invoice.
4. Click Save to apply the changes.

You can configure the extension to display invoice links only for specific orders based on their status, such as paid or fulfilled.

The selected setting should correspond to how you chose to automatically create invoices in Sufio.

To change for which orders invoice links are displayed:

1. In the Order status page editor, go to Apps → Added.
2. Click Sufio: Customer invoices.
3. From the Display Invoice Links for dropdown, select one of the options.
4. Click Save to apply the changes.

The following options are available:

• All orders: The invoice link is displayed for each order.
• Paid orders: The invoice link is displayed only for paid orders.
• Unpaid orders: The invoice link is displayed only for unpaid orders.
• Fulfilled orders: The invoice link is displayed only for fulfilled orders.
• Orders with invoice metafields: The invoice link is displayed only for orders that have metafields with invoice details created by Sufio. This option is suitable for accounts that use a custom workflow to determine when their invoices should be created.

If you are using the Classic customer accounts, you can add the link to view or download an invoice to the Customer Account page by adding a code snippet:

1. In your Shopify admin, go to the Online Store → Themes page.
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>:

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

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

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>:

Please note that the PDF version does not allow the customer to pay their unpaid invoices online with their credit card.