Overview

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

You can learn more about the new features and benefits here: Understanding Customer Field's new(er) features

Timeline for legacy EOL (End of Life)

June 1st, 2022

End of Support

Withdrawal of technical support for all legacy versions

June 1st, 2023

Shutdown

Removal of all legacy features from the app's codebase

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 the store's theme code includes any app-related customizations, then there is a chance that the customizations will be lost when migrating so they 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 the theme 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 manually update theme code if the app’s legacy form was manually installed in a custom/unique 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: Navigate to the 'Fields' page

To start the process you'll need to access the 'Fields' page in the app admin by clicking the "Fields" tab on 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 'Continue with migration' 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: Run the migration

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: Configure the new form

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.

Step 7: Disable legacy fields editor

The last step of the migration process is to disable the legacy fields editor in the app admin. This will remove the 'Fields' tab from the left nav, and it will also remove the 'Legacy data' card from the customer detail pages.

To disable the legacy fields editor, simply navigate back to the 'Fields' page in the app admin and then click the red button for 'Disable fields editor'.

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?