Shopify alone doesn’t equal success. I cant count how many times I’ve had a message or call from a new eCommerce store owner that invested in Shopify and cant figure out how to get their first organic sale. Most of the time these young business owners are led on by the Shopify websites brilliant marketing and sales pitch text.

They literally state on the Shopify home page.

No Design Skills Needed

Shopify No Design Skills

“A platform so simple – everyone can do it!” Guaranteed Success!

Right? Well. When grounded in reality. That Shopify sales pitch is wrong and honestly, misleading. I’ll explain why and I’ll give a few solutions to correct a few of the user experience design errors inexperienced eCommerce website owners make.

One of the most common mistakes I see is from the minimalist default Shopify theme. The minimalist theme is cleanly laid out, uncluttered and a favorite for a lot of new Shopify stores. The issue is some times it’s just too bland and has too much white space.

A good example of this is from https://nurselifeapparel.com/. At first glance on my 17″ 1080p screen. You dont initially realize there’s a lot of content below the hero banner here. The content is hidden below the fold and this effectively forces users to click the hero banner or menu because you simply don’t know there’s content below. You don’t know that you can scroll down. Another major issue on this site specifically is the hero banner isn’t clickable. So essentially your user is lost on what to do even before they see the first product.

Shopify White Space Clean

The simple solution is to reduce the white space around the hero banner area. This pulls up the bottom content and has it overlap the fold. This automatically lets the user know that they need to scroll down for more content. A simple tweak. Maintains the modern clean design and removes a user obstacle. The less a potential customer on your website has to think – The Better!

Shopify Home Page Design Tweak

The next most critical and common user experience mistake I see on new Shopify websites usually takes place on the product page. Shopify offers some product customization options out of the box and its a great, almost mandatory feature to have on any eCommerce store platform. The problem is the default user flow design is often confusion and complex, resulting in less conversions.

Check out the image below. The size and fitment label elements really blend in. At first glance you wouldn’t know these are mandatory selections and that a user interaction is required.

Shopify Default Theme product page

The same goes for the default Shopify Add to Cart button. Take a look at this Shopify themes default button look. Its flat black, minimal, trendy. All the rage! It must be great! Right? No. Not really.

Your Add to Cart / Checkout buttons need to stand out. They need to be the single element that draws the eye when your product page loads. That add to cart button is one of the most important design elements on your entire Shopify eCommerce website.

Check out the image below for instant gratification. Colors are subjective to opinion but there’s no denying. The Add to Cart button now draws your eyes, instantly. Its clear that the Size and Color text are labels and that you need to select a option below the labels.

Shopify Product Page Design

Amazing what a few colors can do right? Now the user flow clicks and signifies that 3 steps are needed to purchase.

Step 1: Choose your Size.
Step 2: Choose your Color
Step 3: Add to Cart

The next on my list of common Shopify design mistakes is value proposition and lack of call to actions. Lets take Chronotick.com for example. A newly opened store. This is what you see on the home page.

Shopify Home Page Design

At first glance. It’s not a bad looking site. Decent photography and a modern full width layout. Whats the first thing that hits you tho? You land on this page. What do you do? What are these people selling and why should you buy from them? There’s no apparent value propositions, selling points and there’s no call of action here.

Lets give it a quick clean up!

Shopify Hero Image User Flow

See what I did? White text on a very bright background is hard to read. I gave the image a darker overlay for the white text to be easier to read. I added value and I added proposition.

The first line Premium Name Brand Watches. That signifies you sell quality products, your products hold value and instantly lets the user know what it is that you are selling. This is your value.

The second line. “At entry level prices” lets the user know your proposition and sell point. Why buy from you? Well, You can offer high quality goods “Premium Name Brand” at a lower price!

The next line and change to the above the fold hero area is a SHOP NOW button. This is a obvious must. The entire purpose of a hero image on a eCommerce page is to offer a direct path and goal. We gave them value and we gave them proposition. Now we have to direct them to where they get these things. That’s where the Call to Action / Shop Now button comes into play. Its the goal.

Tho it’s not rocket science and not perfect – 5 minutes can easily make or break your home page traffic. Again. Three easy steps here just improved this websites conversions.

Step 1. Add Value.
Step 2. Add Proposition.
Step 3. Add a Goal

These Shopify tweaks may seem small in the grand scale of things but I’m telling you from experience. It all adds up in the end. The less your customer has to think – the higher your conversion rates will be. I know its hard to do and I know some people may object, but the saying “Less is More” is usually exactly right when it comes to eCommerce. In all these tweaks aren’t even Shopify specific. They can and should be applied to most web designs where a specific user action is required.

Make the goal obvious. Take the load off the user. Design your website like its built for a 5 year old.

Building a eCommerce store is a big task and especially daunting for someone with not much experience. Shopify provides a great platform and gets a lot of entrepreneurs up and running but its easy to overlook the details and core principles of eCommerce web design.

That’s where a good front end developer and experienced eCommerce designer like myself comes in to play. Do it right the first time. Find your competition. Observe what they’re doing and then do it better.

GET IN TOUCH

One Response

Comments are closed.