Add Download Invoice button to Shopify's Order Success page

This guideline gives information about how to add "Download" button to Shopify's Order Success page which your customer sees after placing an order.

Step 1: In our app, select Settings => Download button option on the sidebar, and hit Edit to customize the button:



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



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



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



Step 3: Replace the first line,

_from:_

<div style="margin-top: 10px; display: flex; justify-content: center; flex-direction: row">

_to:_

<div style="margin-top: 10px; display: flex; justify-content: center; flex-direction: row;position: absolute;bottom: 0;left: 0;">

then replace {{ order.id }} with {{ order_id }}
and add this line of code at the bottom:

<style type="text/css">

    .step {

        position: relative;

        padding-bottom: 60px;

    }

</style>

It should look like this:



Step 4: Click _Save_ and check on Front-end:

Updated on: 21/10/2024