Articles on: Guides

Adding downloads to customer account Order page

What plan do I need?



You will need the Premium plan to unlock the customer account download feature.
You will also need the Classic Customer Accounts, because "New customer Accounts" do not support apps to inject code at this stage. Shopify are releasing it sometime in 2024.

Method 2 - Downloads on the account Order page



Step 1 – Enable Shopify's classic customer accounts


By default, Shopify disables customer accounts. You will need to enable this to make this work.

Go to your Shopify admin > Settings
Go to “Customer accounts“
Click “Edit” on the top section


Enable the “Show login link in the header of online store and at checkout” feature
Make sure you select the “Classic customer accounts“. Shopify does not allow apps to work with New customer accounts.



Step 2 – Enable the customer account setting in Fileflare



Go to the Checkout settings
Enable the setting Display download links on the customer accounts order page

Remember, you will need the Premium plan to enable this feature. Some paid or custom themes may need code added manually. This is because not every theme is built the same way. Scroll down for more information.



Step 3 – Place the code in your theme file



You have two methods to show the downloads in accounts. You can either:
Method 1 - Use your regular customer accounts and place a short snippet of code in your theme file
Method 2 - Use a customer account app and enable our integration

Method 1 – Using the regular customer accounts in Shopify (Add Code)

You will need to manually place the code snippet to your theme file for the download links to appear in the customer accounts. They will not appear if this step isn’t followed.

Go to the theme files

Go to your Shopify dashboard > Online Store > Themes > Actions (the three dots) > Edit Code



Open “Customers/order.liquid” or “main-order.liquid"

Search for the Customers/order.liquid file or the main-order.liquid file and open it. If you can’t find it under these names, you will need to find the file that is the template for your customers’ order pages. For example, if you are using Craft Shopify theme, the customer’s order liquid file is called “main-order.liquid“.

Third-party and older themes use customers/order.liquid. Many new Shopify themes use main-order.liquid. Please be aware that custom-built themes by third parties may show a different name. It would be good to search for “order” or something similar to find the right template. If you need any help, just contact us.

Please note: if you are using the Brave browser, please enable downloads to allow the clicking of download links. Brave defaults to not allow downloads by clicking links.

Place the code in your chosen location (please contact us if you need help)

You will now want to place the below code anywhere you desire the download links to appear on the customer order page. If you’re testing this, make sure you have attached assets to the products that were ordered so the downloads appear in your tests.

Copy and paste this code and click ‘Save‘.

<div id='digitalAssets'></div>


Note for position: You can move this code to different parts of your .liquid file to play with the placement and the location where the downloads will appear. Log into a test account to see the placement. Try to place the code between the </div> tags, as shown in the image below. This will place the download snippet in different sections depending on which </div> tag you place it between.

Important to show downloads: The downloads will only show if the order has digital files attached to the products in the order. Please make sure the products that were ordered have digital files attached to them.

Styling: The download snippet will use the styling of your Shopify theme. But if you have the download button enabled, you can customise your button styles by scrolling to the bottom of this guide to the "Styling" heading.



Method 2 – Using the CustomerHub or Froonze app (No Code)

We have created an integration with the CustomerHub and Froonze apps, which allows you to show your digital downloads inside your customer accounts super easily without needing to add code yourself. All you need to do is use their Shopify app and enable our integration.

Learn how to set up CustomerHub with digital downloads
Learn how to set up with Froonze with digital downloads

Example images of downloads in the customer accounts


See examples of the customer accounts in other stores

The downloads are still not showing, what do I do?



You will need to double-check that you have a few things in place to ensure the downloads show:

Make sure there are files attached to the Shopify products in the order. If there are no files attached to the products or order, then no download links will show on the order page.

Make sure you are looking at the Order page in the accounts. The downloads are specific to an order, so they show on the order page, not the main customer account page.

Go to the Order page and check to see if the payment status is "Paid". If it is not, then the downloads will not show because the order has not yet been paid.

Are you on the right plan? The customer account downloads are on the Premium plan.

You could be looking for an order that was placed before installing Fileflare. You may need to click the “Import previous orders” button on the Orders page to import older orders if you haven’t already. Contact us if you need us to sync orders.

Make sure you have enabled the customer account feature in Settings > Checkout settings.

Make sure you have placed the snippet code correctly in the right theme file. Contact us if you need guidance.

If you are using an app like CustomerHub or Froonze, ensure you have enabled the integration in their app.



--

Styling the download button on the account Order page


You can customize the styling of it easily by using custom CSS. The button that shows inside the main account page automatically uses your store's theme styles. The below instructions are just for customising the account Order page button.



Go to your Shopify store
Go to "Online store"
Click on the three dots and then "Edit code"


Search for "css" and find the main styles sheet where your store's theme hosts all the CSS. This could show differently depending on your Shopify theme. For example, the Debut theme by Shopify, the file is called "base.css".


Paste the below code into the styles sheet at the top of the sheet:

#digitalAssets {
    --dda-color-100: #F7F9FC; /* Button background color */
    --dda-color-200: #E2E7F0; /* Button border color */
    --dda-color-400: #CBD2E0; /* Button hover color */
    --dda-color-600: #2D3648; /* Button text color */
}

--

Styling the individual Order page (Method 2)



Styling the text


All text styling will be inherited from your Shopify theme. You will need to adjust this in your Shopify theme editor.

Styling the download button (if enabled)


If you have the download button enabled, you can customise the styling of it easily by using custom CSS.
Go to your Shopify store
Go to "Online store"
Click on the three dots and then "Edit code"


Search for "css" and find the main styles sheet where your store's theme hosts all the CSS. This could show differently depending on your Shopify theme. For example, the Debut theme by Shopify, the file is called "base.css".


Paste the below code into the styles sheet at the top of the sheet:

#digitalAssets {
    --dda-color-100: #F7F9FC; /* Button background color */
    --dda-color-200: #E2E7F0; /* Button border color */
    --dda-color-400: #CBD2E0; /* Button hover color */
    --dda-color-600: #2D3648; /* Button text color */
}


Our team can help with this if you don't feel comfortable.

Styling the main account for "View all downloads"


View this guide.

Styling notes:


There are multiple methods for the styling the customer accounts order page download section:

The download snippet text uses your Shopify theme's styling so it matches with your store automatically
If you have enabled the download button, you can customise the button by following this guide.
You can perform basic custom CSS styling attributes on the code snippet
You can use a Shopify app like CustomerHub. There is an integration available for CustomerHub and Froonze that allows downloads to show in their app's pages
We have an API available for customer account download links where you can do more, but this requires a developer

Updated on: 31/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!