Example: Navigation Menu

Ever clicked around a website and got lost in a maze of menus? Yeah, not fun. That's why having an optimal navigation menu is crucial for your siteโ€™s conversion rates. Below, we'll cover some test ideas for your navigation menu and give you step-by-step instructions on how to set them up.

Below, we'll cover a handful of strategies you could test to optimize your navigation menu.

Depending on your theme's editing capabilities, certain tests might require developers or special instructions to set up. If you need more help, contact customer support.

Rearrange Structure

To make things easier for your users, try simplifying your menu. Fewer items and submenus mean less hassle in finding what they need! Plus, if there's a page not getting much love, consider moving it to a different spot. It could just be in the wrong place!

Sticky Navigation

Test whether a sticky navigation menu (one that remains fixed at the top of the screen as the user scrolls) improves navigation and accessibility, especially on long product pages. This can do wonders for keeping users motivated as they explore your site.

Highlight Promotions or New Arrivals

How about adding some pizzazz to your menu by showcasing your latest deals or fresh arrivals? It's a fantastic way to get those items noticed and could really help boost your traffic and sales.

How to test your navigation menu

Navigation menus exist at a theme-level. Therefore, to test a navigation menu, you have to test two themes against each other, each theme with its own menu. Follow the below steps to test navigation menus on Shoplift. If you or your developers have prepared the new navigation menu on a staged theme, skip ahead to Step 4.

Step 1: Create and edit a navigation menu

In Shopify, navigate to Online Store > Navigation. From this page, you can click โ€œAdd Menuโ€ to create your new navigation menu. For tips on editing your new navigation menu, visit the Shopify Help Center. Once your happy with your new navigation menu, proceed to the next step.

Step 2: Create a duplicate theme

Continuing in Shopify, navigate to your Online Store. Click on the ellipsis by your live theme, and select โ€œDuplicateโ€ to create the variant theme for your test. We recommend renaming this duplicate theme with โ€œShoplift Testโ€ at the beginning, for clear communication within your team.

Step 3: Edit your duplicate theme

After creating a duplicate theme in Shopify, click on the โ€œCustomizeโ€ button next to the duplicate theme to enter the Shopify Editor. Be sure to not click the โ€œCustomizeโ€ button on your live theme.

If the changes you want to test cannot be made through the Shopify Editor, you might need to implement custom code on your duplicate theme. If you need help, reach out to your developers or customer support.

In the Shopify Editor, click on your siteโ€™s header. This will open up the customization drawer for your header, where you change the siteโ€™s navigation menu. Click โ€œChangeโ€ under the Menu section, and add the menu you just created to the duplicate theme. Remember to save your changes! After youโ€™re done, your Editor might look something like this:

Now that youโ€™ve staged your variant theme for testing, head over to Shoplift.

Step 4: Create a test

In Shoplift, click โ€œCreate a Testโ€ to enter the Test Draft page. In the Test Draft page, click โ€œTest a theme or global element,โ€ and select your live theme as your original theme.

To select your variant theme, click โ€œSelect variant themeโ€ and select the theme that has your changes on it. From here, youโ€™re ready to specify test parameters and launch your test!

Last updated