In this guide, we will walk you through the steps to migrate your existing mega menus to the new version of the app, while ensuring a seamless transition. Your customers won't even notice!

Use the 'Themes' page in Shopify admin and prepare a theme for testing menus on the storefront.

Open Meteor and launch the new version of the app. Once you're inside the new app, a popup will appear prompting you to begin the migration process.

Follow the steps in the migration tool to select the navigation menu you'd like to use for your new menus. The migration tool will then create navigation items using the menu you selected, and any legacy menus attached to the navigation will be recreated in the new app.

The next step in the migration process is to launch the app's menu editor so you can review your new menus and make any desired changes. The menu editor allows you to add new nav items, manage the settings for existing mega menus, create new mega menus, and edit the settings for the mobile version of your menus.

Save early, save often! Make sure to save your changes in the menu editor before proceeding.

You'll need to remove the app's legacy code from the store's theme to avoid conflicts between versions. There are two ways to remove the legacy code; via a built-in cleanup tool (easiest - recommended), or via manual uninstall (technical - advanced users only).

After the legacy code has been removed you can safely enable the app embed in the theme editor.

The app's installation modal is designed to appear when saving changes in the menu editor. You can also access this modal manually using the 'Manage installation' button in the top bar of the menu editor, or via the 'Get started' card on the app's dashboard.

The installation modal includes a built-in cleanup tool that will remove the app's legacy code from the selected theme. The modal will ask you to select a theme, and if the app detects legacy code in the selected theme you'll be prompted to run the cleanup tool to remove the legacy code.

Once the cleanup is finished, the modal will prompt you to enable the app embed for Meteor using a deep link.

As an alternative to the cleanup tool, you also have the option of manually removing the legacy app code if you're comfortable making code edits. See this help article for more details: Manual uninstall of legacy app code

Once the legacy code is fully removed, you can launch the theme editor in the Shopify admin to enable the app embed on the desired theme.

Once the app embed for Meteor is enabled and the changes in the theme editor have been saved, it's important to view the storefront to test the menus before publishing.

If the new menus look and work as expected, you can simply publish the duplicate theme from Step 1 that was used for testing.

Alternatively, you can use the app's built-in cleanup tool to remove the legacy code from the store's live theme, or you can manually remove the app code. Regardless of your approach, once the app's legacy code is removed you can safely enable the app embed in the theme editor on the store's live theme (refer back to Step 3 for more details).

After publishing menus to the live storefront, you can clear all legacy data to automatically remove leftover app code from the rest of your store's themes. Clearing legacy data will also delete any legacy menus and remove access to the old version of the app.

Please note that this action is not reversible, so make sure that you have fully tested and published your new menus before clearing legacy data.