How to A/B Test the order of Navigation Links on Shopify with Google Optimize

Your navigation bar is vital to your shop's UX and strongly influences how your visitors browse your products. This guide will teach you how to run experiments on the order of the links in your navigation, and how to measure the results.

Update (February 2023): this experiment is now part of a free series I run in my Experiment Club. Head over there and signup if you'd like help building this and other similar A/B tests!

Why Experiment with your Navigation Bar Links?

Your navigation bar supports two very distinct user journeys:

1. Help users who know what they want, find what they want
2. Guide users around the store who are just browsing

The second group is particularly interesting — where you guide them will strongly influence whether they buy and what they buy!

How to run a Navigation Bar A/B test

In this test, we'll change the order of the menu items in your shop's navigation bar.

Step 1: Sign in to Google Optimize

Step 2: Create your experience/experiment

• Click the (Create experience) button
• Enter your experiment name in the name field.
• Enter the web page URL where you'd like to run your experiment.
• Select the experiment type. This is a simple test with one control variant and one challenger variant, so we'll select the 1st option, i.e. A/B test.

Step 3: Add experiment variants

• Click (Add variant) to add your challenger variant.

• Click the (Edit) button to access the Google Optimize visual editor and make changes to your challenger variant.

• We'll make the variant change by injecting a javascript code
• Click the box icon at the top left corner to open the element selector
• In the Element Selector field, add the element you'd like to target for code injection (in this case "body")
• Click the (Add change) drop-down button. Select the "JavaScript" option

• Inject the code (see the block below). Click Apply at the bottom right corner.
• Click the (Save) button at the top right corner to save the variant change.
• Click the (Finished) button to finalize the changes and exit the visual editor.

var styles1 = `
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(1){
order: 1;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(2){
order: 5;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(3){
order: 3;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(4){
order: 4;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(5){
order: 2;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(6){
order: 6;
}
#menu-drawer > div > div > nav > ul {
display: flex;
flex-direction: column;
}
#menu-drawer > div > div > nav > ul > li:nth-child(1){
order: 1;
}
#menu-drawer > div > div > nav > ul > li:nth-child(2){
order: 5;
}
#menu-drawer > div > div > nav > ul > li:nth-child(3){
order: 3;
}
#menu-drawer > div > div > nav > ul > li:nth-child(4){
order: 4;
}
#menu-drawer > div > div > nav > ul > li:nth-child(5){
order: 2;
}
#menu-drawer > div > div > nav > ul > li:nth-child(6){
order: 6;
}
`;
var styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles1;
document.head.appendChild(styleSheet);

We're using Google Optimize to inject the Javascript code and append the styling in the head tag of HTML. The function of the above code is to change the order of the menu items in the website's navigation bar. The elements and functionality are already present; therefore we're making the change through CSS by using the display: flex property (to change the order of the menu items). Since there are two different navigation bars, desktop and mobile, we've applied the styling for both devices.

• Click the Preview option on variant 1 to preview the changes and ensure that the changes are working as intended.

Step 4: Page Targeting

• Click the pencil icon to edit the page targeting setting.

• This is a navigation bar experiment, and the navigation bar is an element that typically appears at the top of the web page, across the entire website (on every page).
• Therefore, we'll change the URL condition for "matches" to "contains". This will enable the variant to appear on every page that contains https://curvytie.myshopify.com in the URL.

Step 5: Audience targeting

• We'll not make any changes to the (Audience targeting) setting because we're targeting all website visitors and on all device categories.

Step 6: Experiment objective

• You can either choose from the default list (e.g. pageviews, bounce) or create your own custom objective (e.g. custom events or goals)

Note: You can set a maximum of 3 experiment objectives (one primary and two secondary objectives). The experiment winner will be declared by Google Optimize based on the impact on the primary objective.

Step 7: Check the experiment setup to identify errors.

• Click the (Check installation) button.
• If this is your first time, you'll be asked to Install the Google Optimize chrome extension.
• After installing the plugin, click the (Check installation) button to verify the experiment setup.

• If your installation is error-free, then Google Optimize will confirm that.
• Else, you'll be notified with an error message. Follow the error dialogue box instructions to resolve the issue and click the (Check installation) button again to verify the experiment setup.

• Click the (back to experience) button to exit the page and launch the experiment.
• Now if you scroll to the top, you'll see a checkmark on every step (indicating successful setup)
• Click the (Start) button to start your A/B test experiment.

Step 8: View the results.

Click on the reporting tab, and once there is sufficient traffic, you'll see the results of your experiment.

We hope this guide helped you set up your A/B test! If you'd like more inspiration and free step-by-step guides for Shopify experiments, head over to our Experiment Club.