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 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 forms 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 (see 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

Did this answer your question?