{"id":716,"date":"2025-05-14T12:43:22","date_gmt":"2025-05-14T12:43:22","guid":{"rendered":"https:\/\/www.oxilayer.com\/blog\/?p=716"},"modified":"2025-05-18T08:33:41","modified_gmt":"2025-05-18T08:33:41","slug":"shopify-customer-account-download-invoice-button","status":"publish","type":"post","link":"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button","title":{"rendered":"How to Add a Download Invoice Button to the Shopify customer account"},"content":{"rendered":"\n

Despite sending invoices via email, it’s also important to add a Download Invoice button to the Shopify customer account page. Emails are not 100% reliable – they can be lost, marked as spam, or not delivered. In that case, the customer first of all checks the customer account and will look for an option to download the invoice on the order details page. If we don’t want to get another unnecessary support ticket, email, or call, we have to be prepared for this.<\/p>\n\n\n\n

The following instructions are for Shopify’s “Classic customer account”. We will use the Oxilayer PDF Invoice Generator app<\/a> to achieve this goal. Shopify doesn’t have such an option by default, not even with the free Shopify Order Printer app.<\/p>\n\n\n

<\/a>
Oxilayer Invoice App for Shopify<\/a><\/div>
Print & send branded invoices, packing-slips, quotes & more<\/a><\/div>
Visit App Store<\/a> <\/div> <\/div>\n\n\n\n

Let’s assume that the Oxilayer PDF Invoice Generator app <\/a>is installed. Follow these steps to add a “Download Invoice” button to the Shopify customer account.<\/p>\n\n\n\n<\/a>

1. Open the customer order details page in the theme editor<\/h2>\n\n\n\n

The app block only works on the customer’s account order details page. So, first, we need to open the Shopify theme editor and navigate to the order details page.<\/p>\n\n\n\n

1. Go to Shopify admin > Online store > Themes<\/a>
2. Then, click on the “Customize” (1) button for the current theme<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

3. Click on the page list (2) and search for “Customer Order” (3)<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

4. Log in to any customer account (4)<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

5. Click on any order to open the detailed page<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Additional steps might be required depending on the theme, but the goal is the same: to open any order details page in the Shopify theme editor.<\/p>\n\n\n\n

2. Enable the app block<\/h2>\n\n\n\n

To activate the app block, follow these three simple steps:<\/p>\n\n\n\n

1. Click on the “App Embeds” icon (1)
2. Search for “Download Invoice” (2)
3. Enable the “Download invoice \/ Oxilayer Invoice” app block (3)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n<\/a>

3. Insert the button in the correct position<\/h2>\n\n\n\n

If you see the “Download Invoice” button already and it’s in the correct position – super! You can skip this part of the article, unless you want to learn more about configuration options.<\/p>\n\n\n\n

However, if the button wasn\u2019t loaded after activation, you\u2019ll need to change the “Position Selector” (1) option to find the correct position. This depends entirely on your theme, so try all available options.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

If the default positions don\u2019t give the results you want, use the “Custom order selector”, or the “Placeholder” option. These are more flexible but require some knowledge. Feel free to contact Oxilayer support if you need assistance.<\/p>\n\n\n\n

1. Custom element selector<\/strong>: Using this option, you can specify a custom selector in the “Custom element selector” (3) field. You can use selectors like: .order h2, h2, #order, etc.<\/em> (4).<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

2. Placeholder<\/strong>: You can edit your theme code, likely in the main-order.liquid template file, to insert a placeholder where the button should be added. Use this placeholder code:<\/p>\n\n\n\n

<span id=\"oxilayer_download_invoice_placeholder\"><\/span><\/code><\/pre>\n\n\n\n
Additional position options<\/h3>\n\n\n\n
There are 3 additional options to help correct the “Download Invoice” button placement:<\/p>\n\n\n\n
    \n
  1. Vertical position<\/strong>: The button can be added before<\/strong>, after<\/strong>, inside top<\/strong>, or inside bottom<\/strong> of the container element selected in the “Position selector” field.<\/li>\n\n\n\n
  2. Horizontal position<\/strong> – This applies the CSS float attribute with the following values: left, center, or right.<\/li>\n\n\n\n
  3. New line<\/strong>: This ensures the element will be placed on a new line. It adds the CSS attribute: clear: both.<\/li>\n<\/ol>\n\n\n\n<\/a>
    4. Localizing the button<\/h2>\n\n\n\n
    In the “Button label” field, you can rename or translate the button. However, if your store has more than one language, you will need the Shopify Translate & Adapt <\/a>app. Follow these steps to translate the button label:<\/p>\n\n\n\n
    1. Go to Shopify Admin and open the Translate & Adapt app<\/a> (1)<\/p>\n\n\n
    \n
    \"\"<\/figure><\/div>\n\n\n
    2. Click on “App Embeds” (2) under the Theme section.<\/p>\n\n\n
    \n
    \"\"<\/figure><\/div>\n\n\n
    3. Then click on Oxilayer Invoice – Download Invoice (3). 
    4. While changing the language at the top (4), you can translate the button label (5) into all available languages.<\/p>\n\n\n
    \n
    \"\"<\/figure><\/div>\n\n\n
    5. Style to match your theme<\/h2>\n\n\n\n
    The app block offers multiple options to style the button. You can change the style and use it as a button or a simple link (1). If the style doesn\u2019t match your theme, you can adjust the button colors (2) and margins (3). <\/p>\n\n\n
    \n
    \"\"<\/figure><\/div>\n\n\n
    You can also use the .oxi-t CSS selector to apply custom CSS rules in your theme, allowing it to match perfectly with the style of your store.<\/p>\n\n\n\n
    Final word<\/h2>\n\n\n\n
    It would be less complex if all themes had<\/strong> the same structure. However, it’s good to have such flexibility, the possibility to localize, and the ability to append styles to match your store, so it won’t look out of place. <\/p>\n\n\n\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    Despite sending invoices via email, it’s also important to add a Download Invoice button to the Shopify customer account page. Emails are not 100% reliable – they can be lost, … <\/p>\n
    Read More <\/i><\/a><\/div>\n","protected":false},"author":1,"featured_media":751,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"yoast_head":"\nHow to Add a Download Invoice Button to the Shopify customer account - Oxilayer Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Download Invoice Button to the Shopify customer account - Oxilayer Blog\" \/>\n<meta property=\"og:description\" content=\"Despite sending invoices via email, it’s also important to add a Download Invoice button to the Shopify customer account page. Emails are not 100% reliable – they can be lost, … Read More\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button\" \/>\n<meta property=\"og:site_name\" content=\"Oxilayer Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-14T12:43:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-18T08:33:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.oxilayer.com\/blog\/wp-content\/uploads\/2025\/05\/add-download-invoice-button-to-shopify.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"582\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Edwin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Edwin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button\",\"url\":\"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button\",\"name\":\"How to Add a Download Invoice Button to the Shopify customer account - Oxilayer Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.oxilayer.com\/blog\/#website\"},\"datePublished\":\"2025-05-14T12:43:22+00:00\",\"dateModified\":\"2025-05-18T08:33:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.oxilayer.com\/blog\/#\/schema\/person\/6d611f5fd583ec71bce01f56107d9c2e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.oxilayer.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add a Download Invoice Button to the Shopify customer account\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.oxilayer.com\/blog\/#website\",\"url\":\"https:\/\/www.oxilayer.com\/blog\/\",\"name\":\"Oxilayer Blog\",\"description\":\"Things worth knowing about Shopify and WooCommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.oxilayer.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.oxilayer.com\/blog\/#\/schema\/person\/6d611f5fd583ec71bce01f56107d9c2e\",\"name\":\"Edwin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.oxilayer.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e9b848a625388ac54539f607091ee1d3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e9b848a625388ac54539f607091ee1d3?s=96&d=mm&r=g\",\"caption\":\"Edwin\"},\"description\":\"Writing code since 2007.\",\"url\":\"https:\/\/www.oxilayer.com\/blog\/author\/oxilayer_u2\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Download Invoice Button to the Shopify customer account - Oxilayer Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button","og_locale":"en_US","og_type":"article","og_title":"How to Add a Download Invoice Button to the Shopify customer account - Oxilayer Blog","og_description":"Despite sending invoices via email, it’s also important to add a Download Invoice button to the Shopify customer account page. Emails are not 100% reliable – they can be lost, … Read More","og_url":"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button","og_site_name":"Oxilayer Blog","article_published_time":"2025-05-14T12:43:22+00:00","article_modified_time":"2025-05-18T08:33:41+00:00","og_image":[{"width":1540,"height":582,"url":"https:\/\/www.oxilayer.com\/blog\/wp-content\/uploads\/2025\/05\/add-download-invoice-button-to-shopify.png","type":"image\/png"}],"author":"Edwin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Edwin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button","url":"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button","name":"How to Add a Download Invoice Button to the Shopify customer account - Oxilayer Blog","isPartOf":{"@id":"https:\/\/www.oxilayer.com\/blog\/#website"},"datePublished":"2025-05-14T12:43:22+00:00","dateModified":"2025-05-18T08:33:41+00:00","author":{"@id":"https:\/\/www.oxilayer.com\/blog\/#\/schema\/person\/6d611f5fd583ec71bce01f56107d9c2e"},"breadcrumb":{"@id":"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.oxilayer.com\/blog\/shopify-customer-account-download-invoice-button#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.oxilayer.com\/blog"},{"@type":"ListItem","position":2,"name":"How to Add a Download Invoice Button to the Shopify customer account"}]},{"@type":"WebSite","@id":"https:\/\/www.oxilayer.com\/blog\/#website","url":"https:\/\/www.oxilayer.com\/blog\/","name":"Oxilayer Blog","description":"Things worth knowing about Shopify and WooCommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oxilayer.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.oxilayer.com\/blog\/#\/schema\/person\/6d611f5fd583ec71bce01f56107d9c2e","name":"Edwin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oxilayer.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e9b848a625388ac54539f607091ee1d3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e9b848a625388ac54539f607091ee1d3?s=96&d=mm&r=g","caption":"Edwin"},"description":"Writing code since 2007.","url":"https:\/\/www.oxilayer.com\/blog\/author\/oxilayer_u2"}]}},"_links":{"self":[{"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/posts\/716"}],"collection":[{"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/comments?post=716"}],"version-history":[{"count":29,"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/posts\/716\/revisions"}],"predecessor-version":[{"id":762,"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/posts\/716\/revisions\/762"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/media\/751"}],"wp:attachment":[{"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/media?parent=716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/categories?post=716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oxilayer.com\/blog\/wp-json\/wp\/v2\/tags?post=716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}