Allow customers to access "view only" files

Did you know that you can use Customer Fields to display certain "view only" files to customers on the storefront? With the use of the app's file data columns, customer editing tools, and metafields in Liquid, this is entirely possible!

Example use-case

Consider this: A merchant with a service-based business model wants their customers to access and view a "read-only" PDF agreement from within their account. The merchant wants their staff to be able to upload a PDF for each customer, and each customer needs to be able to view and download their PDF agreement after they are logged in.

The merchant does not want the customer to be able to edit/delete/overwrite the file; they just want a way for the customer to view the file that was uploaded by a staff/admin user.

Suggested steps

The steps below provide an outline of how to handle this example use-case:

Step 1 - Create a file data column

Go to the Data Columns page in the app admin and click the button for 'Add data column'.

Type in your desired label and key for the new data column. For the data type, make sure to select file. We also recommend enabling the setting for 'Add to favorites', since this will allow the data column to appear in the Overview card when viewing and editing customers in the app admin.

Here's a screenshot that shows an example of how to create a file data column with a key of pdf_agreement:

Step 2 - Use metafields in Liquid

Once a file data column has been created, you will need to add Liquid code to your theme to display the file for this data column for each of your customers.

Keep in mind that Customer Fields stores values for all custom data into Shopify's metafields, so you will be able to show data that is specific to the customer by using Liquid to output the metafield data. You can learn more about how to use metafields in Liquid by reading this help article.

Below you'll find an example code snippet that can be used to display the PDF agreement. This particular code is designed to show a hyperlink, and when the link is clicked the PDF file will be displayed in a new browser tab. There's a label next to the link to explain what the link is meant for, and the link's title uses the filename of the PDF. The code below also ensures that the hyperlink will only show if the customer has a pdf_agreement uploaded to their account, otherwise the link will not be shown:

{% assign custom_data = %}
{% if custom_data["pdf_agreement"] != blank %}
<p>Service Agreement: <a href="{{ custom_data["pdf_agreement"].url }}" target="_blank">{{ custom_data["pdf_agreement"].name }}</a></p>
{% endif %}

Important note: The code provided above is just an example. You're welcome to copy/paste this code into your store's theme, but please make sure to update the code to fit your specific needs.

The goal for our example use-case is to display the link for the PDF agreement on the store's account page, so we've added the code snippet inside of templates/customers/account.liquid using the code editor in Shopify.

Step 3 - Edit customers in the app admin

Now that everything has been set up, you can add a file to a customer's account by editing a customer record in the app admin. We suggest registering for a test account if you haven't already done so, this way you can edit your test account before making any changes to your real customer records.

Any favorited data columns will show up in the Overview card when viewing customers in the app, so in this case you can simply click the 'Edit' button to upload a file into the pdf_agreement data column that was created on Step 1:

Step 4 - Test the end result on the storefront

Once a file has been uploaded and the edits to the customer record have been saved, the link to the PDF agreement will be displayed to the customer on the account page. See the screenshot below for an example of what the finished product would look like for the end-user (customer):

Questions, comments, or concerns?

Reach out to our support team via chat or email and we'll be happy to assist! 🤗

Did this answer your question?