Make More Money from Mobile Traffic with Zipify Pages’ New Mobile Header

Hey, Ezra from Zipify here, and I figured out something super cool that allows me to make more profit from my mobile traffic. And for me, 85% of my store’s traffic comes from mobile devices, people scrolling on mobile. And so it’s really important that we optimize so that we can serve those customers as best as we possibly can. Check this out. So, this specifically has to do with the header of my store. Now, the way that I used to do this was real funky as you can see. You can see where that grey bar is, I’ve got the phone number, I’ve got the logo, it’s not super usable. And when you look at the data here, you can see that mobile traffic for this one year period is 52% of my web traffic. When you add tablet traffic, that ends up to be about 76%. And now this is at close to 85% of my traffic and unfortunately, at this time, I was only converting really well on desktop at a 4% conversion rate but on mobile, I was only making $0.87 per visitor and converting really low, whereas on desktop, I was converting at $3 per visitor and I thought, “Man, I need to fix this.”

So, we looked to our top navigation to fix this because that’s where people are engaging with. If they’re gonna engage on mobile, they’re gonna engage that top navigation so we added some things. We added a more functional header labeled buttons, a search option, and really important pages bookmarked. This is what it ended up looking like. You can see it takes up a lot of screen real estate, but there’s a lot more action for them. And this is not the final version, I’m gonna show you the final version in a minute. But just doing this was a big improvement. You’re gonna see how big here in a second. And so we also added this thing where when someone scrolled down, we wanted to give them a quick way to get back to the top so that they could just click this little button that appears and scroll right back up to the top without having to scroll, scroll, scroll. They can just tap one thing and get back to the top of the page. And along that same line of thinking, this bar drops down for them as soon as they begin to scroll up and you’re gonna see a video of this in a second. And then finally, this is what happened when you would click our menu, it was like super funky, you couldn’t see the text links, it was hard to engage with and we changed that to be way more easy to deal with where it’s like the lettering was much bigger, much cleaner, the menu flew out better, there was a way to exit out.

Again, this is not the final version, but just moving to this, just displaying the entire menu and having an ability to hide it, making big easy to read font, having a clear white background, all of this stuff resulted in a significant improvement to conversion rate. I’m gonna show you how you can do this using my application in a minute but look at this. This is just cold traffic, by the way. 25% increase in revenue from mobile and a 20% increase in conversion rate from cold awareness traffic to mobile, 20% more revenue from mobile visitors from those simple changes. So, I wanna read some of the actual results from this test. So, average revenue per user increased from $6.87 to $7.25 and 80% confidence rate. So, wasn’t a full winner because only at 80% average order value went up by nearly $5. But all that stuff is not a high enough confidence rate in the test to really call it. Here’s the point where this thing really wins is visits to the store, we’re up conclusively by 86.4% at a 100% confidence rate on mobile. 86% more people visiting the store on mobile, 100% of the time. That is incredible for e-commerce. So, you must have a store icon in your mobile header. If you’re running an e-commerce store for sure, do that. So, you can see how it functions here. It’s pretty big when you first land on the page. As soon as you scroll down a little button appears for you to be able to tap and get right back up to the top of the page. If you begin to scroll down and you show upward intent, we drop that menu down for you. Then when you click fly out it flies out nice and easy, big easy to read text and X to close it off. Super simple, but makes the menu on mobile significantly easier to engage with.

Now, we’ve made some big improvements even since then. Just this, just what you’re looking at here, this functionality was worth 20% increase in conversion rate. And by the way, if you don’t quite understand the value of 20%, 20% more revenue. Right? So, basically, what that means is that when someone comes to your page, they’re 20% more likely to buy from you just from making it more usable, more functional on mobile devices. Now, I wanna show you what we’ve done since then because once we saw the incredible amount of improvement that we got from optimizing our mobile experience, we’ve been all in on this. So, check out where we are now. Now, what we’ve done is we’ve adhered to what I call the 15% height rule. And what that means is our header only takes up at a maximum, 15% of the height of the actual screen real estate. And you can see in our first version here, go back here and we look at this one over here on the right. Look at how much height that takes up. That’s got to be 35% of our screen real estate was taken up by the header and even with that, even with 35% of the overall screen real estate being taken up by the header, it still outperformed the non-functional version we had before. But now we’ve adhered to this 15% height rule where that gives us much more real estate to show off our page and we still have a super functional header and we increase our conversion rate even more and we added this shop icon here. And 86% more people visit our products since we’ve had this shop icon on mobile. And you know the goal with e-commerce is get people to visit your products and then get them to add them to the cart.

So, we’re using our header to have an icon call to action to go to the store which increased the number of people visiting our store by 86%, which is significant which results in more people seeing products and more people converting. Now, I’m gonna show you how you can achieve this if you don’t have a designer and a developer. But right after I do, I’m gonna talk to you about a really cool test that we ran on desktop because desktop is completely different from Mobile. You need a completely different user and web experience for someone visiting on a laptop or a desktop then do on a mobile device. We did a really cool test for the header of our website on desktop, specifically for awareness traffic for people who’ve never seen us before that increased our performance greatly that I’m about to show you. But first, let me show you. You can achieve these results on mobile if you don’t have a designer or a developer. Let me show you.

So, I built this tool called Zipify Pages that’s for Shopify stores and allows you to very easily drag and drop design pages and we just added this functionality for a header. We’re on the mobile layout. You can decide what icons you want to show like let’s say you want the shop icon. You can see it shows up, up there. But you see this functionality right here appears on scroll up. So, basically, if you select that and you click save and then you view the mobile version of the page and you begin to scroll down, as soon as you scroll back up, it appears. See that? It drops down for you on user intent and that functionality increases engagement with your header significantly. You either add to that having this store icon here on mobile as well, go to the mobile layout, and you enable the shop icon which will link to your store or link to wherever you want. You can set where it links to. It’s very, very powerful. And one final thing that we’ve landed on our mobile menu is we’ve made our fly out menu even easier to engage with. So, you’ll notice that we’ve added a big giant X here on the top right corner, we’ve made that text even bigger. And take a look at our value per visitor now. So, you can see here this is the last couple of months, October of 2018 through the day I’m shooting this video which is February of 2019. You can see that our conversion rate for mobile is up to 2.48%. Before it was sub 1%.

So, this isn’t the only change that we’ve made, but this header change was responsible for a huge part of that jump in conversion rate on mobile because mobile is where a lot of your traffic is coming from. You wanna convert as highly as you can and if someone’s uninterested in the page that they’re on, the header is where they’re gonna engage and if it’s not easy to engage with slash useful and functional, they’re gone. So, focus on your mobile header. All right. Now, I wanna quickly… I know this is a long video, I apologize. I’m excited about these conversion rate optimization best practices because it’s like, man, if you’re gonna spend money to buy advertising to your business, you might as well optimize your sales process so that when people are engaging with your pages because look, your business is simply a collection of pages that people engage with and either decide to do business with you or not. So, when people are engaging with your pages, you wanna make it as easy for them as possible to access the correct information to help them make a decision as to whether or not they wanna do business with you. And this test that I’m about to show you was for desktop only, traffics only, people visiting on desktop and laptop and for only awareness, only new people who are coming into the mix and seeing who we are and that we’re driving traffic to our… we drive traffic to article pages from the most part for new visitors. Let me show you this page. I’m gonna ask you if you can figure out what we did here. So, check this out.

So, this is the page that we drive a lot of traffic too. It’s a pre-sale engagement articles, an article that engages you in a conversation and then alludes to a solution, tells you about our products. And what you’ll notice is that as you’re scrolling, the header element is stuck. It’s called a sticky header. Right? Where those call to actions are available for you as you’re consuming the content on the page. And this is now really, really popular in e-commerce since we’ve been testing it for the last couple of years. And let me show you the actual split test results here. So, this is the heat map here for the test and what I wanna show you is actually the results. So, what you can see here is that average revenue per user was up from $1.47 to $1.67 at 93% confidence. And people who are joining our boom club because one of the things that you’ll see is we don’t just have a call to action for visit our store, check out our products. We have a call to action to enter our email list. Join our club, get on the email list. And the reason for that is we have two goals in e-commerce. Subscribe to us so we can communicate with you later. Best of kind of subscription that there is hands down is an email address subscription, not a Facebook like, not a YouTube subscriber, not an Instagram subscriber, email address or check out our products. That’s it. Those are two things that we’re trying to get you to do.

So, you can see both of those are in the sticky header. And when we look at the results here we can see that clicks to join the club were up by 20% and joins were up by 22%. And what you can see here from this chart is that a lot of times with split testing it goes up and down up and down up and down. Here, the sticky header won the whole time. It never lost this test as you can see from our test graph here and we’ve since tested the sticky header concept on our product offer pages, on our product sales pages, on our holiday sales page, on our email any page. We are now in love with sticky headers because they work so well because they keep that call to action stuck at the top of the page. Add that product to this cart, join our email list. And so we went ahead and built this functionality into our landing page builder for Shopify stores called Zipify Pages and so now no matter what element you have here, you can click the sticky button and then basically what that will do is that will stick that to the top of the page. So, doesn’t matter if you’re using this header element or maybe you’re going for the header element that has both calls to action in it and you’re in here and you’re putting your logo up here and maybe you’re changing out these links or maybe you want it so that you want the color to be a little different so it matches your brand and you want it that when someone scrolls over that link, it animates it, it highlights, you wanna set the destination to that to visit a particular product of yours or whatever, but you can set that to sticky and then when someone’s viewing it on desktop or tablet, it’s gonna be stuck to the top of the page. And obviously, on tablet you would probably make your tagline a little smaller.

But anyways, the sticky header element is a really, really powerful element for conversion. For you, for your business, it’s very likely that 20% of your traffic will be desktop and laptop or maybe even 15, but that 15% of traffic will be worth half your revenue because desktop and laptop is where people buy. People start their purchase decision, they see your ad, they see your video on their mobile phone on Instagram while they’re sitting on the John, or they’re using their phone and then they save it and you retarget them, they save it and they come back on desktop and laptop when they’re gonna buy or you retarget them and make that purchase on desktop and laptop. So, even though they’re a small percentage of your traffic, it’s worth a lot. So, you really wanna optimize it and one of the ways to do that since you have so much screen real estate is to stick those call to actions right at the top of the page. You can do this in my landing page builder called Zipify Pages at zipifypages.com if you’re on Shopify if not, use this, please. It’s gonna help you. My name is Ezra Firestone. Thanks for taking the time to watch these videos. I love this stuff and I really love engaging with a community of e-commerce, business owners, online entrepreneurs who are also into conversion rate optimization because I feel like if we’re gonna do the work to, build the business, to create great products, to drive traffic, we should do the work to create a sales experience that is the most easy to engage with for our prospects. It’s better for us, it’s better for them. So, thanks for watching. I’ll see in the next one. Bye.