This documentation is outdated.
This page is only for reference by those who have existing liquid installations of Customer Fields and need to provide maintenance. Even so, we highly recommend using (and, if applicable, switching over to) our new theme app extension.
View our new installation intructions
Learn more about our theme app extension
Installation
Also see our help center article on Liquid installation.
The simplest way to get the app installed on a theme is to use our quick installer for a form within the app. Start by creating a form, continuing to the install step, choosing a theme, and selecting the desired locations. This will add the necessary Liquid code to use the app on a specific theme. The installer adds the following files plus any additional location-specific modifications:
- snippets/customer-fields.liquid
- assets/customer-fields.js
- assets/customer-fields.css
Other location install
If you’d like to render a form in a specific place in your theme (say, a pop-up modal or product page), you’ll want to go through the installation process as normal and check “Other location”. This will generate a unique ID for this form, which is passed into a snippet render. It will look something like this:
{% render "customer-fields", form_id: "gK7tlA" %}
Paste this in any Liquid template you need, and the form will be rendered in that place.
Making Liquid modifications
It’s not safe to edit snippets/customer-fields.liquid, assets/customer-fields.js, or assets/customer-fields.css. These files will change as new updates become available and any changes will be overwritten. Instead, you should follow our JavaScript API guide or build a custom form, where you can create custom experiences.
JavaScript API
If you’re only wanting to get and set data on a customer dynamically with JavaScript, you don’t need any other resource other than snippets/customer-fields.liquid. Using the customer_api flag to true when rendering the snippet won’t include additional scripts, which are larger in size than the API script.
Add this to the <head> inside your layout/theme.liquid:
{% render 'customer-fields', customer_api: true, version: '<Version number>' %}