The average conversion rates for eCommerce sites sit somewhere between 1%-3% (not that great, if you ask us.)
Reason enough for you to double down on improving your conversion rates. A top priority on your radar: your product pages.
A frictionless, fast-loading, and high-converting product page is no longer a good-to-have but a must-have .
To do that, you have to go beyond just big images, visible CTAs, and effusive customer reviews. You have to go deeper into psychology, UX, copy, and design.
In this post, we do just that: take you through the oft-discussed points that only the crème de la crème of eCommerce sites use to boost their conversion rates (and now they’re YOURS!).
Let’s dig in.
Psychology 1. Communicate product availability BEFORE checkout What’s the one thing customers dig the most? Transparency .
They prefer the truth, even if it doesn’t benefit them. Edelman’s report finds that 90% of customers desired more transparency from companies. This is because with transparency comes credibility. With credibility comes conversions.
How to apply this psychology to your Shopify product page? Think of the stock meter .
When a visitor adds a product to the cart from your product detail page , they expect that they’ll be able to purchase it.
Their minds are full of the anticipation of gratification. Imagine then the disappointment when they reach the checkout page and find out that the product is out of stock. The anticipation will turn to resentment, and they will abandon the cart, never to come back again.
How can you solve this? Break the news about your product availability near the add to cart button. This prepares them for the bad (or good) news, and they can plan their purchase accordingly—maybe shop for substitutes.
For example, Karmaloop highlights an out-of-stock message on its product page. It even goes a step further and helps to notify the customer when it’s back in stock through email.
There are several Shopify apps you can use to enter stock information for your products and send out-of-stock notifications to customers. You can also update it from the Shopify admin panel.
2. Use price anchoring to boost the customer lifetime value Here’s an interesting fact: the prices of products don’t matter to customers as much as their perception of them.
Let us explain. Customers view prices relatively. For example, if they view a $3000 watch, they may find it to be expensive. However, when they see the same price beside a slashed price of $12000, it seems cheaper.
Why does this happen? Because of the anchoring bias .
It’s a cognitive bias where humans tend to relate to the first piece of reference provided to them. In this case, the first price point offered. This acts as a reference for them to base their decisions or judgment on additional information.
How can you use it for your products? Most retailers already use price anchoring to push their products.
You can do things a bit differently. You can display the price of both an individual product and a bundle that includes the product. While the bundle may be at a slightly higher price, however, it offers more quantities or more types of products compared to just a single product. You can highlight the value customers will get from choosing the bundle.
This way, you can not only increase the average order value of purchases but also guarantee repeat purchases.
Huel’s Shopify site is a great example of using price anchoring to boost customer lifetime value .
By choosing more quantities of meal boxes, customers can bring down the total order value considerably.
Huel even highlights the savings shoppers can make with a small popup box that crops up when they click the See Savings option.
3. Stick to familiar icons Customers are humans too. They too are driven by emotions.
One of the primary emotions that work in them is fear . This can manifest in multiple forms: fear for the unknown, the hidden, or the unfamiliar.
As retailers, your job is to keep their fears to a minimum and ensure they are at ease. An easy way to do this is through familiarity .
It’s a simple equation:
Familiar = Safe = Trustworthy
Trust plays a huge role in conversions . You can drive your customers to trust your site by using familiar elements on it.
Here’s an example from Helm.
It uses universal icons for the Ask a Question and Write a Review option. Even if customers don’t read the accompanying text, they can still understand the action they need to take.
The same goes for the icons in the top right corner. It doesn’t take a second guess to know that they refer to Search, Account, and Cart. Hence, they don’t have accompanying text too.
Finding these familiar icons can improve the user experience on your Shopify product pages and reduce the shock and anxiety in your customers.
Some tips to include familiarity in your icon designs are:
Use accompanying text if icons have multiple meanings. For those with conflicting use cases, it’s better to be on the safe side and add accompanying text. Don’t go for out-of-the-box creative designs. Keep them simple and realistic. Adjust icon size for touch. Remember mobile usability while designing the icons. The recommended target size is 7 to 10 mm. UX 1. Offer easy customizations Imagine visiting a coffee shop where the coffee served already has sugar added to it. Even if it’s a coffee you really like, you’d still want to have the option to customize it as you please.
The same goes for products. Every customer is different; a one-size-fits-all product doesn’t justify their needs.
The answer to this: personalize, personalize, personalize.
Great product page UX offers customizations at each stage to offer customers a product that’s tailored for them.
Here are some of the customizations you can offer to your customers:
Size chart (include international sizing conventions + show measurements in both cms and inches)Currency converter (set up international pricing models and rounding rules to avoid charging extra from customers)Shipping location (use AI-powered geolocation picker so that customers don’t have to)Delivery confirmation (confirm if delivery is possible to the customer’s location)Shipping charges (display estimated shipping charges based on location) 2. Help customers consume product information easily The eCommerce space is super competitive now. Visitors now expect to get things fast on retail websites. If they don’t, they have the option to move to another site.
As a retailer, you don’t want to waste the user’s time trying to figure out where they’ll find what they’re looking for. Or expect them to embark on a treasure hunt through a complex navigational jungle to purchase something.
You’ve to help them consume the content on your site easily without any guesswork.
One of the ways you can do that is by using visual dividers .
They are product page design layout elements that separate the different types of content on your Shopify site into clear sections. This makes the layout easily digestible for users. It also orders the page into specific patterns, thus shaping visual perception.
You can use different types of visual dividers such as lines, colors, negative space, images, etc.
Here’s an example from the Helm Boots website.
It uses images and boxes to divide its sections and succeeds in creating a visual contrast. It also helps users to consume the information easily and glide between different sections.
Another way to lead users along the content on your homepage is through directional cues .
They are user interface elements that guide users to specific content or actions through visual hints. Just like how road signs tell you which way to go, directional cues take users forward in their journey in the online retail space.
Since users make decisions in a matter of seconds, directional cues need to be effective enough to lead users to conversion-friendly elements such as CTAs, add-to-cart buttons, checkout pages, etc.
Some of the most popular directional cue elements are arrows, pointers, eye line directions, etc.
See how Choose Muse uses the eye gaze to direct users to the product benefits.
You can use Shopify’s Theme Editor to create dynamic sections on your product page. You can create different types of theme blocks from the theme editor. For further customizations, you can directly edit the codes through Shopify Developers.
3. Consistency - an underrated conversion driver How would it feel if you visit a website where every page looks different? It’ll make you hesitate to trust the brand because you won’t know what to relate to.
The same happens when you get creative and design your product pages differently. This is especially when you have multiple products under your wing.
In eCommerce UX design, consistency is key to garnering credibility. The way to achieve consistency is keeping your product design and elements uniform, irrespective of the channel. This reduces cognitive load and leads to a smoother user experience.
Consistency can manifest in both internal and external design. Internal consistency is when all features and elements of your brand act as a single unit. For example, all the CTAs on your page are of the same color and are designed in a similar fashion.
Gymshark’s product page follows the same color code of blue for all its elements - CTA, review sliders, etc.
External consistency is when your design elements follow the same standards and principles as other brands in the industry. An example of this can be using the cart symbol for an add-to-cart option or underlining clickable texts.
Ban.do follows the common UX principle of changing text colors to highlight that they are clickable.
When a visitor hovers their mouse over Ban.do the link changes from black to red.
Even in the case of the CTA, hovering the mouse over ‘Add to Bag’ changes the color of the button from black to white.
Copy 1. Describe your product more with verbs than adjectives We don’t know about you, but we will definitely fall for the ‘4-in-1 convertible crib that can easily convert from a crib to a toddler bed, daybed, and full-size bed ’ than the ‘3-in-1 best-selling convertible crib with a versatile modern design ’.
The first product tells the customer what they can do with it. The second simply lists out the features.
I’m sure you must have heard about the ‘benefits over features’ argument aplenty. But how do you actually do it with your copy?
Here’s the trick: use more verbs than adjectives.
Let’s go back to our original example. See how the product description describes an action with its copy? This does three things - places the product in a relatable real-life scenario, explains how to use the product in multiple ways, and proclaims how it will benefit the customer.
The second description merely uses hollow, empty, and ambiguous adjectives to describe the product—one that the customers can’t verify. It’s difficult to quantify the product benefit too - how on earth do you relate ‘versatile modern design’ to a tangible benefit? Moreover, it lacks visualization: a ‘best-selling convertible crib’ doesn’t offer the same visual image as a ‘crib to toddler bed, daybed, and full-size bed’ does.
Let’s look at another example.
Here’s how Vetta Capsule describes its summer dress.
It pairs verbs with adjectives - ‘dreamy smocked dress to frolic in’ . It also uses verbs such as ‘Tie the ties’ and ‘wear it with’ to communicate how to use the product as well as offering ideal suggestions and pairings. Two birds with one stone!
Now, let’s look at another one from Outerknown .
Apart from the description being painfully short, it offers little scope for the customer to imagine how the product can be for them. The stock adjectives such as ‘exceptional’ and tired phrases such as ‘you’re going to want in your closet this season’ don’t do justice in fully convincing the customer to purchase it.
2. Avoid jargon-heavy copy If you’re still puffing up your copy with jargon, you’re doing it wrong. All those insider terms that make your product look exclusive don’t work if the customer doesn’t understand them.
You may want to argue that these are everyday words you use for your product. Probably, but you’re using it with YOUR staff, YOUR employees. Imagining that the customer will also be aware of them is taking it too far. And if your customer doesn’t understand what you want to say, they won’t buy from you.
Instead, write your copy that even a 10-year old can understand. If it’s not simple enough, it’s not conversion-friendly enough.
Here are some quick tips to cut out the jargon from your Shopify product page copy:
Who’s your audience - Find out how your target audience communicates in real life. You can gather this from their website and their social media channels. Once you know this, tailor your copy style to mirror their communication style. Are your customers proficient with industry buzzwords? Go ahead and use the technical terms in your copy (DON’T use them just for ornamental purposes). Do your customers like speaking in an everyday language? Explain stuff in simple and detailed language for them. Break down difficult concepts. Keep your vocabulary clean - Prune out the fluffy buzzwords. Phrases such as ‘Haute couture’ should go for good. Avoid acronyms, or qualify them first before using them. Stock-keeping units (SKUs) make more sense than just SKUs. Do away with pretentious sounding words. ‘Needs’ sounds easier to read than ‘requirements’ . Break down complex ideas - Does your product offer a unique benefit that needs some explaining? Do customers need instructions to operate your product? In cases like these, you can condense your points into bite-sized pieces so customers only have to know the vital facts. Leave out the tedious details if it doesn’t concern the customer. Use examples and visual imagery wherever possible. Check out this example from Kate Spade .
See how it explains the collection in such a lucid language—as if talking to a friend. Even when it drops technical terms, it makes it a point to explain them for everyone to understand.
3. Mirror your customer’s communication If you’ve spent nights trying to find unique points and perspectives to add to your product copy, you’re not alone.
It’s not easy to come up with original ideas to market your product. Even the best of business owners fall short in this respect.
What do they do? They get inspiration.
Quoting Austin Kleon, author of Steal Like an Artist: 10 Things Nobody Told You About Being Creative, “What a good artist understands is that nothing comes from nowhere. All creative work builds on what came before. Nothing is completely original.”
A good place to start when you’re out of inspiration is your customers. Top retailers listen to their customers and speak their customer’s lingo.
Some of the places you can scour to collect your customers’ opinions are:
Review sites such as Google Reviews, Trustpilot, etc. Forums such as Quora, Reddit, etc. Social media Retail platforms such as Amazon, Walmart, etc. Here are the things to look at:
How customers describe your product or a product similar to you The benefits they feel they get from the product Specific factors that they don’t like about the product Reasons that make them hesitate to buy the product The real-life problems that they say their product solves Analogies, words, and phrases they use Most of these will fall into any of the three categories: hopes and dreams, pains and fears, and barriers and uncertainties.
Hopes and dreams are what customers want to achieve with the product.
Pains and fears are the problems the customer faces.
Barriers and uncertainties are what stops the customer from getting the right solution.
Classifying the customer opinions into these categories will help you address each of them clearly. Your Shopify product page copy can then particularly use the same language to relate to the hopes, pains, and uncertainties of similar customers.
This will make your copy super relatable and one which will make the product a value-addition in their lives.
Design 1. Get as close to a visual demonstration as possible With your awesome CRO efforts, you’ve brought your visitors to the product page. Now what?
What really makes your users stop browsing your products and start desiring to have them? The feeling of being able to experience the products up close.
This happens through your product images. They are the ones that hook your customers and tip the scale towards a purchase (when done right).
In online shopping, the screen always comes in between the customer and the product. Technology has been bridging the gap between the real and the virtual experience a lot.
With a few tactics, you can make your product images seem larger than life to your visitors too. Here they are:
Offer multiple product angles - Many high-traffic sites still offer only about one or two product angles. Not enough! Customers often visualize how it’ll feel to use the product. Displaying the product from different angles clears any confusion about how big or small it can be, how it’ll fit, etc. Burga offers customers a real-life experience of holding its product.
Give them a 360° tour - Want your customers to be immersed in your product? Offer them a virtual shopping experience with 360° product photography. You can go for in-house product shoots with the right equipment for a 360° effect or use Shopify’s very own Magic 360 app to offer a unique viewing experience. Heal’s integrates an immersive 360° experience on its product page.
Show products in use by customers - Social proof is a huge incentive to purchase. When visitors see customers using a product, they feel the innate need to buy it too. You can add a social feed to your product page showcasing customers using the product. Or you can add stunning photographs of your products in use.You can also do what Patagonia does and add a video of people modeling for your products.
2. Don’t forget to keep it simple Most often, retailers are so engrossed in fortifying their product page that they forget about the end-user experience.
When your customers are on your product page, they are one step away from buying. Bombarding them with too much information or throwing too many elements at them will overwhelm them.
In any case, customers suffer from buying anxiety right before they purchase. A cluttered product page design will only add to the cognitive effort.
Keep your design as simple as possible so that users don’t have to process too much. Allowing lots of negative space also lets your elements breathe. It makes your product images stand out and helps consuming information easier through improved readability.
For example, imagine landing on a site like Kylie Cosmetics .
While the design matches the product range, there’s still too much happening for the customer to process and take action. Moreover, the product images aren’t easily visible with the intrusive top and bottom elements.
In contrast, Milk’s product page is soothing to the eyes.
The product images make an impact because of the negative space around them. The information is also displayed in a minimalist way which makes them easy to consume.
When choosing the theme for your Shopify product page, make sure you keep in mind the ultimate user experience. Don’t go greedy over shiny features. Remember, simple sells.
3. Display additional information intuitively The buying decision depends on a lot of factors. While there’s the impulsive desire to acquire the product, there’s also the practical information-gathering side that tries to justify the purchase.
You should design your product page for both. While your attractive images may do the trick of hooking them emotionally, the additional product information will take care of their practical concerns.
These are some of the added elements that can seal the deal for your customers:
Offer an international size chart near the size selector Offer model measurements for model photos Offer a units converter near product/model measurements Offer a currency converter near the product price and shipping cost Offer a how to use/care instructions after the product description Offer a stock meter to show available stocks for all sizes, colors, and variations It’s the little things that matter. All these subtle convey to the customer that the brand cares for them. This adds credibility and makes the visitor trust the brand more.
Avoid overwhelming the customer by displaying the information all at once. Let the users choose which information they want to see. You can fit information into collapsible tabs for a cleaner and minimalistic look.
Argent’s product page sports a clean look.
Firstly, it does a good job of segmenting the color option into core and seasonal, thereby setting customer expectations right from the start.
Next, they arrange the extra information in neat little tabs that open and close with a click.
These elements make the product information readily available yet don’t distract the user’s focus from the product.
.svg)
.svg)
.svg)
.svg)
.svg)
