How to migrate legacy fields to the new form builder | Customer Fields

How to migrate legacy fields to the new form builder in Customer Fields:
help.heliumdev...
Intro: 00:02
Duplicating theme: 00:22
Migrating a form: 00:38
Proofing migrated forms: 01:10
Storefront installation: 01:28
Testing new form: 01:52
Installing on live theme: 02:12
Disable fields editor: 02:26
New fields editor: 02:40
Removing leftover code: 02:52
The new Customer Fields: 3:08
Transcript
On June 1st, 2023, Customer Fields will be removing all legacy features from the app’s codebase, including all forms created prior to December 2019. It's time to migrate to our new form builder which is loaded with tools to help you grow your store.
Before we begin, let’s duplicate our Shopify live theme so we can test our changes on an unpublished theme. For ease, I’ll rename this.
Back in our Customer Fields app, we’ll be prompted to “view migration guide” which will take us to our “migrate your legacy fields” page. Read these helpful FAQs before clicking “continue to migration.”
Now we’re looking at the form we want to migrate. Again, for ease of reference, I’ll rename this.
Now let’s click “Continue.” Customer Fields will automatically copy over all the existing legacy fields and settings from the legacy field editor.
Let’s just double-check that our form looks good. If you’ve manually added an asterisk to denote a required field, we’ve got a built-in setting in our new form creator for that. Let’s just clean these up, and while we’re at it, let’s drop these fields on the same line so they look cleaner.
Right, now we’re ready to install this on our Shopify storefront. We’ll click “continue” and we’ll be prompted to select a theme. Let’s find the one we duplicated earlier. And quickly copy our form ID before enabling the app.
In our “app embeds”, we’ll enable Customer Fields and use the dropdown to show us installation options. Let’s find our desired form, paste in our form ID, and let the site load. Don’t forget to save, and we’re almost done.
Let’s test the form by previewing our theme and pretending to be a new customer. Submit, and now, back in our Customer Fields app, let’s click on the customer’s page so we can view our test record for submission. Everything is looking good, so we’re ready to install the form on our live theme.
We’ll repeat the same steps, enable our app, and after pushing our form to the live theme, we can now safely disable the fields editor.
Back in our Customer Fields app, we need to click on our “Fields” tab. Already migrated? Why yes, we are. Let’s push the red button to “Disable [the] fields editor.” And now, we’ve officially migrated! Now when we click on “Forms” we can edit existing forms, create new ones, and select from a variety of pre-made templates.
Finally, let’s clean up our leftover app code in the store’s theme. To do that, we click on settings and then find “vintage uninstall.” Let’s select all, and push the red “uninstall” button.
When we finish, our navigation sidebar should look like this.
And you’re all set. Welcome to the new Customer Fields, with new features to help you know your customers better, so you can sell them products they love.
#shopify #shopifytutorial #customerfields