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 needs to give their customers the ability to access and view a read-only PDF agreement from within their account. The merchant wants their staff to upload a unique PDF for each customer, and each customer needs to be able to view and download their PDF agreement after they are logged in to their account on the storefront.
The merchant does not want their customers to be able to edit/delete/overwrite the PDF files; they just want a way for each 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.
❗ Note: Previously the app stored all custom data in a single metafield using a JSON string, but due to recent updates in Shopify, Customer Fields can store data to separate metafields. You will need to check your metafield storage settings to determine what Liquid syntax to use to retrieve metafield data. You can learn more in this help article.
To access custom data via Liquid you'll need to use one of the following syntaxes. Notice there are two different syntaxes (one for each strategy):
Shopify admin-compatible
Syntax:
customer.metafields.NAMESPACE.DATA_COLUMN_KEY.value
Below you'll find an example code snippet that can be used to display the PDF agreement using the Shopify admin-compatible strategy. 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 pdf_agreement = customer.metafields.customer_fields.pdf_agreement.value %} {% if pdf_agreement != blank %} <p>Service Agreement: <a href="{{ pdf_agreement.url }}" target="_blank">{{ pdf_agreement.name }}</a></p> {% endif %}
Bundled JSON metafield
Syntax:
customer.metafields.customer_fields.data["DATA_COLUMN_KEY"]
Below you'll find an example code snippet that can be used to display the PDF agreement using the bundled JSON metafield strategy. 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 = customer.metafields.customer_fields.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! 🤗