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
In this article:
Things to Know
Timeline for legacy EOL (End of Life)
June 1st, 2022
End of Support
Withdrawal of technical support for all legacy versions
June 1st, 2023
Removal of all legacy features from the app's codebase
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).
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.
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.
Learn more about how the new form installer works here: Liquid install details
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.
Learn more about metafields here: Metafields data
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!
Learn more about the new rules feature here: Form rules
Learn more about field validation here: Field validation
Learn more about using data column variables here: Data column variables
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
Province fields has been removed. If you need to tag customers by their country or province, you can do so by creating form rules.
Learn more here: Tag customers by region
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!