Shopify Conversion Rate Optimization

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

Facebook, Google, YouTube, Wikipedia, Amazon, eBay—all these 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 in your store. It is tempting to be hand-held into a high ecommerce conversion rate by straight up doing what worked for another store. Resist and test. What boosted sales for one store may not work for you.

Axis of Interaction

Joel Marsh beautifully labeled 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 axises in design is monumental. Everything on your page either builds an axis or destroys an axis. Groups of centered elements is bad usability unless you want interruption. Centered logos can destroy navigation.

Want an element clicked? Have it follow the axis of interaction. That’s why form submit buttons (you want engagement with) are best placed at interaction points like the “Add To Cart” in the image above.

Notice 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 but invisible to others. That is purposeful design.

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 completely screw over axises. Where are the eyes suppose to go? The navigation for Vapour Eyes and the whole checkout sequence does not control the eyes. Maybe their eyes are too vaporized? (I had to.) You could compensate with a movement of key elements or give worded directions of what the person is to do next, but these bandage weak design that should be intuitive.

SkinnyMe Tea place selection of product quantity beside the “Add to Cart” button. This may alter the interaction of each form element to affect the average order value and frequency a product is added to the cart. Whether it’s better for revenue than a traditional top-down interaction, you should still test it.

Hard data gained from sources like a test or heatmap tool tell you how users engage with a page. VWO has heatmaps for your tests while CrazyEgg, Lucky Orange, and Hotjar provide similar tools without split-testing.

Knowing about the axis of interaction 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 optimize.

Color Contrast

Stop the gray fonts on white background. I’m sick of it. You know the low contrast look I’m talking about. Sure, it looks modern but web pages exist to be read.

Poor contrast is further disastrous for users with poor vision, low-quality monitors, and glare on screens.

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

There is no best color for you. Pick colors that match your brand or have a subtle psychological influence. Keep your call-to-action colors distinct and consistent.

Color contrast matters most. Be a contrast rebellion. Call-to-actions need to be clear and look like they can be clicked. Links need to look like links, not white blobs.

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

Simplification

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.”

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 minimize 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 and 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 websites your visitors use and how they are designed. 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. A fluent experience is an intuitive experience.

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. The eye follows movement. Auto-play carousels are a usability disaster. Natural Stacks avoid this error well with a static hero image.
2. It’s the designer’s way of jamming multiple messages into a group. You complicate what should be simple.
3. A lot of people do not engage with carousels because of banner blindness. What is the engagement rate of your carousel images? ND.edu had a 1.07% total engagement with 89% of those people clicking the first frame.
4. They are poorly designed.

If you use carousels:

1. Really ask yourself if you need it. Take the Should I Use a Carousel? test. Still not convinced? Well, carousels can present key information in a confined critical space above-the-fold when used right.
2. Keep the carousel static until the user engages unless you test engagement, revenue, and timing. Auto-forwarding carousels aid banner blindness.
3. Give the user easy control with clear buttons to click. Please do not expect people to click tiny circles like Taylor Stitch.
4. Show the number of frames. This can be integrated with controls. The WOD Life have a home page carousel with no indication of frame quantity. Everything about John Deere’s carousel is brilliant.
5. Provide an information scent on each frame. Tell the user what to expect with clear link text and descriptions when the image is clicked.

Call-to-Actions

Buttons and other links greatly impact sales because of their engagement. Every customer adds a product to their cart making the action a valuable touch-point to test.

Visit your home page then proceed to buy a product. Write down every element you click—these are good test options. Another good idea is to repeat this purchase process in blur mode:

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

The text and design to use on your buttons that maximize your profit does not need to be the same as other stores. Here are call-to-action ideas to consider in your tests:

• Links to reach the store. This is most important for sites that provide content other than just an online store. 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 though “Add to Bag” is becoming popular.
• Button design. Weird could work because it makes the button stand out. Design ideas to consider are icons on the button, button shape, color, and size.
• Vague is bad. “Continue”, “Next Step” and “Submit” are common mistakes.
• American Apparel users when selecting their shipping option either failed to click the apply button or mistook it as a way to submit the checkout form. People do not know the role of buttons like “Update Cart” or other weird alternatives like the refresh arrows on Pure Fix cycles in the checkout process. Christian Holst found users expect fields to auto-update and there to be one button at checkout. Auto-update forms at checkout with ajax to simplify.
• The “Checkout” text on your cart page. There are many viable options like “Place Order”, “Proceed to Checkout”, and “I’m Ready for Payment”.

Hamburger Menu

What do these icons mean?

Systems designer Wayne Pau says the answers are:

1. Motorola Hardware Menu Button
2. MS Word Bullet Butcon
3. Android Holo Composition Icon
4. Android Context Action Bar Overflow

You’ve seen the hamburger-like icon in many 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.

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%. Booking.com shared they found no difference with the use of “menu” near their hamburger.

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.

Design of Collections

My analysis of client websites show user interaction with categories, or what Shopify calls “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 site.

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

• A title and brief description. It clarifies what the person is looking at and helps SEO. Electric Styles do it on their collections.
• The display of results can be broken into either a list-view or a grid-view. Most Shopify stores have a grid-view. Wheelchair store spinlife.com found list view increased sales 16.1%. I hypothesize a grid-view is best suited to collections that have similar attributes where visual differentiation matters (e.g. clothing) and list-view is favored for products that require text for differentiation (e.g. bikes). The only way to discover what is right for your visitors is through a test.
• Filters to help people sort through the attributes that matter to them.
• Be careful how you use internal promotion banners above your collections. Keep it relevant like Tuckernuck because users assume the banner to be category-relevant.
• Information in the product card. Images are a must. Other elements to consider are product titles, descriptions, ratings, price markdowns, and call-to-actions like “wish lists” and “see it”.
• 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. View it in action on sendgiftbhubaneswar.com.
• Pagination. You can use none, numbers, or wording. The Online Legging Store use “Next” and Prev” with arrows. Infinite scroll didn’t work for Etsy. Larger stores can also test the ideal number of products to display per page.

Trust Badges

A trust badge is an image that increases a visitor’s confidence to buy from you. Ecommerce stores typically use images that show their authorized SSL certificate provider:

Most studies out there that survey visitors about trust badges to discover “79% of people abandon checkout because they don’t trust you” are questionable because they are funded by companies that issue trust seals. Be weary of that. There are a lot of ways you can use badges to increase sales. Trust badge ideas to test are:

• Logos of your payment gateway like PayPal. A lot of Shopify stores use accepted credit cards in the footer.
• Logos of your delivery companies like UPS.
• Core messages. Brosa reinforce their returns policy with an icon on product pages and Spigen use a guarantee in the footer.
• If you’re an American company, you can use the BBB dynamic seal.
• Shopify have designed two of their own logos vendors can test that you can grab.
• Become a Google Trusted Store. (Available only to Shopify Plus stores.) Even if the logo fails to establish trust, the monetary guarantee is assuring to visitors.
• Lesser known ways to use trust badges are logos of charities you donate a percent of profits to, institutions or organizations in which you are a member, review widgets, and press.

You can also explore where the trust badges are situated. I’ve seen logos take away conversions because they are situated too close to order buttons. iMagnet Mount use a satisfaction guarantee star, refund guarantee star, and the logos of accepted payments on the product page. The best placement of a trust badge either fortifies a statement or addresses a visitor’s concern when it is expected to arise.

Before you go chase your designer to plug every trust badges 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. Researcher discussions with the participants also revealed the tested subjects had “significant misconceptions of their meaning”. Use security images when security is not a concern for your users, and you may make people become concerned about security to complicate their decision.

Leverage Brands

Make known the brands that trust you. It is a favorite strategy in the software space underutilized in ecommerce. What well-known businesses or individuals have purchased from you? If no large businesses have, who has bought products you sell?

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. Thirdly, do not confuse people that bought your product from somewhere else 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. If you do because they seem to 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.

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; possessed with a perception to filter ideas for your tests.

Spot Your Design Problems with a Usability Test

Everything seen on your store is design. Surveys, live chat, and forum discussions reveal only so much. The source of massive jumps in conversion rate often come from solving unique problems in your business.

Eliminate usability issues on your store to make purchases a friction-free experience. A user test helps you realize issues you overlook.

Get your test subjects 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, but 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.”

Run user tests every six months to address issues that crop up with site updates and design trends. Follow this simple user-testing plan and you will have accurate scientific data that patches your store’s blind spots.

For one store I tweaked a guarantee to boost sales 50% instantly because the product was inherently risky. The heart of your Shopify store’s CRO problem may not be a simple design change. The biggest growths may initiate from discussions with qualitative testing.

How to Test Design Changes

Visual Website Optimizer was always my recommended tool in Shopify to discover what gets you the most sales. Recently I’ve been loving Convert.com because it is the most accurate at tracking revenue for my clients not on Shopify Plus. Don’t even bother with Optimizely as they’ve been very explicit about not supporting Shopify.

Though each of the tools are a visual editor, you need design skills to make advanced changes. Always track revenue. Additional tips I have:

• Implement the VWO tracking code in Shopify following the documentation. Integrate VWO with Google Analytics so you can segment all data based on the test variations. This lets you see how user behavior differs. Every piece of data in analytics from a test variation can lead you to test a hypothesis.
• If you’re using Convert Experiments, following their Shopify integration knowledge base. I’ve helped them clean up this documentation so it’s straight-forward.
• Speed up the creation of some variations with Shopify’s theme customization, view then copy the source code of the changes, revert your changes, then paste the code into VWO. This little hack is limited to the options built into your theme.
• If you append ?view=list to any collection URL, your store will use the collection.list.liquid template. If you use ?view=grid at the end, the store will call the collection.grid.liquid template. The method can be used on any liquid file.
• The coolest trick is how you can test major design changes. Read my guide I wrote for the Shopify blog on how to test for revenue, themes, and nearly anything.

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