Add Download Invoice button to Shopify's Order Success page

Step 1: In our app, select _Frontend Download_ option :


Then:

Edit Text button as you wish
Preview can be visible there on how linked text would look.
Click _Copy_ to copy the code


Step 2: In Shopify Admin page, go to _Settings_ -> Checkouts


Scroll down and look for **Additional Script** under **Order status page** box, then paste the code from the previous step:


Step 3: Click _Save_ and check on Front-end.

To add as "Button", paste the following snippet(change the highlighted text). Make changes accordingly if you are familiar with HTML

<div style="margin-top: 10px; display: flex; justify-content: center; flex-direction: row"><a href="[https://orders.appsfinal.com/api/pdf/123/invoice/{{ order.id }}](https://orders.appsfinal.com/api/pdf/ckytuia5905052drfl0yxj95d/invoice/{{%20order.id%20}})" style="background-color: #1A7BFF; border-color: #1A7BFF; color: #fff; display:flex;padding:10px 15px;margin-bottom:0;font-size:14px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px; margin-right: 10px; margin-top: 4px; align-self: center" target="_blank"> Download PDF version</a>

Updated on: 22/01/2025