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!
👉 Let us take care of the migration
Reach out to our Customer Success team and we'll perform a FREE migration on your behalf.
Note: Before migration can occur, our team will send over a collaborator request for your Shopify store. Once we have been granted access, we'll follow the steps outlined below.
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, rebuild menus
Open Meteor and launch the new version of the app. Within the new app, open the menu editor to start the rebuild process.
Create nav items
Click the link for 'import menu from Shopify' to perform an import of navigation items from Shopify using a specific navigation menu (in most cases you'll want to use the navigation menu named "Main menu" which has a handle of
main-menu
, but this can vary between stores/themes)If the nav import included sub-items, proceed to manage each mega menu
If the nav import did not include sub-items, manage each nav item that needs a mega menu
Manage mega menus
Click the 'Manage' button for a nav item that needs a mega menu
Confirm the menu content contains proper menu items/links
Add/edit/rearrange/delete menu items as needed
Select the desired desktop template
Edit the customization settings for the desktop template
If multiple mega menus are desired, repeat this process for the rest of the menu items
Manage mobile menu
Click the 'Mobile' tab
Select the desired mobile layout
Edit the mobile styles as needed
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. 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.
Cleanup tool (easiest)
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.
Manual uninstall (advanced)
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
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 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).
5: Clear legacy data
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.