Follow these steps for a seamless migration
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!
1: Prepare a theme for testing
Use the 'Themes' page in Shopify admin and prepare a theme for testing menus on the storefront.
Duplicate and rename
Duplicate an existing theme that you wish to use for testing (in most cases this will be the store's 'Live' aka 'Published' aka 'Current' theme)
Rename the duplicated theme for easy reference (e.g. "Copy of Dawn - new Meteor")
2: Launch new app, migrate legacy menus, adjust settings in menu editor
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.
Built-in migration tool
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 changes in the menu editor
Save early, save often! Make sure to save your changes in the menu editor before proceeding.
3: Remove legacy code and enable app embed
You'll need to remove the app's legacy code from the store's theme to avoid conflicts between versions. See this help article for more details: Manual uninstall of legacy app code.
After the legacy code has been removed you can safely enable the app embed in the theme editor.
Enable app embed
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.
Go to the app embed settings in the theme editor
Find the app embed named "Meteor Mega Menu" and use the toggle switch to enable it
Adjust the optional app embed settings as needed to ensure the desktop and mobile menus work well within the theme
Save your changes in the theme editor
4: Test and publish new menus
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.
Test menus by previewing the theme
View/Preview the theme that has Meteor's app embed enabled
Test the storefront and confirm that new mega menus work as expected on both desktop and mobile
Publish menus to live storefront
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 manually remove the app code directly from the live theme, and 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).
5: Clear legacy data
After publishing menus to the live storefront, you can clear all legacy data in the app and proceed with removing leftover app code from the rest of your store's themes.
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 and removing the code from your live theme.