Add Download Invoice button to Customer's Account page

This guideline gives information about how to manually add "Download" button to your Customer's Account page.
Since the code is added manually, you might need to remove them if you uninstall the app.

To use the Automatic option, please refer HERE.

THIS ONLY WORKS WITH CLASSIC CUSTOMER ACCOUNT, NOT NEW CUSTOMER ACCOUNT

FIRST OPTION: Adding the button to Order Detail page

Step 1: In our app, select Settings => Download Download => Edit option on the sidebar: 

Customize the button to your liking, then hit this Copy icon

Step 2: In your Shopify admin page, click on Online Store -> Themes, then Actions -> Edit code:

Step 3: Look for customer/order.liquid in Templates (in some themes, it might be main-order.liquid, then paste the previous code at the bottom, and click Save:

Customers can now see the Download button(s) when they view orders from their Account page.

SECOND OPTION: Adding the button to Order list page

You could also add the Download button on the order list page, like this:

Steps are as below:

Step 1: In our app, Go to Download button => Edit page, and copy the link as in the picture:

Step 2: In your Shopify admin page, click on Online Store -> Themes, then Actions -> Edit code like the first way, and find the customer/account.liquid file (in some themes, it might be main-account.liquid:

Step 3: Find the <thead> label, and add the previous code right after the last <th>: 

<th><span class="table">Invoice</span></th>

Step 4: Find the <tbody> label (which should be right below <thead>, and add the below code after the last <td>: 

                    <td>

                      <span class="invoice">

                    _<a target="_blank" href="insert link here">Download</a>_

                      </span>

                  </td>

Replace the text in sert link here with the link copied from step 1.

Click Save and finish.

Updated on: 09/08/2024