A new and improved method for using Customer Fields on your storefront
Use the app embed for Customer Fields to replace your theme's native registration form, enable an edit account page, or simply load in our frontend JavaScript API.
You can also use our app embed in conjunction with an app block or a shortcode if you want to display a form in other locations.
How to find the Customer Fields app embed
The app embed for Customer Fields can be accessed through the link in our app, or also found directly inside Shopify's theme editor. To launch the editor, login to the Shopify admin and go to Sales channels > Online Store > Themes > Customize.
Once you're inside the theme editor, use the menu on the left sidebar and click on the icon for app embeds, like so:
In the app embeds panel, you'll find a list of app embeds available based on the apps currently installed on your store. Find Customer Fields on the list, or use the search tool if your store has a lot of options to choose from.
App embed settings
Enable/disable
Use the toggle switch to enable or disable the app embed for Customer Fields. Please note that the app embed must be enabled if you wish to display a Customer Fields form on your storefront using any of the new installation methods, including app embed, app blocks, and shortcodes.
'Forms' settings
This section of settings is used for controlling your store's registration and edit account forms. You'll need to supply valid form ID(s) to tell the app which Customer Fields form(s) you want to use for customer registration and account editing.
Pro-tip: You can find form IDs in several places in the app admin for Customer Fields, including the 'Forms' page (see example) and the 'Installation' tab in the form builder (see example).
Registration form ID
This field controls which Customer Fields form (if any) is used for customer registration. Enter a valid form ID into the field, and the app embed will automatically replace your theme's native registration form (typically found on the storefront at shopdomian.com/account/register) with the form you specified.
Edit account form ID
This field controls which Customer Fields form (if any) will be used by customers to edit their account details. Enter a valid form ID into the field, and the app embed will automatically create an edit account page using the form you specified.
❗ Important note: When using this edit account feature, you must specify a form that has the account options setting set to 'Default'.
Forms with account options set to 'Require email verification' or 'Require account approval' are only meant for registration, not account editing.
'Language' settings
The language settings in our app embed allow you to customize the text shown to customers when using an edit account form.
A description and example of each language setting can be found below:
Edit account link text
The text used for the hyperlink that is injected on the account page (see example)
Edit account page heading
The text used for the heading on the edit account page (see example)
Edit account 'back' link text
The text used for the return link on the edit account page (see example)
'Advanced' settings
The advanced settings for our app embed are meant for developers who wish to use the app's frontend JavaScript API on pages that do not already contain a Customer Fields form.
Enable developer tools
This checkbox allows developers to enable the app's frontend JavaScript API without installing a form. When enabled, the JS API will be available on all pages on the storefront outside of checkout.
❗ Important note: A specific embed version must be defined for developer tools to function correctly (read more below).
Developer tools version
This field indicates the embed version that will be loaded on the storefront. This field is required, so if the field is left blank, the developer tools will not load.
We typically recommend using the latest version of Customer Fields, but certain stores may require specific older versions due to customizations. A complete list of embed versions can be found on our app's changelog: customerfields.com/changelog