One Powerful Refresh to Your Shopify Storefront You Can Make in the Next 10 Minutes
It’s happened again. You got a raving review of your product - they’re in love, and they’re sending everyone they know to your Shopify website. You’re excited, but also cringing a little on the inside.
Why? Because you’reslightlyembarrassed by the way it looks. It’s not professionally designed (yeah, who has the budget for that?), you’re not techy enough to have built something crazy cool, and you’re worried you’ve missed something huge in setting up your site. But, honestly, it’s the best you can do on your DIY budget.
This is the exact situation I hear from so many of my students inside my course, DIY Shopify, so I’ve got you covered!
There is something simple you can do in the next 10 minutes to make your Shopify storefront more functional, effective, efficient AND more visually pleasing - and, yes, you can do it in the next 10 minutes. You can do it while listening to this episode right now. In fact, I’ll walk you through it.
What’s the secret? I promise you it’s going to surprise you, but hang in there with me. The most powerful way to refresh the look and functionality of your Shopify storefront in the next 10 minutes is to spruce up your header and footer.
Yes, your header and footer. These are key functional elements of your website, and they set the tone and direction for your customer’s experience. They’re subtle and they work hard without anyone even knowing it - but poorly designed headers and footers will cost you points in professionalism, great branding, and sales.
Before we dive in to the how-to’s, feel free to download this step-by-step guide so you can come back to updating your website header and footer any time!
Headers and footers contain links to important pages (aka, information) on your website that your customers will want to explore before making informed purchase decisions. Remember, in our previous episode on ethical marketing this is your number one priority as a marketer, sales person and shop owner.
Your headers and footers are also interactive. Meaning, this is a part of your website that your customers do not just look at - they engage with it. It needs to be on-brand, functional and clear.
All about your website headers
They say you never get a second chance to make a first impression, and it’s true! Your header is the first thing your customer sees when they come to your Shopify storefront. This is your chance to showcase your brand, instill the feeling you want them to experience, and provide the best direction to what they’re looking for.
Optimizing your headers with these simple steps
Making your headers beautiful and functional is simple, but important. As you go through your refresh, keep these things in mind.
Use this space wisely
You can flaunt your brand by showcasing your logo and brand colors and fonts. You want to make sure your logo is legible but not taking up too much space. So many people think the logo is the most important part of their header but it’s not.
Use a decent-sized font
Keep your font size around 14-16pt. Almost always prefer a sans serif font - the kind with the straight edges, no flares - they are easier to read on screens but a well done serif works too.
Keep it simple
Your header should be incredibly simple and straightforward to decrease overwhelm and confusion. A confused customer doesn’t buy. Use top level categories or collections to make it easy for customers to browse through and find the things they are looking for. You can use drop down menus to keep things organized.
Include a “shop all” link
Some people will shop by category and some people want to be able to scroll through everything so give both options.
Only include top level pages
This isn’t the place to list out every page in your site or every collection you offer. Be selective about what you link to in your header. Something that's really common that I see is people will have a blog link in their navigation, but they haven't blogged in a year. If blogging is not a high priority marketing tactic for you, get that blog link out of the header and clean it up. You don't need it!
Remember, you must feature a contact page or contact information, a search bar or space, and a cart link in the header. You should skip a link back to the homepage and social media links here as they distract from the sale.
Examples of great Shopify storefront headers
You can check out some websites the Product Powerhouse team has created to see examples of some great headers. Here is an example for a coffee shop, JOMO Coffee, and here is an example for a candle shop, Bella Vida Candles.
Now, about those footers
Footers may be the most overlooked opportunity to engage your customers on your Shopify storefront. Footers are powerful and potent, especially when used correctly. Strong footers are an extension of your header and supplement the information found there. While your header provides clear direction on where to go first,your footer provides an easy-to-access map to where they should go next and ways to navigate your store.
How to optimize your footers
A great footer should supplement your header, so here are some things you should be including:
Secondary logo - or just your logo. Make this clickable so customers can return to your homepage from anywhere on your site.
Navigation links to your About page, blog, and main product collections, and a ‘shop all’ button (depending on the space you have in the footer and how your store is organized).
Link social media accounts.
Store hours and location if you are a physical store.
One more strong call to action. If your customer only does ONE thing from here, what should it be? Typically we’ll put an email sign up form. Either a small one in a column of the footer, or above the content of the footer that appears on every page.
Examples of great footers for Shopify storefronts
Here is an example of a simple website footer for an online clothing boutique, Cozure. Here is an example footer for a jewelry boutique, The Fox and Stone, and here is an example of a storefront for a physical location market, Frannie’s Market.
How to audit your Shopify website header and footer
You may still be asking, “Okay, but where do I start?” Here’s what I want you to do. First, open up your website on your desktop on a full-size screen and on your phone.
Next, look at your header space and ask yourself, “am I seeing enough of the next step?” Most people aren’t going to look at the header first - it’s going to be an afterthought. They’re going to head to your main section, then their eyes will travel up to a header. So, is your header taking up too much space, too little space, or just the right amount? You can then go in to Shopify and tweak those sizes.
And then I want you to look at each link in your top navigation and ask, is this crucial for making a purchase? Or is this something they would want to know later in the process? Or is this something that they need to know now? Is this something they'll be looking for?
If it's something they'll be looking for, you wanna include the link to that in the footer. If it's something that's gonna help them browse, you're gonna put that in the header. And then I want you to look at all of the links and categories and make sure that they are your top level, the ones that get the most traffic or the ones you want to sell more of. If you have a collection that you really want to sell, you're gonna put that first in your site. That's gonna be the one you focus on.
I also want you to look at your fonts. Are they big enough? Is the size of the font big enough? Is it at least a 14-point font? Do you have space to make it a 16 point without it feeling too cluttered? Look at that. That's really important for legibility, especially on different sizes of phones.
The announcement bar is a really great place to put a call to action. So if you want to share some special information, use that announcement bar space - don't be afraid to use that space to highlight different things like a sale, event, or your email list or opt-in.
Need more DIY help for your Shopify store?
DIY Shopify is my new self-study program that helps you create an amazing website without spending hours on Google or learning code so that you can focus on the parts of your business that you love. It's six modules of easy-to-follow lessons that will help you build your own Shopify store like a pro. It includes video tutorials, written explanations, planning, worksheets, checklists, and tons of examples to show you what's possible. Learn more here!