All Collections
Meteor Mega Menus
Legacy
Technical/Advanced
Meteor migration guide
Meteor migration guide

Best practices for recreating legacy menus using the new version of Meteor

Kyle Weiskopf avatar
Written by Kyle Weiskopf
Updated over a week ago

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

  1. 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)

  2. 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

  1. 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)

    1. If the nav import included sub-items, proceed to manage each mega menu

    2. If the nav import did not include sub-items, manage each nav item that needs a mega menu

Manage mega menus

  1. Click the 'Manage' button for a nav item that needs a mega menu

  2. Confirm the menu content contains proper menu items/links

    1. Add/edit/rearrange/delete menu items as needed

  3. Select the desired desktop template

  4. Edit the customization settings for the desktop template

  5. If multiple mega menus are desired, repeat this process for the rest of the menu items

Manage mobile menu

  1. Click the 'Mobile' tab

  2. Select the desired mobile layout

  3. 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.

Did this answer your question?