Navigation Menu
Introduction
Testing your navigation menu is a great strategy that can significantly enhance the user experience and drive sales. As one of the primary ways customers interact with your site, the navigation menu plays a crucial role in how they discover products and navigate your offerings. Given its presence on every page, any adjustments can lead to substantial changes in customer behavior and satisfaction. Here are a few aspects you can explore through A/B testing your menu:
Layout: Experiment with different structures to see which is more intuitive for users.
Organization: Test how grouping products affects discoverability and ease of use.
Presentation: Vary the visual design to identify what draws attention and enhances usability.
Styles: Try different color schemes and fonts to see what resonates best with your audience.
Wording: Analyze the effects of different labels and calls to action on customer engagement.
By fine-tuning these elements, you can optimize your navigation menu for better performance and improved customer experience. There are a few different ways you can test your navigation menu. The examples below show how to do this with a Theme Test, or through our Onsite Edits capabilities.
Once you have finished setting up your test, we recommend going through our suggested Content Test QA Checklist before you turn it on.
Setting the Test Up
Option 1: Theme Test
A Theme Test allows you to test a completely new design for your site, as you can make use of a new Shopify theme you're already working on, making it the easiest way to test bigger modifications. Your new theme may contain all sorts of changes, including a new navigation menu, and when a visitor comes to your site, Intelligems will automatically randomize them into one of the themes you've picked for your test.
You can test any of the aspects listed above, as you'll be setting up a new theme with your alternative navigation menu, so the sky is the limit!
To test a new navigation menu through a Theme Test:
Create the new version of the menu you want to test. Set it up as you normally would on Shopify, creating a new Shopify theme (it may be a copy of your existing theme) in which the new menu will be used.
Follow the steps on How to Set Up a Theme Test to create a new Theme Test. When selecting the themes that will be part of the test, choose your current theme for the control , and the theme containing your new navigation menu as the test.
You should be all set to launch your test!
Option 2: Onsite Edits
Intelligems' Onsite Editor is a dynamic and versatile tool that enables you to creatively interact with and test various elements of your Shopify theme. When experimenting with a new navigation menu, you have numerous options depending on the specific aspects you wish to explore. Here, we’ll delve into ideas for enhancing your menu through a fresh Layout and Organization, reimagining its Presentation and Styles, or experimenting with innovative Wording.
Layout and Organization
If you're looking to test two different menus — one that directs visitors to all your collections through a single link and another that lists each collection individually — a great approach is to set up all the options you want to test on Shopify. Then, you can use our Onsite Editor to hide or show each option based on the menu you are evaluating.
Here's how you can achieve this:
On Shopify, go to Online Store > Navigation, and create a new menu through the Add menu option.
Create a menu containing all the sections that will be presented to both groups A and B:
Go to Online Store > Themes, and duplicate your current theme. We don't want to set up your live theme with the new menu quite yet, as all those options would be visible, so we will set everything up using a duplicate theme, which you can then publish by the time you turn on your test.
Next to the newly created theme, click on Customize to access the Theme Editor. Click on your theme's header, and change the current menu by the one you just created:
On Intelligems, create a new Content Test, selecting the type Onsite Edits (see How to Set Up an Onsite Edits Test). When you get to the final step, click on Edit next to Content Edits, then Add & Edit Changes in Visual Editor, and select the duplicate theme you created:
With Group A selected, enable the element selecting tool, then select each menu element that needs to be hidden for Group A, creating a replacement for each one. When selecting each menu element, make sure you're selecting the most outer portion of it, as this will ensure that we are targeting the correct portion of the menu that needs to be hidden. You'll hide each of these elements for Group A, while leaving them as originally set for Group B:
Repeat this for the elements that won't be visible to Group B, this time leaving them as originally set for Group A, and hiding them only for Group B. Make sure to Save your changes before closing the editor:
As you switch between groups A and B in preview mode, you'll notice that the right menu elements are displayed for each test group.
Once you are ready to start your test, simply publish the duplicate theme that has the test menu in it, or set your live theme with that menu, then start the test on Intelligems. You'll want to make sure to keep the interval between these two actions as minimal as possible, so your visitors don't see all the menu options once the test menu is set on your live theme.
If you are using Audience Targeting to run this test only for a subset of visitors, make sure you use Advanced Targeting, setting up a condition so, if the visitor doesn't meet the audience's criteria, they get assigned to your control group, and select the option to exclude them from Analytics. This will ensure that they see your default menu instead of all the menu items. For example, if you wanted to target Desktop visitors only, this is how you would set this up:
Presentation and Styles
Perhaps you are happy with the options presented on your menu, but you want to test the ways your visitors perceive it. You can easily inject custom styles into your test, having an alternative presentation for your test group, without needing to make any theme modifications, as outlined below:
On Intelligems, create a new Content Test, selecting the type Onsite Edits (see How to Set Up an Onsite Edits Test).
Load your test's preview, access the Onsite Editor, and go into editing mode.
Click on the "</>" icon to open the Global CSS / JS editor:
In the Group selector, switch to your test group, then add in your custom CSS that targets and modifies the elements on your navigation menu. This will be CSS that you've written yourself, with the help of a theme developer, or an AI generating tool, for example:
Make sure you click Apply on the editor, and then Save on our widget.
Wording
Changing labels can often enhance the understanding of the underlying content and boost client engagement with specific sections of your menu. Here's how you can test simple text adjustments to your existing menu items:
On Intelligems, create a new Content Test, selecting the type Onsite Edits (see How to Set Up an Onsite Edits Test).
Load your test's preview, access the Onsite Editor, and go into editing mode.
Click the button on the bottom-left to enable element selecting:
Click on the menu item you wish to test, then Edit Text:
Make no changes for Group A (Leave as is). For Group B, add in the text that should replace the original text:
Make sure you click Done on the editor, and then Save on our widget.
Additional Suggestions
The methods for testing a navigation menu aren't limited to those mentioned above. With the various resources available through Intelligems, there are several other ways you can set up your test, depending on the specific changes you want to evaluate:
If you want to redirect visitors to certain pages when they click on a given menu link, you can create a Split URL Test rather than make changes directly to your menu.
If you want to modify your menu without creating new menu items on Shopify, and you have a developer to assist you with front-end coding, you can use our JavaScript injection capabilities, adding custom JavaScript to the test group in order to programmatically modify your menu.
Last updated
