Ten Proven Ways to Boost Conversion On Your eCommerce Website

📖 7 Minute Read

———

Website design can make or break your eCommerce business. Nearly half of people base a brand’s credibility on its web design alone.

Your website needs to deliver the best possible user experience if you want your eCommerce business to grow. To do this, you need to design your website with conversion optimization in mind. This means making deliberate, thoughtful adjustments to the copy, layout, and visuals of your website so that it motivates your audience to purchase. 

Here are ten proven steps to optimize your eCommerce website for conversion.

Step 1: Design for mobile-first

Three out of every four dollars spent on online purchases in 2021 were spent using mobile devices. To make sales, your website design needs to cater to the mobile shopping experience.

Here’s how to design a mobile-first website:

• Work within a mobile preview when you’re designing or updating your website. Shopify and Squarespace both let you toggle between mobile view and desktop view really easily. 

• Then, preview your site on desktop to make sure the design flows nicely on a larger screen. 

Designing for mobile first will give you less space to work with, which will force you to prioritize the most important information and be concise with your copy. It’ll also make designing your site for desktop much easier, since the most essential features will already be front and centre.

Canadian outerwear brand Rudsak (rudsak.com) prioritizes their mobile experience with images and copy that fill (but don’t overwhelm) smaller screens.

Step 2: Grab your audience’s attention right away

When someone first visits your website, it takes them less than a second to form an opinion about your brand. 

Your website’s hero section (the area on your homepage right under your logo and menu) is the first thing visitors will see, and it needs to communicate these four things:

1. What you sell

2. Who you’re selling to

3. What makes your brand unique

4. What to do next

Speak directly to your ideal customer with a bold image, one or two concise lines of copy, and a clear call to action (or CTA).

Here’s a great example:

Non-alcoholic wine brand Proxies (drinkproxies.com) greets their site visitors with a bold photo of their product and a clear description of what makes it unique. They also invite visitors to start shopping right away with a clear “Shop Now” CTA.

Step 3: Use strong CTAs

Every single section of content on your website should end with a call to action, or CTA, that deliberately tells visitors what to do. Be as bold and as brief as possible when writing CTAs. 

Here’s a few examples:

• Announce a new collection with the CTA “SHOP SPRING ‘23”

• Drive traffic to your sale items with “SHOP SALE”

• Guide visitors to your About page with “READ OUR STORY”

Rocky Mountain Soap Co. (rockymountainsoap.com) uses multiple CTAs on their website to call attention to specific products. This guides visitors to different pages, and motivates them to shop.

Step 4: Be consistent with colours and fonts

How do you want your customers to feel when they use your products? Relaxed? Energized? Joyful? Pick two or three colours that align with this feeling, and use them across your website to create a cohesive brand mood.

Then, choose two fonts that align with your brand’s mood, and use them consistently across your website, too. 

Some tips for choosing fonts:

• Make sure your fonts are readable. Use serif fonts sparingly. 

• Use fonts that look good together. Use Fontjoy to find cool font pairings.

• Don’t use the default fonts that come with your website template. Instead, use Google Fonts to find the fonts that fit perfectly with your brand’s mood.

You can edit your website’s fonts and colours in your Squarespace Site Styles or in the theme settings of your Shopify store. Incorporate the same fonts and colours into your social posts and marketing emails to create a cohesive brand identity across touchpoints. 

Auric Cosmetics (auriccosmetics.com) uses shades of gold and pale pink throughout their website alongside clean, sans-serif fonts. This creates the same feeling of modern luxury that customers feel when they use their products.

Step 5: Invest in video assets

Hire a videographer to create one or two short videos that showcase your products in action. Use these assets on your homepage, in your About page, and in your product pages. 

Videos are more engaging than photos, and they help build trust with eCommerce customers by offering them a more life-like display of your products.

Here’s a great example of how video can engage customers:

Ethical clothing brand Advika (advikaclothing.com) welcomes visitors to their website with a short video that showcases their brand aesthetic, target audience, and product features in under 20 seconds.

Step 6: Get your products professionally photographed

Hire a professional photographer to capture and edit your product photos. Even if you don’t invest in professional photography across your website, doing so for your products will deliver so much value for your business, including:

• Give your entire catalog a consistent look and feel

• Make your products look higher quality and more expensive

• Improve customer trust 

• Boost overall brand credibility 

Canadian luxury outerwear brand Sentaler (sentaler.com) uses the same colours, angles, and presets for all of its product photos, improving the overall shopping experience. 

Step 7: Animate elements of your website

Your website’s visuals should respond to a visitor’s scroll and cursor movements. Add animations to your website to draw visitors in and make them more likely to click CTAs, explore pages, and make purchases.

Here’s how to add animations in Squarespace:

• Enable site-wide animations.

• Use block animations to make individual images, quotes, and text blocks move as visitors scrolls past them.

How to add animations in Shopify: 

• Choose a Shopify theme with ‘animation’ listed in its Merchandising features. This will let you add various animation effects to the images on your site.

• Enable image rollover in your Shopify theme. This will give visitors an alternate view of your products while they browse your catalog. Here’s an example:

Canadian hair care accessories brand Flirty Pineapple (flirtypineapple.com) animates their product browsing experience with image rollover animations.

Step 8: Take your About Us page seriously 

Your website’s About Us page should tell the story behind your business. It should humanize your brand and give your audience a distinct reason to choose you over a competitor. 

Here’s how to write an About Us page that sells:

1. Start by introducing the problem that inspired you to start your business. What conflict does your audience experience that your products solve?

2. Then, describe the process of finding a solution to this problem. Describe the experience of starting your business, and the challenges or setbacks you faced along the way.

3. Be specific about what makes your solution (a.k.a. your products) unique. What’s different about your materials, fabrics, or ingredients? Where do they come from? Why did you choose them? 

Here are some bonus tips to make your About Us page stand out: 

1. Write from your own voice as the brand owner. This helps your audience feel a personal connection with you, and your brand by extension.

2. Put a professional photo of yourself at the top of the page. Include photos of your team members, too. Seeing the faces behind your brand will boost your audience’s trust.

3. Break up your About Us copy with headings, images, and icons to make the page more visually appealing and easier to read.

Toronto jewelry store FTJCo (ftjco.com) uses their About Us page to share their brand’s history, from the early days to their most recent accomplishments as a fair trade jeweler. This deepens the trust that customers have in their products.

Step 9: Use icons to draw attention to key selling points

Website visitors are impatient; they don’t read long paragraphs or walls of text. 

Break up your website’s copy into memorable, bite-sized selling points with iconography. Icons clarify your messaging and make your products appear more trustworthy.  

Toronto-based tea brand Tealish (tealish.com) and non-alcoholic spirits brand Seedlip (seedlipdrinks.com) both use iconography on their websites to visually communicate their brand values and product features.

Step 10: Optimize your site speed 

Once you’ve incorporated these tips into your web design, you’ll need to make sure your site loads as quickly as possible. 

The longer your site loading speed, the more likely visitors will bounce. Research from Google says that 53% of visits to a mobile website are abandoned if the site takes longer than 3 seconds to load. 

Here are some easy ways to boost your site speed:

• If you’re using a hosting platform like Shopify or Squarespace, limit the number of third-party apps installed on your site. Apps slow your website down.

• Replace large image files with smaller ones. Shopify has a handy image resizing tool that will shrink large image files down so that they load faster on a website.

Implement these tips, and then run a quick PageSpeed test to see how your website’s different pages are loading on both desktop and mobile. Keep running these tests regularly to see how changes to your site affect its loading speed. 

Remember that even small improvements to your loading speed make a big difference. Research from Deloitte says that improving your load time by as little as 0.1s can increase your site’s conversion rate by 8%.

———

Subscribe here to get eCommerce insights delivered right to your inbox each week.