Complete guide to eCommerce CRO – conversion rate optimization. Includes templates, infographics, and more.
This is our complete guide to eCommerce CRO (conversion rate optimization) in 2022.
So if you’re looking for:
- More sales.
- More conversions.
- Easy CRO techniques.
Then you will love the actionable tips in our guide.
Let’s begin our journey into the land of CRO.
eCommerce Conversion Rate Optimization Fundamentals
What Is Conversion Rate Optimization?
According to Optimizely.com:
“Conversion rate optimization (CRO) is the process of increasing the percentage of conversions from a website or mobile app. CRO typically involves generating ideas for elements on your site or app that can be improved and then validating those hypotheses through A/B testing and multivariate testing.”
Yet we have a simple explanation. CRO is a set of tactics and best practices that help increase the number of people that take the desired action.
What Is E-commerce CRO?
In short, E-commerce Conversion Rate Optimization is how we use tactics to optimize your web store for more sales.
Why Is E-commerce CRO Important?
In this age of heavy spending for e-commerce advertising, CRO is the key for your business success.
Here are some of the benefits that you can get from a good conversion rate on your stores:
- Increase average order value (AOV)
- Decrease shopping cart abandonment rate
- Get customers to buy more
- Build trust with customers
- Serve more customers with a quick checkout process
- Decrease return rate
- Get more love from loyal customers
In other words: eCommerce CRO can help you get the most bang from your advertising bucks.
Boosting conversion rates should be the top priority for your online businesses because they encourage customers to do what is most important, buy your products. And you can optimize conversion rate almost anything on your webstore:
- Landing page
- Mobile site
- Images, Videos, Font Size, and PageSpeed
- Free shipping option
- Cart and Checkout
- Product page, description, CTA
Here are the Tips & Tricks to Improve your eCommerce CRO
Chapter 1: Landing Page Optimization
1. Use Video On Your Landing Page
Nobody cares about your wall of text. And you want your customer to read all that text instead of clicking on the buy button?!
Nowadays, people are visual creatures. Let’s save them the hassle and help them get their things. And they will appreciate you with more sales.
2. Put CTA Above The Fold
According to UX veterans at the NN Group, customers don’t scroll much below the fold, people engage 84% more with things above the fold. If you have something you want your friends to click, put it near the top section of your site.
3. No Navigation On Landing Page
Your ultimate goal in ecommerce strategy is: don’t let the visitors run away. You can do this by closing all possible distractions, or links to elsewhere. Let’s agree on this principle: your landing page must be naked, don’t wear them with navigation. Let the customers focus on you and your offer, and complete the conversion.
Chapter 2: eCommerce CRO on Mobile
4. Optimize For Mobile Devices
In a recent research from Oberlo.com:
The share of mobile ecommerce sales in total ecommerce sales has increased a whopping 39.1 percent from its 52.4 percent market share in 2016 to the current 72.9 percent market share.
Put another way, 3/4 of online purchases today are made on mobiles.
If your store is not mobile friendly, how can your customer complete her shopping on her phone? Your store assistant refuses to help the customer, so she has to leave immediately.
Don’t let this happen. Be helpful. Assist your customer with a pleasing mobile shopping experience.
5. Use Bottom Navigation in Mobile Web
Everyone prefers to use their thumbs to navigate on the phone. And our thumbs are not growing like the screen sizes each year. Don’t let them have the hard times to reach the hamburger button on top.
Apps like Uber, Amazon, Facebook, and Instagram have bottom navigations for a reason. Your mobile web store is not an exception.
Amazingly, CRO Buttons brings the footer navigation for your Shopify online store. We transform your web into an app-like experience, after a few clicks. And you can make your shop as convenient as big e-commerce sites such as Shopee, Lazada, Flipkart, Shein…
Head over to our tutorial to see the magic.
Chapter 3: 3 ways to Reduce Your Bounce Rate and Increase Conversions
6. Make your site load approximately 3 seconds
Today, Page Speed is one of the most important metrics to keep your eye on. It directly impacts user experience, conversion rates, and search engine optimization.
What is page speed?
Why is Page Speed Important?
Websites with faster Page Speed provide a seamless user experience. On the contrary, websites with longer load times tend to have high bounce rates and reduced average page time.
A fast website provides a much better user experience than a slow one. Research has shown time and again that a slow website gets fewer conversions, and the user doesn’t read or engage as much on slower sites. That in itself should be enough reason to make sure the speed of your site is as good as can be.
According to unbounce.com:
When it comes to waiting for pages to load, most consumers think they’re more patient than they are.
Nearly 70% of consumers admit that page speed impacts their willingness to buy from an online retailer.
Although they know it’s important, the majority of marketers aren’t making page speed a priority.
The faster your website’s load time, the happier users will be. A faster website will have higher conversion rates and an overall better user experience.
7. Use high-quality images and videos on product pages
Most people don’t understand how images influence user behavior. They think images are just for decoration. As you know, customers can’t physically verify the product when shopping online. So they must place absolute reliance on images and videos on the website to get the closest look of the items.
According to social media expert Jeff Bullas
“67% of consumers say the quality of a product image is ‘very important’ in selecting and purchasing a product” in an eCommerce site. It’s even “more important than product-specific information (63%), a long description (54%) and ratings and reviews (53%)”
Examples of bad and good-quality images featuring the same product
What defines a high-quality image?
The three main components that define a high-quality image are sharpness, relevance, and speed.
Why is having high-quality images important?
High-quality images and videos provide a better user experience
Most people are likely to stay on the website with comprehensive and supplemental images that connect to what they were researching. Furthermore, high-quality images allow the users to make an informed opinion about the value of your site. So it is almost common sense that the better quality images you have on your website, the better the experience for any user visiting your site.
High-quality images help improve website SEO
Although search engine bots can not see the images on your website, they are capable of reading tags, captions, alt text, and other textual context for an image. Make sure the alt text and keywords for the image are directly related to the image. And the file name for the image should be descriptive of the image. So it is important to have high-quality images to draw the user in and keep them there, thus reducing the bounce rate.
High-quality images improve the conversion rate
High-quality photography supplies you with more visits by increasing the quality of your user engagement. Therefore because of this, users are more likely to spend longer on your website means you have a longer period to sell your products/services through both content and images.
However, remember to compress images and videos before uploading to increase the page speed. Here are some tools for you to do it:
8. Use font no less than 18px
Why we should use a font of no less than 18px?
Words must be the first means that help your readers understand what you want to convey. So if the font size is too small, readers will have to strain to read the text, which causes their eyes to fatigue. On the other hand, if the font size is too big (making the line length too short), readers are forced to jump to the next line of text – is also hard on the eyes!
In The Effect of Font Size and Line Spacing on Online Readability, UX researchers at Carnegie Mellon University and Spain’s Universitat Pompeu Fabra discovered that 18-point font sizes are the best for UX readability as well as comprehension in the body text of pages.
How to choose the acceptable font size?
The font size must also be large enough to be easily read. However, we have to consider endless screen sizes, large and small!
For large screens, your base font size should be in the range of 18px to 26px.
Larger font sizes on smaller screens create an uncomfortable reading experience because lines of text get cut off too quickly. The font size needs to be reduced on the smallest screens (mobile devices) to keep the line length of the text in that desired 45–80 characters per line range. In this way, visitors will not be shocked when suffering the website.
Chapter 4: Use free shipping to boost your sales
The word “free” has an amazing effect on purchasing behavior, like a psychological trick. “Free shipping” has become a common option when shopping online.
According to the Walker Sands Future of Retail 2016 study, nine out of 10 of the survey participants said free shipping was the No. 1 incentive when asked what would make them shop online more often.
Add minimum order threshold
Probably one of the most popular methods is to set a free shipping threshold – the lowest purchase amount that entitles a customer to free shipping. Very often buyers add more products to their shopping cart just to benefit from it. This will help increase average order values and potentially boost profits within certain product categories. Offering free shipping can help customers spend just a little bit more to avoid shipping fees. After capturing customers’ psychology, let’s do this tactic.
1. Inform the discount
First of all, the information about the discount must be displayed on the pop-up, main menu, header, etc to inform customers. Example: “Free shipping in orders over $50”.
2. Condition not met
Let’s motivate your shoppers to add more items to the cart to achieve the goal by using the progress bar and message so that they could catch up with the target.
3. Condition met
Finally, adding some gifs or animations appeared when shoppers met the condition to have a coupon for free delivery.
Such findings appeared, among others, in the BigCommerce report published in 2019
“Up to 84% of consumers admitted that they’re ready to buy more to receive free shipping”
Common free shipping thresholds include $25, $35, $50, and $100, but you shouldn’t just choose one of those numbers without doing the math. So, how calculate a free shipping minimum spend threshold to minimize risks?
Chapter 5: Optimizing Cart and Checkout Content
The shopping cart and checkout stages are critical since this is where conversion happens. Everything else leads up to those stages. So how to optimize your eCommerce cart and the checkout experience to decrease the cart abandonment rate?
10. Always show shopping cart content
Most online shopping customers will keep the items in the cart and have no decision to buy even though they are interested in that product. Therefore, it is necessary to make sure the most prominent shopping cart icon is possible on every page to provide shortcuts for customers when they need to carefully check the selected items. If they can not find the cart, they will reduce the level of payment ready for the last time, which can lead to the cancellation of orders and loss of conversion.
Design your product pages so that the customer doesn’t have to look for the “Add to Cart” button. You want them to keep adding products, so make sure they can at any time in the shopping process.
It would help if you also placed the Cart icon on the top right of the page, where most people expect them to be. This placement is especially ideal for mobile shoppers. Make the shopping cart icon as prominent as possible on every page to provide shortcuts to customers when they demand to double-check their selected items.
- Show the pop-up to confirm “Item added to your cart”
- Fully displayed subtotal and quantity for customers to verify firmly before paying.
11. Provide limited-time coupon codes
Limited-time coupons are a great way to get shoppers to take action immediately. When taking the final checkout steps, customers are likely to grow more satisfied knowing that their orders are qualified for coupon codes including discounts on the selected products or shipping fees. Shoppers experience the fear of missing out (FOMO) when they know a discount code is about to expire. So they want to get in on the action before the offer ends.
According to Statista:
The majority (88%) of people look for discount codes throughout the product research process.
The cart abandonment rate goes up because customers think that they can get a better deal elsewhere. Discount codes, by their very definition, assure customers that they get a special rate that’s just for them. And when they receive these via email, they know that the codes are not available to just anyone.
Try to create coupon codes that require conditions to acquire and avail at a set period only. Secret coupon codes given to certain customers illustrate the advantages of multiple special purchases. Setting a deadline for the included discounts generates a sense of urgency that encourages customers to quickly close the deal. The coupon codes should be automated and operated with the help of other useful tools such as emails or additional confidential links.
12. One-page checkout
According to “Reasons for Abandonments During Cart & Checkout (2022 data)” of Baymard:
17% of shoppers abandoned an order because the checkout process was too complex.
Some typical criteria determine an effective checkout page that stores can keep in mind.
Simple one-step checkout
Displaying all checkout information on one page helps reduce mouse clicks that normally take much time to conduct while giving customers a better category navigating experience. Besides, a one-step checkout form will enhance page loading speed, decreasing cart abandonments compared to a multiple-checkout-pages process.
Allow guest checkout
Guest or social checkout allows shoppers to complete their purchase without entering unnecessary details, such as their birthdate or password, which helps reduce the friction purchase process and fasten conversion steps.
Remove unnecessary steps
People want as few steps as possible. Store administrators should manage checkout fields effectively and select the necessary ones that can optimize customers’ payment conclusions.
The standard checkout process for a consumer should be:
- Adding to the cart
- Billing details
- Shipping details
- Delivery method
- Preview order
Save customers’ information for next purchases
Customers only need to fill in their information once. Their name, email address, and shipping location are stored within the payment processor for future use, allowing them to breeze through the online checkout experience with one click when returning to the same website. Information about customers should be stored and auto-filled the next time they visit.
Chapter 6: Increase conversion rates with the “Add to cart”, “Buy now” and “Size chart” buttons
The CTA button (such as add-to-cart, Buy now) and the size chart are simple website elements that can transform your online conversion rate. Your shoppers may not remember what your button looks like or says, but an effective button can inspire a click and lock in their internal commitment to buy. Even the smallest design changes can turn casual browsers into buyers. We will show you some information and tactics to increase conversion rates with the CTA button and size chart.
13. Enhance the CTA (call-to-action) button
According to Unbounce, more than 90% of visitors who read your title also read your CTA content. Many people depend upon the CTA at the end of the page to take the next step. So omitting the CTA can confuse readers and hurt your chances of sealing the conversion. CTA buttons make it easy for customers to do what you want them to do. That’s good for them and good for business.
There is no exact science on how to make a CTA more effective. But even though there’s no “right” way to craft your calls-to-action, there are a few best practices:
- Select your button color wisely
- Consider a Button Hover Effect
- Button Placement
14. Show sticky Add-to-cart bar
Growth Rock has surveyed
Sticky Add to Cart Button Gets More Orders by 8%
When the content of the product is long, users often find it hard to click add to cart button because it is at the beginning of the page. This plugin will solve the issue by adding a sticky cart at the top or bottom of the page. It also helps visitors who use mobile devices easily add a product to the cart. The smaller screen on mobile devices, the harder to find CTAs like the add-to-cart button, so making the add-to-cart button sticky could improve user experience.
15. Add size chart
The main reason why customers are afraid to shop at the store or make online purchases is the matter of sizing. Many items require a fit of one type or another – sleeping bags, fishing rods, furniture… all need to fit the buyer. The instructions for choosing the ineffective size can make customers disappointed when making a conversion decision because they are not sure whether the items want to suit them or not. So, if we have such a small link of the size chart that does make a significant difference in conversion rate, that would tell us that the size guide link may have relative importance for certain apparel eCommerce sites.
Currently, the sticky bar and the size guide are available on CRO Buttons
(to be continued)
What Do You Think?
We’d love to hear what you think about our ECommerce CRO guide.
Specifically, what’s the #1 technique you’re gonna use in your store?
We plan to add more helpful tips to the guide soon.
Get Shopify store optimized for more sales with CRO Buttons