Claus Lauter [00:00:00]:
Welcome to episode 291 of the Ecommerce Coffee Break podcast. In this episode, we share five styling tips to get better conversions from your Shopify store. Joining me on the show is Brandon Landgraff. He is a designer, app developer and Shopify expert. So let's dive right into it.
Voice over [00:00:17]:
This is the ecommerce Coffee Break.
Voice over [00:00:22]:
A.
Voice over [00:00:22]:
Top rated Shopify growth pod cast dedicated to Shopify merchants and business owners looking to grow their online stores. Learn how to survive in the fast changing e commerce world with your host, Claus Lauter, and get marketing advice you can't find on Google. Welcome.
Claus Lauter [00:00:42]:
Welcome to the show and welcome to another episode of e commerce Coffee Break podcast. Today we want to talk about conversion. We want to talk about themes. We want to dive in a little bit deeper in the world of Shopify theme customization without being a web developer. So we want to talk about styling tips to get better conversions. And I have an expert with me, obviously, on that matter, Brandon Landgraff. He is a Shopify expert who has exclusively worked in the Shopify ecosystem for the last few years, both freelancing and foreign agency. He's a designer at heart, but also a talented developer.
Claus Lauter [00:01:13]:
Brandon has built a app which is called Flexiblocks app, and we will dive into that, what it can do and how it can help you in getting better with your store. So let's welcome Brandon to the pod. Hi Brandon, how are you today?
Brandon Landgraff [00:01:26]:
I'm doing excellent. Thanks so much for the wonderful intro. I wanted to talk about five conversion tips.
Claus Lauter [00:01:33]:
Yeah, that sounds great. I think conversion is in everyone's mind. There's many, many ways to do so. And obviously, if you start reading up on how can I get better conversions, you will be overwhelmed. And we want to really do some real life tips on how to make your website better and how to really do it on your own without hiring an agency. And let's dive right into it. Conversion. Just tell me the general problems that you see with themes on conversions.
Brandon Landgraff [00:02:00]:
Yeah, definitely. So just to give you a little bit of context, I've watched tons of different user sessions, user recordings, I've looked at tons of different heat maps, and not only necessarily for larger shopify companies, but also for smaller brands as well. And it's amazing how much value people are leaving on the table. And so what I've tried to do for today's podcast is to distill some really actionable tips that mostly anyone can do. And I'll just sum it up to five tips here today. So starting off with the first tip, again, really easy when you first install a shopify theme, let's say dawn, it seems to be the most popular pick as it's free in the theme store. When you load it up, most of the buttons are all black on the theme, which is great. It's a nice, clean aesthetic.
Brandon Landgraff [00:02:54]:
But when you land on your product page, what you actually want to do, and it's a very subtle technique, is you want to change that black add to cart button to something that's brighter to catch the user's eye. It should be the most recognizable element on the page, completely separate from anything else. Also, a bonus tip with it would be to add that same color that you apply to your add to cart button, to your whole purchase path, to your whole journey, starting from the home page, to the secondary page, to your product page, and then your final cart page. That checkout button should also be the same color. And I'll also give another pro tip for you here too. If you go to Apple's website, since everyone loves Apple, you'll notice that on their product page, their primary color, the color that stands out the most is that blue. And they picked blue for a reason. It's a symbol of trust when we're thinking about color psychology.
Brandon Landgraff [00:03:51]:
So that's my first tip here today. What do you think about this, Klaus?
Claus Lauter [00:03:55]:
I think it's awesome, and I 100% agree with you. Having a color that picks out and that basically takes or guides the user through the flow, basically what you want them to do is an awesome tip. And sometimes you have designers who really love their colors. And then I gave a good example that they just blend in and then it's really difficult to find. And as I said, heat maps help with finding where people are clicking. And if they're not clicking straight to where you want them to click, then you need to work to do. And the color of the button definitely makes sense to look at.
Brandon Landgraff [00:04:27]:
Exactly. Couldn't agree more. Now, thinking about the second tip here, thinking about space and proximity and drawing the eye to different elements on the page. I know it's been said tons before on different podcasts, but just thinking about white space in clean text and what I mean by this is not necessarily having a ton of space around your text, but making sure that your text is concise. What we have found with the best converting stores is that their text is no longer than a tweet. It's about 140 characters. Because on average, people are spending around like ten to not even more than 15 seconds per page. And so imagine you land on a page and you have ten to 15 seconds.
Brandon Landgraff [00:05:12]:
Picture what you're reading. Most of the time it is just headlines. And if you want a little bit more information, usually you'll start to read that description, but you won't read it if it's some massive piece of text. So I just wanted to emphasize that if you're looking at your site, a good actionable tip is to go through your main pages. So your home page, your collection page, and your product page, and focus on converting all your text to 140 characters or less. And I guarantee you'll see some better conversion rates because of it.
Claus Lauter [00:05:44]:
No, I agree. I think that's a tough one for a lot of people, and that includes me. Because obviously your immersions, you want to communicate as much as possible about your product, about the benefits, the advantages, why you should buy the product, and so on and so forth. And then you just put everything in front of them. A wall of text, basically, but breaking it down really, like on a tweet sized format. That's a difficult one, but I think it's a really important tip that you gave there.
Brandon Landgraff [00:06:09]:
It certainly is a difficult one, and it leads me into my next point here wonderfully, which is, it's so tempting to put down all the information that you possibly have about your product or your landing page. But when we look at heat maps, we notice that on average, 85% of users don't tend to go below the fold. They tend to just click onto the next page or the next thing. And so a lot of the information that you do put on your page doesn't necessarily even get read. Well. I don't want to just outline a problem. I want to give you guys a solid solution here. And what we have found, what works is figuring out different creative outlets to add the information to expandable, and accordions to pop ups, to tabs, to things like that to bring the information higher up on the page.
Brandon Landgraff [00:06:56]:
So instead of having a whole wall of information explaining the shipping details of your product, the contact information, the warranties, how the product needs to be used, you can add that all into an accordion. Things such as subscriptions. If you need to explain how a subscription works, you could put that into an info icon, pop up and put that higher up onto your page. And by doing this, what you also do is you allow the user to quickly skim your page, figure out what other information they need to learn more, and then they'll be able to click into those areas. And so they're almost picking their own journey on how to shop. And again, I guarantee you with putting up your information higher up on the page and allowing the user to pick their journey through those few key design tips, you will see better conversion rate because of it.
Claus Lauter [00:07:51]:
No, that's definitely a great tip. Tell me the next tip. I'm curious what's coming up next for sure.
Brandon Landgraff [00:07:57]:
Well, since we were already kind of guiding into information and selecting information, I wanted to bring up the importance of laying out a navigation. So navigations are an extremely complex part of your site and I just wanted to give a few key design tips with your navigation. So you want to keep your navigation fairly simple. It should be a layout for the way your whole site works and then you really want to utilize how that mega menu works to then dive into each area. Furthermore, it's important to have your navigation sticky and bonus points if in your navigation you're able to put your checkout path button. And even more bonus points if you're able to use for that button color, the same color that you use for your checkout button on the page. Further to that on your product page, it's important to utilize your sticky navigation for the add to cart button too. And also I've seen tons of apps that allow you to have that, but a lot of premium themes are almost having that option as a mandatory option when they're coming out with themes.
Brandon Landgraff [00:09:04]:
So conversion tip number four is to use sticky navigations a little bit better and clean up your menu so it doesn't confuse your customer about what your site is and what you're trying to sell.
Claus Lauter [00:09:16]:
No, makes perfect sense. I think that's already a little bit advanced. You need to have the right theme or you need to have someone developing that for you. But definitely in regards of increasing conversations.
Brandon Landgraff [00:09:28]:
Great tip there for sure. And then I'll touch on the last conversion point right here. As you could tell, a lot of the conversation is around information and getting the right information to the consumer so that they can make a purchase decision on your page. And one thing that almost anyone can do is for all the different product images that they have on their product page or throughout their site. If they're able to overlay some of the benefits on those images, you can easily illustrate what makes that product great. More often than not, I land on these different shopify pages and people in their head, they're selling something really cool and I know that they're selling something cool, but the person that doesn't know that they're selling something cool is the customer because you haven't highlighted the benefits of that product and so again, it's super easy. All you have to do is load up canva, put your product image, a nice clean shot into canva, and then add a few call outs explaining what makes your product so great. And it could be different benefits and features.
Brandon Landgraff [00:10:34]:
Try to keep it to about one sentence, no more than that per feature.
Claus Lauter [00:10:39]:
Hey Klaus, here, just a quick one. If you like the content of this episode, subscribe to the weekly newsletter at newsletter ecommercecoffeebreak.com. I score and create 50 news sources so you don't have to, saving your hours of research. Grow your revenue with ecommerce news, marketing strategies, tools, podcast interviews and more, all in a quick three minute read. So head over to newsletter ecommercecoffeebreak.com to subscribe as at 100% free. Also, you will find the link in the show notes. And now back to the show. Yeah, I think that's a tip that very few people know about, that you can just do a text overlay and facilitate the carousel, the images as an additional space to put more info in there.
Claus Lauter [00:11:17]:
Let's talk about a little bit about how you find out if that is really necessary. All of these tips for your store or if you're heat maps help with that. Basically watching over the shoulder of your customer what they're doing on your website. How do you do that? What kind of tools are you using?
Brandon Landgraff [00:11:34]:
Totally, and it's always an interesting question because whereas I gave a blanket statement for five conversion tips, conversion is really dependent on the store. I've suggested some things to some folks and we've ran tests and we realize, oh, it actually didn't quite work out for this store or for this setup. And you really have to take it case by case. And so I recommend for those merchants out there listening to install something like Hotjar. It's my favorite tool that I've used in the past. I believe it does even come with a free trial. And once you add Hotjar, you just install a little code snippet inside your header. Hotshar might even do that manually at this point.
Brandon Landgraff [00:12:16]:
And once you have that installed, you're able to pull up three different key areas in Hotshar, you're able to pull up heat maps so you can see where users are clicking and how they're interacting with your site. And also within the heat maps, Hotjar will outline different triggers, different points that people are struggling with. So when you go back and look at some of the data, you'll see that, oh, a person thought that they could click here and they can't actually click here. Oh, I see. They're trying to add this item to cart, but it's not behaving in the way that the user functions. So that's a really useful thing that you collect in Hotjar. The other is looking at the scroll depth maps inside of Hotjar to see how far someone is going down your page and making sure that you have the relevant information up higher on the page for the user to make that purchase decision. And the last, which is my favorite, and it's also the most arduous out of them all, is looking over the screen recordings.
Brandon Landgraff [00:13:17]:
And yes, it's a lot of work. Usually they could be ten minutes of time. But by watching someone use your site, it's eye opening really, because you can end up going through little bits that you thought was totally clear and then you realize that, oh, the customer has been spending five minutes on trying to create an account. And you could probably come up with a few tips yourself that are really easy that you could implement today to improve your conversion just through watching these videos.
Claus Lauter [00:13:45]:
Yeah, screen recordings are an adventure. I can speak from own experience. It's an eye opener. You really will see what's happening because what you think and you know your product, you know your website, you don't see the forest because of the trees. And then you see what people who come the first time to your store do. There are worlds apart. Now, you're a very experienced developer and designer for stores, for websites. And you found out that even with Shopify 2.0, where things have become a little bit easier, managing them in the background, a lot of people struggle with sections and blocks.
Claus Lauter [00:14:19]:
And you came up with a solution to make it easier. Tell me a little bit about it.
Brandon Landgraff [00:14:23]:
Yeah, gladly. After looking at tons of folks interacting with Shopify sites and their themes, I realized that usually there's two issues at hand. One is that the setting that they need doesn't exist for them to make the edit in their store. And then the second is if the setting is there, they don't know how to use the certain setting to tweak their store. And so what I've done through a lot of my research is I've tried to come up with a section of library, I guess you could call it a library of blocks and sections that you can easily install on your site with one click through this app called Flexi. And so you'll notice that the blocks and the sections are quite different. The blocks are most useful on product pages. So let's say you wanted to add certain icons on your product page under your add to cart button.
Brandon Landgraff [00:15:15]:
You could do that. You could add accordions, you could add pop ups, you could add tabs. You could add a lot of the things that we mentioned on today's call. Additionally though, let's say you wanted to add a certain piece of text. Let's say you're a hot sauce brand and you wanted to label how spicy your hot sauce is using a meta field. Well, you could add that block into your theme, and then you could change the color, you could change the size, you could change the spacing of it. You could add a certain background to the text. You could do a lot of those things that you would have to pay a developer for, which would be quite expensive.
Brandon Landgraff [00:15:50]:
The sections are quite different. On the other hand, the sections is a library of accordions, better laid out image and text sections. You can get marquees in this library and there's tons more that I won't necessarily dive into, but the blocks are really the meat and potatoes of the app so far.
Claus Lauter [00:16:11]:
How long does it take to implement your app to get started? Is there a learning curve? Do I need to do some homework before I can get started? What's sort of the onboarding process?
Brandon Landgraff [00:16:22]:
The onboarding process is fairly straightforward. Once you install the app, you'll already have the blocks within your theme, assuming you have a 2.0 theme. If you don't, the app will let you know that you don't have a 2.0 theme if you're unsure. And then if you do have that 2.0 theme, all you have to do is go to your theme and then in the product info section right around your product description and your product title, you can click add block and you'll notice a tab within Shopify that's called app blocks. You go over to app blocks and then you're able to add these blocks with these with the sections slightly different. Shopify makes you install sections on your theme and you can't necessarily just get them out of the box. But where some section libraries, what they try to do is force you to install different sections manually, one by one. I tried to make my sections more relevant, not have necessarily 100 sections, but have 20 really good sections, and you can install those sections with just one click.
Brandon Landgraff [00:17:23]:
And once you install the sections with one click on a theme, you can go in and edit your site as you typically would inside the theme customizer.
Claus Lauter [00:17:32]:
And you can all do all of that without being a developer.
Brandon Landgraff [00:17:36]:
100% no code, no installed extipates as a developer, I always forget when I'm talking about this to put that in, but yes, there's no code or anything like that required. As long as you have a general understanding of the theme customizer, you'll be able to use these things just fine.
Claus Lauter [00:17:54]:
Okay, that's definitely good news. I think a lot of people are just scared when they think they need to change something on a theme. They think I need to start working on source code or something like that. So that's not the case. Can you give me an example of people who have used the app in which kind of way or what kind of main features they started with?
Brandon Landgraff [00:18:12]:
Yeah, definitely. I'd say that there's two primary use cases for the app at the moment, and I'm working on more, but the first one consists on the product pages inside of your product info tab. So putting text and putting icons and putting accordions around your add to cart button, that's been the primary way to do it. And in fact, I even got a review last week where I think the review I got nailed it on the head where the person said that they had a premium theme, they had upgraded everything, and they just wanted to add a few blocks with text and with icons and be able to adjust it themselves on the theme that look professional. And that's quite, exactly the use case is I want to be able to put this ability into everyone's hand. For them to be able to just make a few tweaks to their theme if they like, whether it's a free theme or a premium theme or whatever, without paying for a developer. Because as a developer, I got this idea because I was making a lot of these tweaks and charging not a lot of money, but to go into someone's theme and set up an environment and just to edit basic adjustments in text, it can be sometimes time consuming. And so if I can give merchants the power to do this themselves, that is fantastic to me.
Brandon Landgraff [00:19:36]:
The second use case is I spent arguably too many late nights working on this image and text section. And within this image and text section, it's quite unique in the sense that you can adjust the spacing all around the section. You could adjust how wide you want the text, how wide you want the image, if you want on mobile, the image to display above the text, below the text. A lot of those little adjustments I was also making inside of the theme customizer for merchants. So I built this robust section for anyone to use, and it's been received very well.
Claus Lauter [00:20:13]:
I think it's a bit of a win win situation that you created there for the merchant. They can do a lot of self. They don't need to be unpatient and wait for developer and play the ball back and forth so they can do it. And on your side, you can concentrate on bigger projects instead of doing repetitive stuff late night where it is difficult to charge for. Tell me a little bit about the freelance part of your site. If somebody really wants to outsource it, wants to work with you, who's your perfect customer?
Brandon Landgraff [00:20:41]:
You made an interesting comment there, and I'm trying to step away from making a bunch of small adjustments that a merchant could realistically do in their store. And so this is why I made the app. I made it more of a DUI approach. The types of the projects that I focus on is really unique and custom work within side of Shopify. And so usually we're trying to push the limits of what Shopify can do. And so this might be something operational, this might be something on the product page where someone is trying to set up a unique sale, and they have three different products, and they want to bundle the products in a certain way, and they want to be able to add checkboxes to bundle these products and to increase their average order value. That's the type of project that I would work on, or even something like in the cart. If someone wants to build some sort of unique upsell feature in their cart based on a certain type of product criteria, that's also in the cart.
Brandon Landgraff [00:21:39]:
Well, that's also the type of project that I would work on. In general, I want to give my clients a clear RoI for working with me.
Claus Lauter [00:21:48]:
Okay. No, that makes perfect sense. Brendan, before we come to the end of our coffee break today, is there anything that you want to share with our listeners that we haven't covered yet?
Brandon Landgraff [00:21:57]:
I just wanted to reiterate my passion for Shopify and building cool things. And quite honestly, Flexi, to me, is a passion project. It's something that I've thought about day in and day out. And you know what? If you install the app and there's certain things that you're like, oh, I wish it had this, or I wish it had that. Just please tell me. I'm trying to get as much feedback as possible to build the best product as possible, because it's my baby. It's something that I just want to grow. So thank you for anyone who installs it and gives me a shot.
Claus Lauter [00:22:35]:
Okay. On that note, where can people find out more about you and the app?
Brandon Landgraff [00:22:39]:
Yes. So if you go to flexiblocks, app. You can check out my freelance sites if you want to install the app from the App Store today. All you have to do is search for flexi blocks and sections inside the App Store and I guarantee you'll find it.
Claus Lauter [00:22:55]:
Okay, I will put the links in the show notes and you're just one click away. Brendan, thanks so much to give us basically a short masterclass on how to quickly optimize your theme for better conversions, and I hope that a lot of listeners will try your app and optimize their stores to get more sales through the door. Thanks so much for your time today.
Brandon Landgraff [00:23:14]:
Awesome. Thank you so much too for having me on.
Claus Lauter [00:23:17]:
Hey Klaus here. Thanks for joining me on another episode of the Commerce Coffee Break podcast. Before you go, I'd like to ask two things from you. First, please help me with the algorithm so I can bring more impactful guests on the show. It will make it also easier for others to discover the podcast, simply like comment and subscribe in the app you're using to listen to the podcast, and even better if you could leave a rating. Thanks again and I'll catch you in the next episode. Have a good one.