Shopify Conversion Rate Optimization

Beauty is the shallow veneer of good web design. Pixel-pushers know little about conversion rate optimization; designing for appearance and functionality with words that “we’ll achieve your business goals”.

Facebook, Google, YouTube, Wikipedia, Amazon, and eBay—all online monsters—are aesthetically ugly. Functionally, they are brilliant. These companies test and tweak little elements every week like the addition of an icon on a form, change of navigation text, or introduction of a new element to see the effect on business goals.

Store design does not need to be art. The crux of good ecommerce design is revenue. All else is irrelevant.

The given design ideas and methodology show why certain designs work and how you can apply the concepts to pluck low-hanging fruit from your store. Default to principles. Apply the principles to your situation. It is tempting to be hand-held into a high ecommerce conversion rate by copying another store, but this can hurt performance when you don’t understand the principles. What boosted sales for one store may not work for yours.

Design Principles for Higher Conversions

Axis of Interaction

Joel Marsh beautifully labelled a theory to optimally control eye movement on any page with imaginary lines, edges, and blocks in design. Our eyes follow chunks of images, text and other elements until interrupted to reduce intake of information. He calls it the “axis of interaction”:

The implications of axes in design are monumental. Everything on your page either builds an axis or destroys an axis. Groups of centred elements are bad usability unless you want interruption.

Centred logos are cute but destroy navigation.

A button to delete something valuable, like removing an item from cart, should typically be placed outside an axis. Notice below how the volatile button of “Move to Trash Can” in the Google Analytics property view is nowhere near an axis line. The feature is available for the user seeking it yet invisible to others. That is purposeful design.

Want an element clicked? Have it follow the axis of interaction. Form submit buttons that you want engagement with are best placed along the axis of the previous behaviour. An “Add To Cart” button in a product form should align with the content above it.

Common points of optimization for stores are form elements, navigation, and images. Cart and product pages have the most opportunity for Shopify owners.

Full-screen responsive designs are extremely hard to get right because they screw over axes. Where are the eyes supposed to go in this example? There is no control of the eyes.

The design could be compensated by moving key elements or giving worded directions of what the person is to do next. However, these bandage bad design that should be intuitive.

Whether you should go for a left-to-right axis or a top-down axis of interaction is up to you. Test each with heatmaps and session recordings in a tool like Microsoft Clarity to see the axes users have with a page. A product form can have the “add to cart” button horizontally after the product quantity selector. This may alter the interaction of each form element to affect the average order value and frequency a product is added to the cart. What billion-dollar companies do in their product design hints at what’s better for revenue.

The axis of interaction principle gives you an understanding of interaction data, lets you predict flaws in design, and helps you form a hypothesis to test a design with intent to optimise.

Colour Contrast

I’m sick of trying to read 50 shades of grey. Stop using grey fonts on a white background. The moment I see a Shopify design agency make this mistake, I know their designers care about appearance over sales. Grey text looks modern but webpages exist to be read.

Low contrast is disastrous for users with poor vision, low-quality monitors, and glare on screens. What is hard to use does not get used.

Load up a product page on your store then stand back two metres. Pretend you’ve never seen your store before. Can you tell where the navigation, product images, production description, and call-to-actions reside? What links can be clicked?

There is no best colour for you. Pick colours that match your brand or have a subtle psychological influence. Give fonts and backgrounds enough contrast for accessibility by using a tool like WebAIM. Keep your call-to-action colours distinct and consistent.

Colour contrast matters more than what shade of teal looks best. Be a contrast rebellion. Call-to-actions need to be clear and look like they can be clicked. Links must look like links, not white blobs.

Consider colour as a whole because one element can affect the whole. Colour can form an axis of interaction. A “coming soon” collection in the main navigation is not the key piece to draw attention with red. Grab your users by their eyes as you use colour to control focus.

Simplification Versus Complexity

What food additive sounds most dangerous: Hnegripitrom or Magnalroxate?

Researchers found people rated the fictional Hnegripitrom as more dangerous. The researchers conclude, “…dangerous food additives were rated as more harmful when their names were difficult to pronounce than when their names were easy to pronounce.”

We have a distaste for what’s hard to say. People are less likely to order a dish at a restaurant if they cannot pronounce its name.

The effect of simplicity carries over to product purchases. A 2007 study on the “Preference Fluency in Choice” found that our product preference depends on how easy or difficult the legibility of options appear. The researchers discovered that twice as many people wanted to buy a product when its description was in an easy-to-read font. When the option was difficult, people deferred their decision.

The mind has vast cognitive biases towards noise reduction that minimise the amount of work required to interact with the world. Break fluency and you will make people think more than they need to, which leads to indecision then no purchase.

If something does not have a clear purpose, elimination may boost revenue. Ecommerce perfection is the state when whatever you add or take away worsens the results.

Look at the design of websites your visitors regularly use. These influence what is expected from your store. Also follow this conversion guide to give people what they expect from a store to create a fluent shopping experience. An intuitive experience is an enjoyable experience.

Design Elements That Leak Sales

Carousels

A carousel is the group of sliding images seen on the front page of most online stores. Carousels are the most over-rated, over-used, and poorly designed element in ecommerce. Most carousels suck because:

1. They are poorly designed.
2. The eye follows movement. Auto-play carousels are a usability disaster. A static hero image avoids the error.
3. It’s the designer’s way of jamming multiple messages into a group. You complicate what should be simple.
4. A lot of people do not engage with carousels because of banner blindness. Most marketers have no idea how often their carousels are clicked on. ND.edu had a 1.07% total engagement with 89% of those people clicking the first frame.

If you use carousels:

1. Really ask yourself if you need it. Take the “Should I use a carousel?” test.
2. Still not convinced? Carousels can present key information in a confined critical space above-the-fold when used right. Keep the carousel static until the user engages. Test engagement, revenue, and timing. Auto-forwarding carousels aid banner blindness.
3. Give the user simple controls with easy buttons to tap. Do not expect people to click tiny circles like Taylor Stitch.

4. Provide an information scent on each frame. Tell the user what to expect with clear link text and descriptions when the image is clicked.
5. Show the number of frames. This can be integrated with controls. Everything about John Deere’s carousel is brilliant.

The Hamburger Menu

What do these icons mean?

Systems designer Wayne Pau says the answers in order are:

1. Motorola hardware menu button
2. MS Word bullet bullet icon
3. Android holo composition icon
4. Android context action bar overflow

There are many more versions. You’ve seen the hamburger icon in digital locations. Most ecommerce stores use it as a menu icon for mobile users.

Amy Schade makes a good point that the hamburger menu has a high-interaction cost. Users cannot see what the menu contains, have to press it with their finger, and possibly scroll to locate what they want. Designers make the mistake of jamming the entire desktop menu into the hamburger and fail to consider how else to present core information to a mobile user.

Booking.com shared they found no difference with the use of “menu” near their hamburger. Peep Laja for a scented candles seller found the hamburger menu with a border and “menu” text beat out the plain hamburger to increase revenue 6%.

Reconsider the icon design because of its confusion and influence on the user-experience of 50% of your visitors. The first lesson of the hamburger menu is to taste-test. Well, split-test. The second is to attack assumptions that affect a lot of your users. You may surprise yourself at what you find.

Calls to Actions

Buttons greatly impact sales because of their high engagement. Every customer adds a product to their cart making the action a valuable touchpoint to test.

Visit your home page then proceed to buy a product. Write down every element you click. These are good test options for a store with thousands of transactions per month. Another idea is to repeat this process to buy in blur mode:

1. Go to Thomas Spark’s Bookmarklets.
2. Drag the “Blur” to your browser toolbar to bookmark it.
3. Go to a store’s home page then click the “Blur” bookmarklet. Bam, the page goes blurry.
4. Can you click all the buttons to reach the checkout page? If so, the buttons passed the blur test.

The text and design to use on buttons that maximise your profit can be different from other stores. Here are call-to-action points to consider in tests:

• Make clear how to shop online. The primary call-to-action must be clearest. Phone case store Lifeproof changed their “Store” link in the top navigation to read “Shop Now”. 13% more people clicked through to the store and the company equated a 16% boost in projected revenue.
• The “Add to Cart” text on your product page. Black and Decker changed the primary call-to-action button of “Buy Now” to “Shop Now”. 17% more visitors proceeded to vendor pages for a yearly projected revenue boost of six figures. “Add to Cart” is a time-tested winner.
• Button design. Weird could work because it makes the button stand out. Design variables to consider are icons on the button, button shape, colour, and size.
• Vague is bad. “Continue”, “Next Step” and “Submit” are common mistakes. The “Checkout” text on your cart page can be “Proceed to Checkout” or “I’m Ready for Payment”.
• Christian Holst found users expect fields to auto-update and there to be one button at checkout. People do not know the role of buttons like “Update Cart” or other weird alternatives like the refresh arrows on Pure Fix cycles in their checkout process.

Collections: How to Design Them

My analysis of client websites show user interaction with Shopify collections make up 25% of the online shopping experience. The data shows collections are viewed as a middleman to achieve a goal and often have a lower engagement time compared to the rest of the website.

This means a good page design for your collections is likely to let people synthesize the best option for them in the quickest time. Here are factors to test on collection pages:

• The title and description. These clarify what the person is looking at and helps SEO. The content has a high impact on collections when it is above-the-fold. Helix Sleep uses value propositions in the description on the collection hero image.

• Internal promotion banners above product listings. Keep it relevant because users assume the banner to be category-relevant.
• Filters. A good filter system helps people sort through the attributes that matter to them. If you have a low SKU store, you can avoid filters or even collection pages altogether.
• Product card layout. The display of results in either a list-view or grid-view. Most Shopify stores have a grid-view. Wheelchair store spinlife.com found list-view increased sales 16.1%. I hypothesise a grid-view is best suited to collections that have similar attributes where visual differentiation matters like clothing and list-view is favoured for products that look similar and so require text for differentiation. The only way to discover what is right for your visitors is through a test.
• Information in the product card. Images are a must. Other elements to consider are product titles, descriptions, ratings, price markdowns, stock status, and call-to-actions like “wish lists” and “see it”. Let shoppers compare products at a glance.
• The default image size. Maybe your images are not large enough to help people see what they want. Mall.cz got a 9.46% boost in sales from enlarged product images and moving the short description to viewable only on a mouse-over event.
• A product preview. The Quick View app lets people see a bigger image and quickly access more information about the product.
• Pagination. You can use none, numbers, or wording. Infinite scroll didn’t work for Etsy. Larger stores can also test the ideal number of products to display per page.

Design Tactics that Boost Conversions

Use Trust Badges

A trust badge is an image that increases a visitor’s confidence to buy from you. The best badges for your store convey facts or benefits that matter the most to your biggest buyers.

I don’t trust a lot of studies out there that discover “79% of people abandon checkout because they don’t trust you” because they are funded by companies that issue trust seals. There are many more effective ways you can use badges to increase sales. Here are trust badge ideas to test:

• Logos of your payment gateway like PayPal. A lot of Shopify stores use accepted credit cards in the footer.
• Logos of your delivery companies.
• Value propositions. Refer to the chapter on positioning. My client Oh Clocks reinforces free shipping, returns, payment options, and customer support through trust badges.

• Shopify designed their own secure logos for vendors that you can grab.
• The Shop Promise. Display delivery dates predicted by Shopify that are backed by a limited guarantee for your customers. Help customers check out with confidence and increase conversion by up to 25%.
• Google Shopping has the top quality badge.
• If you’re an American company, you can use the BBB dynamic seal.
• Lesser known trust badges are logos of charities you donate a percent of profits to, institutions in which you are a member, review widgets, and press.

There are many badge options. Before you chase your designer to plug every trust badge you can find onto your product pages, footer, and checkout, do it with a test. One study that looked at trust seals in computing tracked eye movements of 60 people and found 38% didn’t see the VeriSign and TRUSTe logos. Furthermore, the participants had “significant misconceptions of their meaning”.

If you use security images when security is not a concern for shoppers, you may make people concerned about security to complicate their decision. Your goal is to pick the badges that overcome objections or set your business apart to get the sale. Hexclad does this perfectly on the product page to counter the top objections someone may have buying their cooking pans.

You can also explore where the trust badges are situated. I’ve seen logos reduce conversions because they are situated too close to order buttons. The best placement of a trust badge either fortifies a statement or addresses a visitor’s concern when it is expected to arise.

Leverage Brands

Make known the brands that trust you. It is a favourite strategy in the software space underutilised in ecommerce. What well-known businesses or individuals have purchased from you?

Include a section of logos and messaging on your home page or product page sharing who uses the product. By leveraging another business’ trust in you, you’re subtly suggesting to your customer, “You can also trust us.”

Always respect the privacy of people and businesses by requesting their permission to share their use of your product. Get permission to use any logos. Do not confuse people that bought your product that they endorse your store. Be an ethical, law-abiding store owner.

A similar strategy is to list the brands you stock. School Specialty do this at the bottom of their home page.

“Model” the Big Boys

I rarely recommend you copy a competitor’s design because most stores have no idea what they’re doing. The objection to this is, “I want a unique design”. If you model a store because they follow a lot of the principles in this conversion guide, who cares if your store is not unique. Design is about revenue and your visitors couldn’t care about a unique experience. Only egos care.

The big boys of eBay and Amazon understand conversion optimization. They run copious amounts of split-tests every day so model design ideas off them.

When you complete this guide, you can identify why a store might use a word, image, or design. You become Neo in The Matrix who is possessed with a perception to filter ideas for your tests.

Spot Design Problems with a Usability Test

Eliminate usability issues in your store to make purchases a friction-free experience. A website that works and is easy-to-use, gets used.

A user test helps you realise issues you overlook. Gather test subjects to screen share their computer on a video call or you can look over the person’s shoulder. Ask them to find one particular product then buy it while talking out loud. Record their screen and audio. Services like UserTesting.com can do it for you.

One test subject is better than none. Elaborate usability studies are a waste of money. Jakob Nielsen with Tom Landauer for the Nielsen Norman Group found, “The best results (for usability tests) come from testing no more than 5 users and running as many small tests as you can afford.”

In terms of frequency, run user tests every six months to spot issues that creep into website updates. A design trend may have snuck into your theme that is ineffective. Follow this simple user-testing plan for accurate scientific data that patches your blind spots.

Good job completing the lesson! The following part reveals how to find technical issues and make other technical improvements to boost sales without being an advanced coder:

Part 2: PositioningPart 4: Technical

Share It