Page-by-Page CRO Tips & Tricks: Part I (Site-wide and Homepage)

This week we’re continuing our conversion rate optimization series with a list of impactful, yet easy-to-implement features across your Shopify site that will set you up for success in the new year.

We divided the features up by the page on an e-commerce website where it is most likely to make the largest impact on your conversion rate. Depending on your industry, products, site design, etc. these implementations may make more sense to add to a different page (or include on multiple pages) -- where applicable, we’ve made a note of this.

The decision of when and where to add features should always be informed by data. If you haven’t already, start with our simple guide to understanding your Shopify store’s traffic. 

With that out of the way, let’s get started:

Sitewide

Load speed:

Having a site that loads fast is something that most of us take as a given. That’s part of the beauty of building on Shopify -- in most cases, site speed is a non-issue. That being said, it's always better to be safe than sorry.

Here’s a quick way to check your sites performance using Google’s developer tools:

• In Google Chrome, open your site and then in the Chrome toolbar go to View -> Developer Tools. On the right-hand side you’ll see the Google Lighthouse audit window (we used this to check accessibility as well). Hit “Run Audit” and the first score you’ll see is the “Performance” score. Google will provide suggestions for how you can improve the performance of the site following the audit.

One of the most common reasons we see causing a slow Shopify store is an abundance of images and videos. We understand that users want to see clear, beautiful shots of products (more on this later) so we aren’t going to discourage you from doing so. However, pay special attention to the file sizes of the images and videos you’re using. One simple way to reduce the load burden of your image assets in particular is to use a .webp file in place of a .png or .jpeg

Mobile friendly:

For most e-commerce websites, a majority of the traffic comes from mobile devices. Thus, it is of utmost importance to ensure that your site is user friendly across both desktop and mobile.

Once again, this is where Shopify (and the community of theme developers) really make life easier for merchants. For the most part, Shopify themes are mobile-responsive from get go. 

Our rule of thumb is to preview any changes you make to you site on both a desktop/laptop and a mobile device.

Sensible navigation:

One of the most common issues we find when conducting a CRO audit is that it’s too difficult to find what most users are looking for. 

Common navigation problems (and solutions):

• Navigation bars that are missing important pages: Ensure that you’ve looked at Google Analytics and made your most popular pages accessible in the navigation

• Menu buttons that are hard to see (or disappear completely): This frequently occurs on mobile when a hamburger menu button is either too small or gets covered by other content. You can make the button bigger, change the color, and/or put a frame around it.

• No ability to search: There are a bunch of different search apps that you can add from the Shopify App Store

Homepage

CTAs:

Call to Action (CTAs) buttons and links are likely something you have across different parts of your site, but for most e-commerce sites they are concentrated on the homepage. There are four primary considerations when it comes to optimizing your CTAs:

• Placement/Position: It is typical to include a “Buy Now” or “Shop Now” in the Header/Hero of your site. You want to make it as easy as possible for users to get to the product page(s) and this is a great way to do so. For other CTAs, placement largely depends on the layout of your site. We recommend playing around with placements for a week or two at a time and checking the CTRs in Google Analytics. After you’ve tried a few different locations, choose the one with the highest CTR.

• Copy/Clarity: The most important rule to keep in mind when writing the copy of your CTAs is to keep them as clear as possible. The user should have a clear picture of the page they’re going to navigate to once they click a CTA. For example: Buy Now -> Product Page, Learn More -> About/FAQ Page, etc.

• Size: Don’t be afraid to make your CTA buttons big and bold! Yes, there’s definitely such a thing as CTA’s that are too big but in most cases we find that e-commerce tend to make their buttons too small rather than too big. If the buttons are covering other content on your site, then you’ve probably gone overboard (make sure to check on mobile too!)

• Color/Animations: Your CTAs should stand out from the rest of the content on your homepage and one of the best ways to do so is through color and animations. The color of your buttons should match you brand but don’t be afraid to make it pop. Adding mouseover animations to buttons are another great way to encourage users to click. The Fat Snax homepage is an awesome example.

Pop-ups:

While it may not be quite the level from the web of the early 2000’s, pop-ups are everywhere. The practice of homepage pop-ups in particular is so commonplace nowadays that most users expect it. 

The key to making an effective homepage pop-up is in the offer. You’re asking for a visitor, most likely a first-time visitor, to give you their precious email. In return, they expect to receive something of value -- usually a discount code or exclusive offer. A great way to check whether or not your offer is compelling enough is by comparing the total views of your pop-up to the number of form submissions.

• We also recommend delivering said offer or discount via email rather than immediately. This prevents users from entering a fake email and receiving the discount code.

Badges:

Highlighting products on the homepage that are the “Most Popular” or “Best Selling” is a great way to guide first-time visitors to your highest converting product pages. Plus, people tend to follow the lead of customers who come before them (social proof).

Chances are you already have those products on your homepage, you just need to add a badge. There are several Shopify apps that can help, you can do it yourself by simply uploading the product photos to and editor like Canva and creating the badges yourself.

• These badges should also be used on collection and product pages (where applicable)

Making CRO Simple 

That concludes Part I of our two-part series on page-by-page optimization tips for Shopify. Stay tuned for our next post where we’ll be talking about ways to drive more conversions on your collection, product, and checkout pages.

Remember, if you want some extra hands on deck when it comes to CRO on your site, the optimization experts on our team here at Simplistic are ready to help.