Part 4: Technical
The Foundation of Ecommerce Profit
“The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency.”Bill Gates
Someone cannot convert if they, well, cannot convert. Sniping technical bottlenecks and opportunities to make the purchase experience a breeze takes longer than a test booking from your browser.
Technical conversion optimization looks at the usability of your store in a variety of situations and covers ways you can use technologies to turn a visitor into a sale. Adjustments either have a monster-sized impact on sales because the issue hurts user experience, or a minuscule impact on sales that when combined with other changes add up.
Store speed correlates with revenue per user. Tests and research prove the correlation time and time again across all types of business.
Walmart found: “For every 1 second of improvement they experienced up to a 2% increase in conversions” and “For every 100 ms of improvement, they grew incremental revenue by up to 1%”.
Excellent servers are critical to a lightening fast store. Shopify was the first hosted ecommerce software to use a content delivery network (CDN). A CDN has servers placed around the world so visitors pull and push data to the nearest server. The server speed is taken care of for you.
One thing store owners and marketers can optimize is images. Screaming Frog is one way to identify large image files. Pingdom’s FPT tool provides an insightful waterfall chart to see slow images on a page and other reasons why a page lags in performance.
Work on your slowest pages that get views. Go to your Google Analytics then “Behavior” > “Site Speed” > “Page Timings”. Filter by “Avg. Page Load Time (sec)”. Expand the date selection to get more data points if need be:
The majority of speed optimization has to do with your theme. A good developer can refactor CSS, replace images with CSS, concatenate files, and minify files.
If your visitors were told to find one product, would most find it within 20 seconds? How about you actually find out with a HIT on Mechanical Turk.
Links on your site connect the user experience. The old rule of “the user should be able to find anything within three clicks of the home page” is a load of crap. You can have everything accessible in three clicks and make people befuddled at where to find information. Depth is not correlated with clarity.
Have links to key pages like contact, returns, and postage in the footer. Consider testing a broad categorization of products visible in the header rather than lumping them together under “Shop”. Test a link to your product page in the top.
The most important part in ecommerce architecture is the categorization of products. You don’t want a product to slot into multiple collections that are meant to differentiate products. Do you know the difference between “Custom Options” and “Custom Store Options”? What’s the difference between shop “By Category” and “By Collection”?
A good categorization structure helps conversions, SEO, and possibly average order value. You get it right when your visitors look at your collections then quickly know where their product is most likely to be.
The process of good categorization depends on store size. A store with less than 200 products can list all product names in a spreadsheet then group similar ones under a column. Large stores with diverse SKUs can model Amazon or eBay and get ideas off competitors.
Well organized collections can be brands like Ben Sherman, Timberland, and Under Armour. It can be interests like basketball, netball, and tennis. Avoid being too specific like having a collection of “Adidas Basketball Black” as it leads to an overwhelming navigation bar.
Order of Collections
The order of your product categories affect sales. Have your most important categories display first based on page views and page value.
Use my Shopify collections report to analyze the performance of your collections. Alternatively, go to Google Analytics then “Behavior” view “All Pages”. Do an advanced search for “/collections” to filter your categories. Consider a structure based on what gets viewed the most and has a high page value:
Bonus optimization ideas:
- Group similar navigation elements together to help visitors identify products.
- Explore the verbiage for navigation links. Designer Marta Eleniak talked one company out of calling their “Personal Vehicle Leasing” product “Just Drive”. You enable people to easily find the products they want.
A breadcrumb is the trail of links that tell someone where they are on the site. See an example on The WOD Life.
Breadcrumbs cut user anxiety, reduce bounce rate, and assist SEO. Imagine you did a Google search for “women’s short exercise shorts” then come across WOD Life’s product. The shorts are not your style, but you see the breadcrumb then click “women’s apparel” to find other options.
A breadcrumb matters to conversions because it provides context for the user at no cost. Jakob Nielsen has recommended breadcrumbs since 1995, “Breadcrumbs never cause problems in user testing. Users pay attention to breadcrumbs only 30% of the time; when they do, it helps and even when they don’t, it doesn’t cause any harm.”
A descriptive URL reassures a visitor they are on the right page. Compare:
A miss-match or lack of clarity can hurt conversion. You also improve SEO with clear URLs that match the page. A hidden conversion benefit of a descriptive URL is you help someone locate the page when they try to revisit it in their browser window:
Title Tags and Meta Descriptions
Not an area many consider for conversion because title tags are one of the most important on-page factors of SEO. Title tags and meta descriptions can set you apart from competitors. Each provide context that matches your page with visitor intent.
Title tags make it clear for returning users when they try to find the page in their browser or bookmark the page:
People who search convert 1.8 times better than non-searchers and bring in a disproportionate amount of revenue. Zohar, CEO of Instant Search Plus, tells me this stat is far below their data for over 1,000 stores. He says people who search convert anywhere from 2-10x better than non-searchers.
I agree with Zohar’s data looking across the stats of my clients. See the search stats for one of my clients. Searchers convert at 6.57% compared to 1.79%—a 360% difference.
Internal search seems to matter most on sites that have a large product range or products with intricate details like shoes and jewelry. Search can bandage poor site architecture, overcoming a lack of clear navigation and filters (though the best action is to stop the bleeding.)
How you implement search is as critical as its deployment. One study found by SLI Systems found 25% of shoppers refine their search query after their first search and another study learned 73% abandon the site after 2 minutes if they cannot find what they want.
Here are ideas to explore search that have worked for my clients:
- Test autocomplete search functionality.
- Test product images beside autosuggestion results.
- Test verbiage within the search box such as having no text versus “What are you looking for?” Inside the search box, the text “Search the store” does better than “Search” because people are assured they will stay on your store rather than be taken to Google. Compare search button designs like an image of magnifying glass to “Search”.
- Avoid including blog posts inside your internal search.
- Track internal search queries to see what people want and how you can better serve what they search.
- Conduct the same searches as your visitors with the data from your tracking. See what people encounter. Are the results accurate and helpful?
- Consider new categories or reworking existing categories if common searches appear for products. Make your collections based on user preference.
- Assist shoppers in refining their search results with filters on the results page.
- Provide default suggestions like bestsellers on the search results page when no products match the query.
You can do all this with Instant Search Plus. It is the best search app in Shopify.
Options make decisions hard. We handle complicated situations with inaction.
Help your shoppers find what they want with filters when your store has product options that are complex or apply to groups of people. Nothing is more frustrating when you find great shoes or clothes and they are not made in your size. I’m 6’9″ and have been there many times…
Midori Bikinis provide a simple checkbox filter that works well with their full screen product results. Lake House have an Amazon-style filter that allows sorting by bestsellers, price, newest items, and more.
The collection filter app helps a lot of Shopify stores with filter functionality and design. It is capable of doing what you want with filters.
Perpetual Shopping Cart
Forrester Research found the fifth most common reason people abandon cart at checkout is to resume their order at a later time.
You can fix this with a free Shopify app called Shareable Cart. A perpetual shopping cart remembers what someone had in their shopping basket by providing a link they can access later without having to log-in.
Links and Images Work
Confirm your links and images are functional to make a good user experience. You don’t have to click every link or view every image to verify they work.
Use Screaming Frog to scan your website. Once the tool completes its scan, click on the “Response Codes” tab then sort by “Status Code” to identify 404 errors:
Click the “Inlinks” tab at the bottom to identify where you need to update the broken links or images:
404 Pages From External Links
A 404 means the page viewed is non-existent because it was deleted or moved to a different address. If a journalist or blogger promotes one of your products with a good word so readers are pre-sold, a broken link will cost sales.
Use my custom 404 report to identify links that point to black-holes on your site. You may need to edit the report so it can identify what is a missing page. By default it looks for pages with “Page Not Found” in the title tag:
The report helped me identify a broken link in my YouTube video on AdWords conversion tracking in Shopify.
When your visitors find a non-existent page, how does your store help the sale? Type your store’s address into a web browser with a non-existent address like
mystore.com/errortest to check.
Control the message by telling the visitor what happened and what to do next. High-converting 404 ideas in ecommerce are:
- Use the same design as the rest of the site.
- Follow your brand’s image and have the page sell to your foxes. Do you sell clothing for dancers? Have a decked out cartoon figure busting a move. Give some tongue and check. ZURB University has good examples.
- Check the 404 did not happen from a page that should exist.
- Provide a search option.
Mysterious Mobile-Device Performance Issues
The obvious test is to jump on whatever mobile device you have then use your store. I’m surprised at the number of marketing managers and store owners that haven’t done this.
There are thousands of mobile phone models and more mobile phones than people on the planet. Mobile makes up half of your store’s traffic. How the heck do you discover when someone on a Samsung Galaxy 2 is unable to purchase then leaves your store when they don’t tell you the problem?
No foolproof method exists. The best way I know to spot mysterious mobile-device problems is this custom report in your analytics. Sort the report by ecommerce conversion rate:
It’s ideal to have every page perfect for every mobile user, but you have a budget. Make the business decision to focus what affects your bottom-line:
- Expand the timeline of your report for a greater sample then create an advanced filter for devices with one hundred or more users.
- Pay attention to the combination of bounce-rate and average session duration. A high bounce-rate with low session duration on one device indicates a major usability problem for those users.
- Check outlier conversion rates. Android users in the provided example are 66% less likely to convert than iOS users. It’s a worrying difference that needs investigation. The report lets you click on the operating system to drill deeper.
- The custom report also has a page-specific diagnosis. Analyze the bounce rate, session durations, and conversion rates on popular pages.
Sometimes your target audience use a brand of mobile device that explains conversion difference. Check and be sure.
Many online tools say they replicate mobile device usage, but I’ve repeatedly come across strange problems missed by these tools. Use tools like BrowserStack and Google’s mobile-friendly tool to purge obvious problems.
The final test is to use all features of your store on major devices. You can do this. The solution is OpenDeviceLab.com. ODL is a community movement where free labs are setup worldwide for the public to test sites and applications.
Cross-Browser Performance Issues
Cross-browser usability refers to how your store behaves on various browsers such as Safari, Internet Explorer, Chrome, Firefox, and others.
Review your “Browser & OS” report in analytics to see a report like:
Look for browsers with a variant average session duration or conversion rate. Regardless of what you find, I recommend you test your store in the various browsers. Browser performance issues are easier to diagnose than mobile issues because most are downloadable on one computer.
You are well past half-way of the ecommerce conversion guide. Keep going because some big growth hacks are ahead. You are about to learn how to craft product pages that make visitors demand your products: