How to Enable Zipify Pages’ New Mobile Header
Hey, Brittany here from Zipify.
Do you know what percentage of your traffic comes from mobile?
For our $60 million Shopify store, it’s upwards of 85%!
Through some extensive testing this past year, we’ve added new mobile tools to Zipify Pages that have resulted in 25% more mobile revenue, and 86% more clicks to our store from cold traffic.
And to help make it easy to optimize your Shopify store for mobile traffic, we built all these features into our new Dynamic Mobile Header.
Watch the video to see how to enable it on your store today!
Results: Mobile is Money
Through extensive split testing, we found that by:
- Simplifying our mobile header
- Making the fly-down menu more clear
- Adding a “Shop” icon (like the one above)…
We increased our average revenue per user by a $1, we increased our average order value by $3, and we boosted our conversion rate by 20%:
And if that wasn’t enough, when we added this store icon to the header:
Clicks from cold traffic to our store page increased by 86%.
So not only do these new changes to the Zipify header make your store more mobile-friendly, the data shows that they make it more profitable as well.
Now let me show you how to enable the new Dynamic Header for your store:
How to Add the Dynamic Header Block
To add the new Dynamic Header block to your store, click on the “+” icon at the top of the Zipify Page to add a new block.
Go to the “Header” section and select “Dynamic Header” from the list.
To customize the Dynamic Header for your store, click the pencil icon in the top right corner of the block. (By default, all the new features will be enabled to start, since this is what worked best in our tests.)
The preview at the top of the window shows you how your header will perform on desktop and mobile.
And as you check or uncheck the options, they will populate live in the window.
Best Headers for Mobile & Desktop Use
Under the actions section, you have three options for how the header behaves:
By default, the header is fixed to the top and will scroll up with the page, but you can also set it to be sticky and to only appear when you start scrolling up.
For desktop: We found particular success with sticky headers because you have more screen real estate to leverage.
On mobile: Screen space is limited, and our best results came from making the menu appear only after the user scrolls up, saving that extra space for other content.
Select “Mobile Layout” in the block settings to edit the style of the icons at the top of the header as well as their colors.
Or you can remove an icon altogether by unchecking it in the customization menu below:
When we added these icons to our headers we saw a huge increase in visits to our store, so we recommend testing them for your store too.
Customizing Your Dynamic Header
And like with all our other blocks, you can customize each element within the header to match your store.
To add your logo to the dynamic header, just click on the existing logo and select your own image from your image library:
To customize the categories of your header and your mobile fly-down menu, select the current text and edit within the “Navigation Bar Options” menu.
From this menu, you can also edit the font’s color, size and hover state options.
Now, when you publish the page, you will have a conversion-tested Dynamic Header that displays perfectly on desktop and mobile.
This Dynamic Header has been many months in the making, and it’s finally available to all our Zipify Pages users.
So, if you haven’t added the Dynamic Mobile Header block to your store, log in today and check it out!
Not a Zipify Pages user?
If you aren’t a Zipify Pages user and you want to start building high-converting landing pages for your store, visit ZipifyPages.com to get started.
I’m Brittany, and thanks for reading!