Overview

If you're still using the app's old legacy fields editor then it's a good idea to consider migrating over to the new form builder. Migrating will not only allow you to take advantage of the app's new features, but it will also ensure that the forms on the storefront are using the most up-to-date technology.

If you haven't already, you can learn more about the app's new features and benefits here: Understanding Customer Field's new features

Built-in migration tool

The app's built-in migration tool is designed to create a new form using the new form builder. During the migration, the app will automatically copy over all of the legacy fields (and their settings) from the old version.

Note: You can find step by step instructions for migration at the bottom of this help article.

Data columns concept

The new version of the app has introduced the concept of data columns. You can learn more about data columns using this help article. If a legacy form has any fields with spaces for names/keys, then the app will create new data columns with keys in the proper format (read more).

Custom code

If you have made any app-related customizations, then there is a chance that they will be lost when migrating, and the customizations may need to be re-configured. For this reason, it's imperative that you make a backup of the store's theme before migrating or installing a new form, just in case you need to roll back your code to the old version.

Technical Details

Please be aware of the following when migrating:

1) The app’s snippet file in the store's theme will be replaced with a newer version. This means that any changes made to snippets/customer-fields.liquid will be overwritten

2) You may have to update theme code if the app’s old form was manually installed in a custom location.

3) The Liquid syntax for displaying metafield data on the storefront has changed. This may require you to update theme code to accommodate for the new syntax.

4) Legacy JavaScript callback hooks will no longer work. A new set of JavaScript callback hooks are available, and more details can be found using our developer documentation. Please note that most use cases can now be handled via settings in the new form builder (see #5 below).

5) The new form builder allows you to create conditional rules and special field validations directly in the app - all without having to use custom JS!

6) The markup for the app's form fields has changed dramatically, so any custom styling may need to be manually updated. In addition, form styles can now be added directly to the app's form builder.

  • Learn more about custom CSS and form styling here: Form styling 

7) The 'Auto-tag' setting for Country and Province fields has been removed. If you need to tag customers by their country or province, you can do so by creating form rules.

Steps for migration

Follow the steps below to migrate a legacy form over to the app's new form builder.

Step 1: Make a copy of the store's live theme

Since you're going to be replacing the legacy form with the new migrated form, it's always best to test out the new form on an unpublished theme first, this way you can make sure it's working as expected before customers start using it.

You can made a duplicate of the store's live theme in the Shopify admin under Online Store > Themes > Actions > Duplicate. We suggest renaming the duplicate theme to make it easier to reference later on.

Step 2: Fields page

To start the process, you will want to access the 'Fields' page in the app admin using the left nav. From here you will see a splash page that allows you to access the legacy fields editor, or start the migration process. Click the 'Migrate your form' button to proceed.

Read the FAQ that appears on the following page, and then click the 'Continue with migration' button to begin the migration process.

Step 3: Migration tool

The migration tool will create a new form using the app's new form builder. During the migration, the app will automatically copy over all of the legacy fields and settings from the legacy field editor. It will also create a form rule for any legacy fields that have the "Hide on registration" setting enabled.

You'll have the option to edit the name of the migrated form, change the form's account options (learn more), and you can also preview an example of what the migrated form will look like before continuing.

Click the 'Continue' button to proceed and launch the app's new form builder.

Step 4: Form configuration

Once you launch the form builder, you can make any changes to the form that you desire. Be sure to review each field on the form and the form settings to make sure that things are set up properly. There are lots of new features and options in the form builder compared to the legacy fields editor, so be sure to read our "What's new?" guide for more details.

Once you have the new form ready, click the 'Continue' button to proceed.

Pro tip: You can also click the 'Save' button to save the new form into the app, which is helpful if you want to save your progress and come back later to continue the migration process.

Step 5: Form install

On the installation page, you will want to use the 'Theme' dropdown to select the duplicate theme you created in Step 1. After selecting the proper theme, you will want to choose your desired install locations before clicking the 'Install' button.

Pro tip: Most legacy forms are installed on both the registration page and the edit account page, but there are some stores that only use the app's form on the edit account page. You can find more details about form installation and the available options using this help article.

Step 6: Test the new form

Once the new form is installed on a theme, it's time to test out the form on the storefront by previewing the theme that you selected when installing the form. Make sure to fill out the form's fields and submit the form to double check that everything is working properly.

Keep in mind that you can edit the migrated form at any time using the 'Forms' page in the app admin if you need to make any changes. From the Forms page, simply click the 'Edit' button for the form to launch the form builder.

If you're ready to install the new form on the store's live theme, simply change the 'Theme' setting on the 'Installation' tab in the form builder. Select the live theme and then click the 'Install/Update' button.

Have questions or concerns? 

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

Did this answer your question?