Breaking Down the Homepage

First impressions go a long way, and your store’s homepage is no exception. This week on the podcast we're breaking down the homepage - the good, the bad, and the “please never do this on your website”.
 

sponsors.

Octane AI enables fast-growing D2C brands to increase revenue and collect data from the marketing channels your customers use.

Clocked in a time clock for Shopify.

With Clockedin your team members can easily clock in and out of their shifts from anywhere. You can manage your team's hours as they work remotely with an intuitive interface that can be used from desktop, tablet, or mobile. 

show notes.

• [01:30] "I'm 2020 good"
• [06:53] We have an attention span of ~2.7 seconds
• [07:48] Slideshows and why you shouldn't use them
• [08:31] If you're going to use a slideshow, this is how
• [09:01] Video heroes
• [14:06] Use relevant photography
• [15:40] Introductory text
• [20:36] Help guide customers to the products they want
• [22:15] When you should and shouldn't use "New Arrivals"
• [27:10] Hide your sold out products
• [29:17] How to properly use popups
• [32:28] Spin the wheel popups
• [34:04] Stop using sarcastic "no thanks" copy
• [38:28] Provide easy access to search
• [39:34] Use ALT text for all of your images
• [41:00] Compress your images
• [42:00] Test your site on mobile devices!
• [43:34] Store shoutouts

resources. 

• Baymard Institute
• Placeit.net
• Primal Kitchen
• Progressive Nutracare
• Healthy Roots Dolls
• Crush.pics
• ImageOptim
• Kraken
• Hotjar
• Bippy
• Magic Spoon

transcript.

 Rhian (00:00):
First impressions go a long way and your store's homepage is no exception. This week on the podcast, Kelly and I are breaking down the home page. The good, the bad and the please never do this on your website. Let's dig in.

Rhian (00:19):
Welcome to Commerce Tea, a podcast to help you succeed on Shopify. I'm Rhian.

Kelly (00:24):
And I'm Kelly. Grab a mug and join us as we talk about all things commerce.

Rhian (00:28):
Hey Kelly, how can merchants get more out of their Facebook Messenger and SMS marketing campaigns?

Kelly (00:44):
I recommend Octane AI, the leading Facebook Messenger and SMS platform for Shopify and Shopify Plus merchants.

Rhian (00:51):
How does it work?

Kelly (00:53):
Using their built in flows, conversational ads and retargeting campaigns, you can easily unlock Messenger and SMS as new revenue channels. The platform has ready to go integrations with top apps, such as Cleevio, Privy, ReCharge and Justuno.

Rhian (01:07):
What kinds of returns can I expect?

Kelly (01:09):
Merchants using Octane AI report 80 to 95% open rates, a seven X increase in click through rates, and even a seven to 20% increase in revenue.

Rhian (01:19):
This sounds great. Where can I learn more?

Kelly (01:21):
You can start a 14 day free trial by requesting a demo at octaneai.com or by visiting the Shopify app store and searching for Octane AI.

Rhian (01:30):
Hey Kelly.

Kelly (01:32):
Hello. Good morning. How are you this morning?

Rhian (01:34):
Good morning. I am phenomenal. How are you?

Kelly (01:37):
I am doing great. I learned a new phrase.

Rhian (01:41):
Okay.

Kelly (01:42):
And that is when somebody asks how you are, you respond with, "I'm 2020 good."

Rhian (01:51):
Oh, that's fair. That's fair. Yeah. I like that. I think we should use that more regularly, just in our lives.

Kelly (02:11):
Because there's a whole different kind of "I'm doing well," versus "This is 2020 and I'm doing well."

Rhian (02:17):
And here's the phrase. I love that. Whereas I'm just like, I learned that octopi have blue blood. Kelly's coming in with actual knowledge. I just have random knowledge that nobody cares about.

Kelly (02:33):
I think am going to. Like today, every single time somebody asks me how I'm doing, I'm just like, "I learned a new phrase today, and here's the phrase..."

Rhian (02:36):
I did learn that from trivia. I did. I know too many random facts now. They're in my brain. They live there.

Kelly (02:44):
I mean, that is really good knowledge. Did you learn that from trivia?

Rhian (02:48):
That is true. It makes me fun at parties when those happen again though, because people will be like, "blah, blah, blah, blah, blah" and I'll be like, "Oh, fun fact." And then I'll just have this random fact that emerges from my mouth.

Kelly (02:59):
I knew it.

Rhian (03:00):
I can't help myself. If I know a fun fact about a topic, I will tell you a fun fact.

Kelly (03:03):
That's okay, there are worse things to live in your brain.

Rhian (03:08):
Oh my gosh. Kelly and I play trivial pursuit by the way, for those of you who are like, what are you talking about? We play it via an audio app. And it's really fun.

Kelly (03:22):
I love it. We'll see how many [crosstalk 00:03:22].

Rhian (03:22):
But it's no holds barred and everyone just yells out the answer and I love it so much. Yeah. I love trivia. I also like Jackbox a lot. Have you been playing Jackbox? Yeah. Something. It's the one where you die.

Kelly (03:44):
It's a lot of fun. Yeah. I enjoy it. We played Murder Trivia Party. Is that the order? Trivia Murder Party? I can't remember the name of it. It's one of my favorites.

Rhian (04:00):
That's my favorite one. That's where I shine, is the Math Jackbox.

Kelly (04:02):
It's where you die. Yes. It's a fun one. Especially when I get questions wrong that everybody else gets right, and then I have to chop a finger off, or I have to answer really fast math questions, which I'm always really good at. I've always been really good at math. I know. I love that one.

Rhian (04:04):
I love that one. I play Jackbox once a week with all of my friends that I competed with at ASU, on the forensics team, and so it's like a bunch of speech and debate kids who are now adults playing. And there's one, I think in Jackbox Four or Five where you pitch, like Shark Tank style.

Kelly (04:21):
Exactly.

Rhian (04:21):
And so it's always the most absurd pitches. And Joke Boat is hilarious because a bunch of my peers have gone on to be actors and part time comedians and stuff like that.

Kelly (04:34):
Oh, that's fun.

Rhian (04:34):
So they're really good at it. I'm not good at jokes, but sometimes I win by luck of draw. Okay.

Kelly (04:58):
So I have a fun story about a time when Daniel and I went to a standup comedy show. So we were in Chicago and we like going to comedy shows just to check them out. Especially stand up, improv, that kind of stuff. So when we find one, we're like, "Oh, let's go." And it was like, I don't know, $10 for an hour, or maybe it was free. I don't remember honestly. So when we get there and we sit down and it starts, we then realize that the only people who are there are the people who are actually performing. I think we were the only ones who [crosstalk 00:05:26] and it was kind of awkward but also, I don't know, I guess we're very supportive of the arts.

Rhian (05:25):
Yeah. I mean, you're not going to perform to a sold out crowd out crowd every night, and I think, as an artist, heck, this even goes to merchants, right? You're not going to have a banger of a sales day every day, but on the days that you do, and when you get press, then you just capitalize off of it. So I think that's cross industry.

Kelly (05:44):
Exactly.

Rhian (05:45):
Whether you're a comedian or you sell toilet paper direct to consumer. Whatever it is, you've got to capitalize off of any PR that you get. Yes.

Kelly (06:10):
It's a good example. It's true.

Kelly (06:19):
So let's dig into today's topic, which is all about the homepage. So customers are either going to find you from your homepage, through a Facebook ad or whatever, or they're going to find you from a product page, but they'll likely at some point visit your homepage to see what you are about. So when we're talking first impressions come from your homepage. It's a thing.

Rhian (06:42):
Yeah. I want to know right away.

Kelly (06:44):
And Rhian and I do a lot [crosstalk 00:06:46] for Shopify stores, and we tend to spend up of our time changing up the home page because, and we're going to get into this [crosstalk 00:06:47] understand what you're selling [crosstalk 00:06:47].

Rhian (06:46):
It's not like those commercials from the early 2000s and 90s, where it was always cute to be mysterious [crosstalk 00:06:54], I don't know. No. No. Not online. People have an attention span of about 2.7 seconds. If you don't make it abundantly clear as to what you are selling in 2.7 seconds, they are going to leave forever. Yeah.

Kelly (07:23):
That's right. So we're going to start at the top of the homepage and I'm [crosstalk 00:07:28]

Rhian (07:27):
There's two things we're about to talk about that are hills we will die on. They're different things, but this is Kelly's hill. Kelly, tell me why you'll die on this hill.

Kelly (07:40):
[crosstalk 00:07:40] and the first on is a hill I will die on, which is talking about carousels. This one's my hill, you have your own hill. People don't look at the second and third and fourth and fifth slides on your carousels. They are a distraction. People just need to see one single image in your hero, in your header, on your homepage and carry on with their day. There's a lot of research on using carousels and how many people actually click through to the next thing.

Rhian (08:24):
Okay.

Kelly (08:24):
And I know Baymard Institute, they do a ton of user experience research on eCommerce stores, that's all they do. All kinds of fun stats on there. They talk about carousels, that if you're going to use them, they should auto rotate, but not too quickly because if the auto rotate too quickly, people can't read the copy on them. They can't click the link. It's a distraction. And when you see something, if you're scrolling [crosstalk 00:08:49].

Rhian (08:49):
No, die on the hill Kelly. If you want to. What is your stance? What's your official stance?

Kelly (08:53):
[crosstalk 00:08:53] slideshow, and suddenly the image changes, whatever you were reading, it doesn't matter anymore because your eyes went right back to the top of that page, where that slideshow is. Which is why [crosstalk 00:09:02].

Rhian (09:02):
So you say video. And I have mixed thoughts on video, and that's often because it makes your site super slow. Is that my perception? Is that old-school? [crosstalk 00:09:08]

Kelly (09:07):
Okay. Oh yes, well my stance is don't use carousels, use one hero, whether it's a static image or a video, but do not use slideshows.

Rhian (09:21):
When you're serving it on mobile. Yeah.

Kelly (09:32):
Oh no. It's absolutely real, because people tend to think that they need a 4K video on their homepage and it needs to be 60 seconds long. Yes. This is something that we see a lot because videos in a hero are popular. Keep the video short.

Rhian (09:51):
[crosstalk 00:09:51] Where should the button be?

Kelly (09:51):
People are not going to sit there and watch a video for 40 seconds. They're not going to do it. There should not be any sound on that video. You should have a button to allow people to stop that video, as well. To pause it. Because of accessibility.

Kelly (10:08):
So I've used it. When I've set up videos in the past on stores, I put a large pause button in the bottom right corner. You cannot miss it. It is visible, but it's not distracting from the video itself. I'm also a fan of doing videos only on desktop and doing static images on mobile. Again for low times.

Rhian (10:33):
Okay.

Kelly (10:35):
The faster your site is going to be the longer people are going to stay on to see what happens next.

Rhian (10:38):
Oh GIFs. I thought you were going to talk about something else. GIFs.

Kelly (10:41):
[crosstalk 00:10:41] browse your site. So, while they're cool, they definitely can slow down your site.

Rhian (10:45):
Oh, it is GIF. That's a fact.

Kelly (10:47):
While we're still talking on that topic of moving graphics, talking about GIFs.

Rhian (10:53):
Love in the time of quarantine.

Kelly (10:56):
Nope. I am talking about GIFs and I am all on team hard G. It is not JIF. Another hill I will die on. It is GIF, yes. My husband and I disagree on this statement. Yeah. It's really fun when we're talking about it, we're talking about GIFs in a conversation, and he'll be like, "blah, blah, blah, GIF" or "blah, blah, blah, JIF," or "JIF, blah, blah, blah, blah, blah." And I'm like, "Oh yeah. And also, that GIF..." And back and forth. I love it.

Kelly (11:23):
GIFs are slow. They are usually large file sizes. If you are going to want some kind of animation on your website, convert that GIF into an HTML5 video.

Kelly (11:46):
So most of the time. Yeah, you can definitely Google it. There are tons of video converters online. Most of the time, I see people who have recorded a video on their phone or professional video equipment, whatever it might be. And then they turn that video into a GIF. So, I would not turn it into a GIF. I would just export it as an MP4 video and use that to embed on your website instead.

Rhian (12:10):
Okay. That makes a lot of sense. I [crosstalk 00:12:12] recently someone made GIF of Kelly and I doing a masterclass and it is hilarious, because the chat is going so fast, neither Kelly nor I can catch it, so we just stare at each other.

Kelly (12:12):
[crosstalk 00:12:12]. The cool thing about videos is that you can set the setting in the code to automatically have it replay like a GIF does, but the file size is so much smaller, so your site is a little faster.

Rhian (12:24):
And I just look like that emoji that is gritting their teeth because they don't know what to do. Anyways, that's what a GIF- Oh! I was grimacing.

Kelly (12:45):
We just stare at each other and I'm just sitting there, kind of dancing a little bit as the-

Rhian (12:48):
Emoji grimace.

Kelly (12:56):
That emoji is called grimacing.

Rhian (12:58):
Okay. That's fair, that's fair.

Kelly (13:00):
Yes. I know because I use it all the time. That's right.

Kelly (13:08):
Okay. So we talked about heroes, we've talked about this hill. Let's move on, because I don't want to spend the entire episode talking about heroes. [crosstalk 00:13:17]

Rhian (13:16):
They do. Hold on! I just want to track back to this hill that you've died on. But here's why, what should be in a hero image? And this ties into what we're about to talk about too. What is your perfect hero image?

Kelly (13:28):
So one of the things we point out a lot [crosstalk 00:13:28], especially live, is brands tend to skip how [crosstalk 00:13:28] page. They're so focused on pushing products and pushing collections that they forget to introduce the brand.

Rhian (13:35):
If I am selling... I'm looking, I'm like "tie-dyed sweatsuits!"

Kelly (13:51):
What are you selling? Oh no, no. That's literally what I want to see in the picture. I want to see that tie-dyed sweatsuit. I want to see somebody wearing that tie-dyed sweatsuit. Basically, your hero imagery should be relevant. It shouldn't just be some random stock photo that you happened to see on the internet that looked kind of cool. Before you start scrolling down on that website, you should be able to understand what that brand is about and what they're selling.

Rhian (14:26):
So right now, when you're shooting for your brand, and let's say you're a lifestyle brand, does that need to be a complex image with models laying everywhere, looking fancy? Or can it be more simple than that?

Kelly (14:38):
It could absolutely be more simple than that. And the imagery that you use on your site, it follows along with your whole brand voice. We usually tend to think of your brand voice as the copy that you're using on the site, but the imagery definitely plays a role in there. So I have a merch store that everything is print on demand, and I recently discovered a website that's called Place It, place it.net, and we'll link to it in the show notes, that basically lets you generate lifestyle shots using the designs that you're creating for prints on demand items. So it's not just the same stock photos that everyone is using. It's a pretty cheap monthly membership to generate all the photos you could possibly want. And I'm really enjoying it. And I think this is a really good example of like... The different styles that they have on there, you can use whatever works best for your brand voice.

Rhian (15:30):
I like that idea. That's really neat. So it's called Place It.

Kelly (15:34):
Place It. Yeah.

Rhian (15:35):
Okay. Okay. So let's touch back on that introductory text, because I derailed us to the hill that you died on.

Kelly (15:44):
Yes.

Rhian (15:45):
So where should the introductory text go? What should it say? Why does nobody put it there?

Kelly (15:53):
Nobody puts it there because, once again, they're so focused on getting customers to the products, because at the end of the day you want more sales.

Rhian (16:01):
Correct. Right.

Kelly (16:01):
I get it, but if somebody is brand new to visiting your website, they've never heard of you before, they happen to come across you on Google, just based on some kind of search, they should learn who you are without having to visit an about us page. A quick few sentences is really all you need. Who are you? What are you selling? What do you stand for?

Rhian (16:21):
Would you put that under the hero?

Kelly (16:23):
I would put it under the hero.

Rhian (16:24):
That's where I would put it.

Kelly (16:26):
Just an introductory header and then a paragraph or two.

Rhian (16:29):
Would you ever put the text on top of the hero?

Kelly (16:34):
I see plenty of people do that.

Rhian (16:35):
Okay.

Kelly (16:36):
And it's fine to do that, as long as the contrast is good enough so you can actually see that text. Otherwise you're going to run into accessibility issues. And if you're keeping it short and sweet.

Rhian (16:47):
Okay.

Kelly (16:48):
If it's just a one liner to describe what it is that you're selling. Yeah. That's totally fine.

Rhian (16:54):
Okay. That makes absolute sense. This is something we don't see enough and, also for introductory text, it's besides saying what it is to set the expectation for your clients and the buyers, you also need to give that text so Google can know what you are selling on your website. And so that's really crucial for SEO as well. It's a must have.

Kelly (17:21):
Exactly. So just an example of a site, and I know we've used this as an example in past episodes before, but Primal Kitchen.

Rhian (17:30):
Yes.

Kelly (17:31):
They have an automatic scrolling slide show that has like 10 slides. And I have lots of opinions on that, so I'm just going to casually scroll past it.

Rhian (17:38):
We're going to pretend like that's not there.

Kelly (17:42):
So they decided, after they have a newsletter sign up, which clearly they're pushing the newsletter sign up upfront. That's totally fine if you want to do that before you jump into the introductory text. The difference between Primal Kitchen and a smaller brand is that they're more established at this point, based on the number of reviews that they have each product, but they're introducing collections immediately, but there's header text that introduces the brand. And that is "uncompromisingly delicious and made with real ingredients."

Rhian (18:11):
Okay.

Kelly (18:12):
So it's good food made with real ingredients. That's like, "Oh, okay. That's what I'm looking for."

Rhian (18:18):
That concise as a positioning statement. We know what they're doing. It's their competitive advantage, kind of rolled into one. There's definitely some SEO potential there. That hits all the marks.

Kelly (18:31):
Exactly.

Rhian (18:31):
I mean, they obviously hire someone too. This is not a small brand. They have a copywriter on staff.

Kelly (18:36):
Yes. Yeah, that's just a good example of how someone might do the introductory text. Another good example is Healthy Roots Dolls, which we had Yelitsa on our podcast early on. She starts off, "Zoe offers real hair play. Zoe is a young girl, here to help other girls learn to love their curls, just like her." And she has another paragraph after that, just to a couple sentences, but you immediately know what she's selling. It's this doll named Zoe.

Rhian (19:06):
Yeah, absolutely. Boom. Right there. And everyone should check out Zoe.

Kelly (19:12):
Absolutely. And just that episode in general.

Rhian (19:15):
Oh yeah, absolutely. Yelitsa is phenomenal and a force.

Kelly (19:20):
Yes she is.

Rhian (19:22):
She's a badass. For lack of a better term.

Rhian (19:29):
Okay. So we've gone over the heroes. Over the introductory text. How do we do then get customers to find the products that they want?

Kelly (19:42):
So this is where you're going to actually start talking about the products. So I gave the example of Primal Kitchen introducing collections. So there are different things that you need to think of, in terms of how your customers are shopping on your site here. So, for example, you can do, like Primal Kitchen, the popular collection. So here are the sauces. Here are the, I don't know if you're selling... Okay, they have a keto collection, a whole 30 collection, collagen peptides. Things like that. If you're selling apparel, you might do dresses, but you might also do it by theme, where you'd be like summertime or back to school, which we're not going to touch on that one. At least a six foot pole, because we are a social distancing.

Kelly (20:38):
Basically the point is that you're wanting to guide your customers to find the products that they want. An example of this, again, could be a health store. So let's say, [inaudible 00:20:48] one of my clients, for example, is called Progressive Nutracare. I'm pulling up their website right now, so I can use it as an example. So they do the same thing. Again, they have a hero or they have a slide show which, whatever, scrolling past it. They have the introductory text, "Progressive Nutracare specializes in professional grade Nutraceuticals offering a wide arrangement of science backed formulas to support your healthy lifestyle." And then they kind of give some example of some of the products that they have. So pointing out that it's high quality, it's good for your health, blah, blah, blah. Then they jump right into two of their most bestselling products, being the foundation gut enhancement and probiotic 100. So you can immediately start shopping based on popular product here.

Kelly (21:34):
What I was going to point out on their website is actually in their navigation, which is shopping by health concern. So if you want to buy certain products that's good for gut health or joint inflammation or for weight loss, or for skincare. You can guide your customers to the products that they're looking for based on a specific topic, essentially.

Rhian (21:58):
I like that.

Kelly (21:59):
As opposed to just shirts, or jars of pasta sauce cause Kelly wants to make all the spaghetti. Normal things.

Rhian (22:10):
Spaghetti. A Kelly story.

Kelly (22:15):
So on the same topic, this is a question that comes up a lot with conversations that I have with clients is, what about new arrivals?

Rhian (22:24):
Yeah.

Kelly (22:25):
Quite often, you see stores kind of push up at the very beginning, here are the new arrivals to our store. If you are constantly releasing new products, great, go ahead. If that's how your customers are shopping, it's limited run, everyone wants to buy what's new to the store.

Rhian (22:46):
Like a clothing boutique?

Kelly (22:47):
Boutiques are really good example of a store that would use this. Yes. If you're not changing out your product line very often, don't include new arrivals.

Rhian (22:57):
Yeah.

Kelly (22:57):
There's no point. That's not how your customers are shopping.

Rhian (23:01):
No. Nor did they care.

Kelly (23:02):
Exactly. So use that screen space and replace it with featured products or featured collections instead.

Rhian (23:08):
Would you do a best sellers there?

Kelly (23:11):
That's a good example of how Progressive Nutracare does it. They put right front and center, their two bestselling products. So yeah, that was something that you could do.

Rhian (23:21):
See I like that.

Kelly (23:21):
Another thing to point out when you're creating these, I see them a lot in slideshows or just stacked product lists, like in a grid, don't overdo it. Four to six products tops. Because, if people want to go shop for a specific collection, they're going to go to the collection page. No point in making people scroll past 12, 16 products when they're going to see the same thing on the collection. Instead, feature some of the top sellers in that collection and then a link to that collection so they can see the rest of them.

Rhian (23:50):
I think it's important to remember, because we often develop, or not often, we always develop on our desktop. So we don't always think about the mobile ramifications of having like 12 products. And, in reality, what does it take? An inch or two, each? Square? Something like that on your phone? I've got an iPhone 11 Pro and that's maybe three products per scroll.

Kelly (24:20):
Exactly.

Rhian (24:21):
You don't want people to be scrolling forever. In perpetuity.

Kelly (24:24):
Yeah.

Rhian (24:24):
It just doesn't work. They'll stop.

Kelly (24:27):
And also consider, and we can go do a whole thing on mobile devices because there's a lot that goes into every single page on a website when shopping on mobile, but, by default, I see a lot of themes default to having one, instead of doing like a two column grid, they default to products full width on the mobile device, stacked on top of each other. So you can kind of tighten up that content a little bit by doing side-by-side products, instead of just a long list.

Rhian (24:57):
So I have a question about your home page, and this is controversial. Hamburger menu, on desktop and on mobile. What do we think about a hamburger? And for those of you who are like, "What is a hamburger menu?" I'm so glad you asked. It's the three lines that you see, so it kind of loosely resembles a hamburger.

Kelly (25:17):
It looks like a hamburger.

Rhian (25:17):
Yeah.

Kelly (25:18):
Exactly. I see some themes default to using it. My issue with using those, is that it takes more clicks for the customer to get to your products, because they have to open the menu before they can even see what collections you're offering, for example. I say that, when we're rebuilding our [inaudible 00:25:39] site and we're actually defaulting to a hamburger menu for desktop as well.

Rhian (25:44):
Okay. Yeah.

Kelly (25:44):
So I mean, there are situations where it makes sense to use it.

Rhian (25:48):
Yeah. I mean, Commerce Tea is defaulted to a hamburger as well.

Kelly (25:50):
Exactly.

Rhian (25:51):
Yeah.

Kelly (25:52):
But for eCommerce websites, your goal is to get your customers down the purchase path. So minimize the number of clicks they have to take to actually get to your products.

Rhian (26:02):
100%. To me, the goal when you were selling online is get them in, get them stoked, check them about, as fast as you possibly can.

Kelly (26:11):
Exactly.

Rhian (26:11):
You don't want them pontificating on that purchase. You want them to be buying and you want to remove any possible roadblock that is in their way, that gets in between them giving you money and them bouncing out of your cart, or before the cart.

Kelly (26:27):
Exactly.

Rhian (26:28):
Which I've done a lot recently, where the nav experience on mobile has been so bad on the homepage that I've just given up. And that's after I get served ads on Instagram.

Kelly (26:39):
Yeah.

Rhian (26:40):
So that's just something to be aware of is, if you're buying ads, but you're sending the ad to a homepage that is not great, maybe redo the homepage before you sink more hundreds or thousands of dollars into your ads.

Kelly (26:53):
Optimize your store. Exactly.

Rhian (26:55):
Optimize your store. Yes.

Kelly (26:57):
So before we move on to a totally different section on the homepage, I do want to touch on one more thing. So, quite often you will grab, let's say a featured bestseller collection, or a collection of dresses, or whatever you want to feature on, but you're not filtering out your sold out products. You shouldn't be featuring products that are sold out on your home page. And I've actually seen websites that, all of the products that are featured on their homepage are sold out.

Rhian (27:27):
Yeah. Many websites.

Kelly (27:27):
And my immediate thought is like, "Oh, they don't have anything in stock. So I'm just going to leave."

Rhian (27:32):
Yeah. 100%.

Kelly (27:33):
So that is something that you can check in the... when you're creating a collection, if it's an automatic collection on Shopify, to make sure the inventory count is greater than zero. Just set that rule so you can filter those out.

Rhian (27:51):
Explain that to me like I'm five.

Kelly (27:54):
So Shopify has two different types of collections. They have manual collections and they have automatic collections. Manual collections are you're manually adding each of the products to that collection. Automatic means that you can set certain rules, as far as what is going to show up in that collection or what is not going to show up. So for example, if you wanted to create a sale collection, you would say 'compare at prices greater than zero', because the compare at price means that that was the original price. And the price that's actually set to the product is lower than the compare at price. Another example, if you're creating collections specifically for dresses, you're going to do 'product type equals dress' or 'product tags contains dresses'. So you're able to narrow down specifically what that collection is going to contain. One of those rules that you can set is checking for the inventory levels. So you can say inventory count is greater than zero, and that means that product is not sold out. And, as soon as an item gets sold out, it is automatically removed from that collection. Once it goes back in stock, it's automatically added back into the collection.

Rhian (29:01):
Is that a Shopify core feature or a Plus feature?

Kelly (29:06):
Yes. It is on every single Shopify plan.

Rhian (29:07):
Okay so it's a core, for everybody.

Kelly (29:07):
Yeah.

Rhian (29:07):
Awesome. Awesome. That's something I think more people should probably take advantage of.

Kelly (29:12):
I completely agree.

Rhian (29:13):
So I'm glad that you just explained that the way that you did.

Kelly (29:17):
All right. So let's go into one of my favorite topics, because it is a hill that you are going to die on.

Rhian (29:25):
It is a hill that I will die on.

Kelly (29:26):
That sounds very negative.

Rhian (29:29):
Look. Okay. Here's the deal. I really don't like pop-ups. I have friends who run pop-up companies. I love them. I don't like pop-ups in our industry. In the SEO industry we call them interstitials, because they literally interrupt you. And Google says that, unless that interstitial serve some sort of a purpose, like a GDPR purpose or an age gate purpose, it shouldn't cover wall to wall on mobile. And they rolled it out for a mobile first. They were like, "Hey, no interstitials on mobile." They rolled that out, I don't know, three years ago? Maybe four? A while ago.

Kelly (30:12):
A while ago. Yeah.

Rhian (30:13):
And one thing about Google is if they announce it for mobile, it's coming on desktop. And it did come on desktop as well. And so you can get penalized if you have a pop-up that comes up too fast. Now I'm not saying all pop-ups are bad. I am saying most pop-ups are annoying. But it is important to also think, and Kelly and I joke about this a lot, imagine walking into a Nordstrom and before you walk in, you're in the perfume division, right? So we've all been, or most of us have been to a mall, a traditional mall. So you walk into a Nordstrom or Macy's or what have you. And you're in the perfume area. And then someone is physically blocking you, with a 10 foot poster board that says stop and give me your email or you can't go any farther. In real life, are you walking back out of that store? I would.

Kelly (31:08):
Probably.

Rhian (31:09):
I'd be like, what is happening? So that's what I think is always so jarring to me about the pop-up experience. Outside of the SEO ramifications. I think we're trying to get to a point where shopping online is as intuitive as shopping offline, but then we do things that you would never do in a brick and mortar establishment, like collect emails before you know what's going on.

Kelly (31:33):
Yeah.

Rhian (31:34):
I'm not giving you my email then.

Kelly (31:35):
I don't know you.

Rhian (31:36):
And I'm also getting irritated. I don't know you and also Google can't crawl your store. So there's multiple thoughts on it. I understand it's a great way to capture emails, but also do you want a bunch of trash emails? Sometimes, especially like spin the wheel apps, you can gather a bunch of bot emails and not real emails. And then all of a sudden-

Kelly (32:02):
And even if they are real emails though, you have a lot of people who are specifically looking for a sale.

Rhian (32:07):
For a discount.

Kelly (32:07):
They're only around for a discount. Exactly.

Rhian (32:10):
And is that what you want?

Kelly (32:11):
I have lots of opinions on spin the wheel apps and I hate them all.

Rhian (32:15):
Okay. So talk to me about spin the wheel apps.

Kelly (32:19):
First of all, they're gaudy.

Rhian (32:22):
They're awful.

Kelly (32:22):
They just look terrible on the website. Second, I know they work, and I hate that they work honestly, but I know they're a really good way to collect a lot of emails, because basically what you do is you enter in your email and then you see the wheel spin, and it's going to give you a discount code based on whatever the wheel lands on. Or it's going to be like, "Oh, you can get up to a 50% discount" and it's going to give you a 5% discount code, because it's like gambling.

Rhian (32:49):
Yeah.

Kelly (32:51):
The problem is, as we just discussed, is you are getting a lot of people sign up for your newsletter, but there are a lot people who are specifically looking for a deal.They don't really have much interest in your brand. And most of the time they're showing up way too quickly.

Rhian (33:06):
I think it's important to say, and we'll have on an email marketing specialist later on, but not all emails are worth the same. Having a giant email list of junk emails doesn't matter, it just means you're spending more on Klaviyo.

Kelly (33:23):
Exactly.

Rhian (33:26):
It's more important to have... I would rather have a thousand high quality leads than have 10,000 junk emails, any day of the week. For so many reasons. And I feel like we get caught in that, "Oh, more and more and more. More is good, more is good, more is good. Well no, more is not always good.Another thing that grinds my gears when it comes to pop-ups is, you know the popups that, they're huge first of all, and they're like, "Hey, do you want 10%?" and then the next button is "No, thanks. I love to waste money" or something really glib?

Kelly (34:09):
I hate that sarcastic "no thanks." It infuriates me.

Rhian (34:18):
Yeah. It's old fashioned growth marketing, that I don't actually know if it works anymore.

Kelly (34:24):
Exactly.

Rhian (34:24):
That was like very growth marketing when I got into eCommerce five, six years ago. Well, it's been a while. Seven years ago.

Kelly (34:29):
Yeah. I was super popular. And the sad thing is, people still think it's worth doing. They think they're being funny.

Rhian (34:36):
It's not funny?

Kelly (34:37):
Look, we're a humorous brand. "No thanks. I'm not cool." "No thanks, I don't like saving money." "No thanks, I don't want your $10 off." "No thanks. I like killing kittens." Stop it!

Rhian (34:50):
And you're automatically discounting too. It's always, "Get 10% off" or "Get 20% off." It's like, "Okay. So you're a discount brand."

Kelly (34:57):
Yeah, exactly.

Rhian (34:58):
I mean, we can do a whole other pod on discounting and when you should and should not do it.

Kelly (35:06):
We absolutely should do that. Yes.

Rhian (35:08):
We absolutely should do that because that is something [crosstalk 00:35:10].

Kelly (35:09):
I get it. There are a lot of people who do offer 10% off your first order, and that's fine. But you can't be teaching your customers that they can always expect to have another discount code that they can use. Otherwise, that's exactly right, you're going to be a discount brand. One way that I've seen some brands do this is actually, I know Pura Vida does this on their checkout, Pura Vida bracelets, they have a check box that allows you to sign up for SMS marketing and you'll save $10 or 10% on your next order.

Rhian (35:43):
Oh. I don't hate that.

Kelly (35:46):
Yeah. Exactly.

Rhian (35:47):
Okay.

Kelly (35:47):
So you can sign up for marketing via SMS and again, that's another topic we're going to dig into pretty deep here. Not on this episode, but on another one, in the future. But that's a good way to get them in the door. They're already on checkout and now they going to be like, "Oh. Well, I'm going to save some money on my next order."

Rhian (36:04):
Yeah. I think that makes a lot of sense. One thing I will say, caveat on pop-ups, there's a few work arounds on it, if you're married to them. One is, you can have a top bar, a [inaudible 00:36:17] top bar, [inaudible 00:36:18] bottom bar. It can also slide in from the side. That's okay. And if you really insist on having a pop-up, please wait like 10 or 20 seconds for the pop-up to come. I also, Kelly, I know you have some thoughts on exit intent pop-ups. What are your thoughts there?

Kelly (36:34):
Yeah. They work. Honestly, they do work.

Rhian (36:37):
Yeah.

Kelly (36:37):
Basically, an exit intent pop-up is one that shows up as soon as the browser sees that you've moved your cursor off of the screen. Let's say you've moved it back to the address bar on your browser or onto a different window or something like that. Then you'll see the pop-up be like, "Hey, wait! Don't go! Take 10% off your order if you sign up for our emails" or whatever it might be. That's a good way to still push your marketing list and get people to go ahead and convert, without being so upfront, in your face. "Sign up for our marketing list!" as you mentioned. It kind of pushes it to the end of the... you're about to lose them, basically.

Rhian (37:18):
Right. That, and by the time you're doing an exit intent pop-up, you have definitely already crawled, or Google has already crawled through your store.

Kelly (37:26):
Exactly.

Rhian (37:27):
So I'm fine with those. I just, while I say I will die on this hill, no matter when I say it, I get a lot of feedback from email marketers who are like, "Rhian, you're wrong." And I'm like, look, I mean I'm speaking from a Google perspective, and whenever Google writes an article in their blog and has a stance, believe me when I say they enforce it.

Kelly (37:52):
Yeah.

Rhian (37:53):
And the caveat is, and it's not fair, and I acknowledge that it's not fair, it doesn't really apply to big brands.

Kelly (38:02):
Yeah.

Rhian (38:03):
And it is what it is, type of situation. I don't know why that rule is not equally enforced, but it is not equally enforced.

Kelly (38:14):
They probably have just built up such domain authority that [crosstalk 00:38:17] it'll brush to the top. Yeah. Okay. So, moving on. I think we'll go kind of rapid fire here, for these last suggestions here. First of all, if you have a lot of products on your store, you need to be providing easy access to that search. And I'm not talking about just shoving it into a menu or having an icon, a toggle search, or take you to the search page. Make that search bar visible. Make it easy to see. This is going to usually appear on your header. I know we're talking about the homepage, but I really wanted to on search, because there are three primary ways that people are going to find your products. It's going to be, they're just going to browse your site, they've landed on a specific product page that they want to shop on, or they're going to be using that search bar to search for a specific product.

Rhian (39:09):
Is there an app you recommend? Is there a theme you recommend that is best set up for search? On page search?

Kelly (39:16):
I know Turbo from Out of the Sandbox offers a large search bar. There are other themes in the theme store that do it as well. I believe Flex from Out of the Sandbox does too. I spend most of my time using Out of the Sandbox themes.

Rhian (39:28):
Yeah.

Kelly (39:28):
So that's kind of what's glued in my head at this point.

Rhian (39:32):
Okay. Another important thing to talk about, and we'll just talk about it briefly, is making sure that your homepage is accessible. Like, all your images have alt text behind them. So, when you're writing your alt text and, who said this originally? Ilana Davis, right?

Kelly (39:51):
Ilana Davis. I want to have her on the podcast because she's a genius when it comes to accessibility.

Rhian (39:56):
She's incredible. So I'm going to quote her and that is, when you're writing alt text, write it, I'm going to poorly quote her, write it as if you're explaining the product or the picture to someone who cannot see it and you're talking over the phone. And when you do that, you find yourself really describing it. I need more than just jumpsuit. That is not a description of a product.

Kelly (40:23):
It's like my phone case. Like, "Oh, what kind of phone case do you have on your phone?" "It's a case."

Rhian (40:29):
Yeah. That. Exactly, that. But so many people fall into that trap on alt text and I just want to highlight the fact that you need alt text on your homepage. You need it on every page. It is an accessibility issue, but it's also a Google search issue. And just ensure that you have alt text. Sometimes you have to go in and, I think, change it at the theme level, but you can change it and you can add it in.

Kelly (40:52):
And you should. Absolutely. Yeah.

Rhian (40:54):
Yes.

Kelly (40:54):
Another topic, on the same thing, this isn't on accessibility, this is just on conversion rate optimization, is compress your images. Make sure you're displaying the right size image in the right space and make sure you really use some kind of app to compress that file size. So, I know the Crush.pics app on Shopify is a good one for compressing the images once they're uploaded to your store. I like using an app on my Mac called ImageOptim, and that you can just right click on the image and go to services and you can optimize it there. And it's automatically going to drastically cut down on the file size. I did that before I upload the images to Shopify, just because I feel like that that's significantly easier and it's also free.

Rhian (41:42):
Yes. My favorite one to use is Kraken, like release the Bracken, and they've got a free web interface as well. So I love a free tool and they have a free tool. We'll link to all of those in the show notes.

Kelly (41:59):
For sure.

Rhian (42:00):
And the last thing that we wish to impart today is, remember your customers are most likely shopping on their mobile devices. When you're developing, when you're testing... I love giving, and obviously this is going to be a little different right now, but I love giving my mom one of my apps or a store, when I used to build stores, that I've built and watch her navigate it. And anytime I had to say, "Wait, that's not how it's supposed to be done" That doesn't mean she's using it wrong. That means it's not intuitive enough for use for everybody. And I think having that kind of gut check... But you've got to go into that with no ego. You've got to be ready to just be like, "Oh yes, you're correct. That should be clickable."

Kelly (42:50):
Yeah. It can be frustrating to see people interact with your site and not do a good job of it, but it is something that I highly recommend doing. Another tool that you can use is called Hotjar. It's used for heat mapping, but they have a feature on their website that allows you to basically record the customer journey from homepage to check out and see exactly how they're interacting with your store, whether they're using a laptop, they're on their computer, or they're on their mobile device. So you can see how they're scrolling. You can see what they're tapping on. Really good way to see if people are interacting with your store the way you think that they should be.

Rhian (43:28):
Oh, I like Hotjar a lot. 10 of 10 recommend.

Kelly (43:32):
All right. So what do you say we go into our store shout-outs now?

Rhian (43:38):
I'm so excited for store shout outs today.

Kelly (43:41):
Why are you so excited? What is your store shout-out?

Rhian (43:44):
My store shout-out is Bippy and the tagline is "Earth friendly butt stuff." And then there's a peach emoji next to it, which I think is hilarious. Their assets are really beautiful. The site is performant. I understand what they're selling. And I ordered some recently, cause I got paranoid I wasn't going to be able to get toilet paper and their copy is cute. There's a cloud emoji because it's like wiping with a cloud. It's made from bamboo, not from regular trees, and it's a sustainable product. And I'm into their branding. It's a direct to consumer brand. Everyone check it out. Super pumped on it. What's your store of the week?

Kelly (44:30):
So, also speaking of direct to consumer brands. Mine is called Magic Spoon. I love this website. I don't do keto or anything, but they're known basically for doing keto-friendly, low carb cereal, for adults. And everything that we were talking about as far as what's good on a homepage, they have "Healthy cereal that tastes too good to be true" for example.

Rhian (44:56):
And it hits you with that, right out the gate. You know exactly what it is.

Kelly (45:00):
Exactly. I was just checking to see if their hero, was it a GIF or if it was a video, but that's going to take too much time for me to take it in. [crosstalk 00:45:09].

Rhian (45:10):
Okay. So after we're like, "Don't have GIFs", this might just be JavaScript but, I love the little Cheerio things like floating all over the page.

Kelly (45:20):
It's just JavaScript. Yeah.

Rhian (45:20):
It's hilarious.

Kelly (45:22):
Yeah. I think it's super cute. They have a social proof right up front, with quotes from Fast Company, Forbes and Delish, where they've been featured. They have really quick top facts about it, "High protein. Low carb. Sweet and delicious." They have all four of their products that are featured on there, with cute little micro interactions, which I absolutely love. They have reviews from specific people, of how they feel about it. A link to their story, so you can learn more about why they're created. And then there's no annoying, I don't think there was an pop-up at least.

Rhian (45:53):
There was an annoying pop-up, yeah. There was. On home.

Kelly (45:56):
Oh, okay. I guess I just viewed the site too many times.

Rhian (45:58):
Yeah. It served at about five or six seconds, I think.

Kelly (46:03):
Okay. Cool.

Rhian (46:04):
See these are the things that I look at, y'all. I'm in my brain like, "One, two, three, four..."

Kelly (46:13):
Normal things to do.

Rhian (46:14):
Normal things. Yeah. So if you're wondering if Kelly and I can actually enjoy shopping online, the answer is, sort of.

Kelly (46:23):
Yeah. I analyze every single website I'm on, but it is what it is.

Rhian (46:28):
Yes. I love also, on the top of Magic Spoon, the "Try magic spoon today. 6,000 5-star reviews and 100% happiness guarantee." They throw that right up front.

Kelly (46:39):
Agreed.

Rhian (46:40):
Now I want to buy this too, by the way. I probably will.

Kelly (46:42):
You probably will.

Rhian (46:43):
I probably will. This is my problem.

Kelly (46:46):
So let's go ahead and wrap this up. So thank you so much for tuning in and thanks again for our sponsors for sponsoring this episode. We started a Facebook community. You can find us at Commerce Tea community. So please join in. Talk. Ask whatever questions you have. We could use the community to really guide the content that we're going to be talking about on this podcast. You can subscribe to Commerce Tea on your favorite podcasting service. We post new episodes every Tuesday, so grab your mug and join us then. We'll see you next week.

Rhian (47:15):
Goodbye.

Kelly (47:19):
Thanks for tuning in. And thanks again to our sponsors for supporting this episode. You can subscribe to Commerce Tea on your favorite podcasting service. We post new episodes every Tuesday, so grab your mug and join us. See you next week.

Rhian (47:39):
Clocked In is a time clock for Shopify. With Clocked In, your team members can easily clock in and out of their shifts from anywhere. You can manage your team's hours as they work remotely, with an intuitive interface that can be used from desktop, tablet or mobile. Check it out at clockedin.io or in the Shopify app store.