Ecommerce 9 min read

The eCommerce Storefront Preflight Checklist (2020)

Written on 22 Jan 2020

Launching a new eCommerce storefront can be nerve-wracking. There are so many factors to consider, and it’s understandable if you’re feeling a bit overwhelmed. Never fear! The CodeClouds team are here with a complete checklist of everything you need to get in order before you go live. We’re going to break it down by three major categories: nontechnical (content), factors that are a little bit technical, and very technical factors.

Pre_Launch Checklist
The Visuals 
How does it look? You can have the most functional site on the planet and it’ll send users running away if the creative design looks like it’s from 1997. If there are issues here you hopefully noticed them before you got to the checklist stage, but give everything one last look anyway, just to make sure it’s in order.
This also means having a coherent brand image with a strong, memorable colour palette that marks you out as distinct from your competition. If you’re looking to bring on a professional, CodeClouds offers affordable creative design services to make your website the best it can be.
There’s nothing that can take a reader from 100 to a screeching halt more than an unfortunate tpyo. Make sure the speling on you’re coppey is 100 % corect or you’l look like quiet the fooll.
Moving on.
Popups and Upsells
Ah, the humble popup. Probably one of the most maligned pieces of web design, responsible for tens of thousands of adblocker installs. In the wrong hands, a popup is an irritation and a waste of time. Even Google thinks so: they’ve added an SEO penalty for ‘intrusive interstitials’ that means too many popups (or popups that  are too large and/or hard to close) will hurt your rank.

They’re also one of the most potent CTA delivery mechanisms ever devised, and have proven positive effects on your metrics. Here’s the secret: you remember your bad popup experiences, but you don’t remember the good ones—a really effective popup interrupts enough to get its job done, but not enough to negatively effect the user experience. It’s a balancing act, but as a general rule: keep it simple. Remember, Google doesn’t penalise all interstitials, it penalises intrusive ones. Anecdotally, the threshold for being officially intrusive is very high: almost nobody has crossed it, and there’s a lot of very intrusive popups out there. If you find you have somehow gotten yourself a penalty, please read our guide to getting Google penalties removed.
The same rules go for upsells: they exist to be noticed, but it’s a delicate balancing act between making sure users see them and making sure users don’t get annoyed by them.
Did you know that 23% of all American adults have some form of arthritis? Certain layout choices could make life incredibly difficult for them, and then you’re driving away over 54 million potential paying customers just because you didn’t think to design with their accessibility in mind. Really, you should’ve been baking it in from the design stage, but if you’ve got to launch and this is the first time you’re considering it, maybe you want to start working out what you could change to get back on the level.
Contact Information
Have some sort of way for users to get in touch with you, and make it easy to find.
A few of our customers that run online stores have run into a strange issue related to this: their order form worked fine, but users were submitting orders via a comment on the blog because it was the only way they could find to talk to the owner directly.
By adding a big and visible CONTRACT US, the problem goes away. Not everyone wants to order directly from a shopify store, especially if it’s a type of product or server that they may need some custom details worked out first. Giving them another way to get in touch will give your overhead a boost.
It also makes discovering and diagnosing site issues much easier: users are accessing your site from an extremely wide variety of devices, operating systems, and networks, and that means they’re more likely to discover (and report) issues than your own team. Of course, there’s a way to ensure this happens as little as possible:

The Things that are a Little Bit Technical 

Cross-Browser Checks
One of the most frustrating occurrences in web development is when your site or web app worked fine during testing, but breaks beyond repair as soon as it shows up in a different browser. Look, we tested in Chrome because we all use Chrome …
Before going live, you need to perform some cross-browser testing to make sure it runs on all major browsers (and as many minor ones as you can test for).We like CrossBrowserTesting—it’s slow, but it’s safe and powerful, and it’ll get the job done.
Your favicon is the icon that appears at the start of the browser’s address bar. It’s one of the simplest ways to personalise your site. It’s a very simple thing, but it makes a website seem significantly more professional and improves user experience—your favicon will also appear in tabs in most browsers, making tabular navigation much easier.
caption: the CodeClouds URL with our favicon
Optimize Your Images
We’ve spoken about this topic before, but image optimization is critical in making sure your site runs smoothly. One of the main culprits we see for underperforming eCommerce sites is slow load time—if your page takes more than 3 seconds to load, 53% of your customers will leave before they even see it.
Some quick tips for getting your image sizes down:
  • Make sure they’re sized correctly for display: if an image is intended to be 500×400, don’t leave it at 3000×2000 and rely on HTML to do the resizing—the browser still needs to load the full image, and you’re adding a huge amount of load speed without getting anything out of it.
  • Clean up any irrelevant EXIF data that’s increasing their file size: users will never see (nor will they care) which sort of camera the photo was taken on, and leaving in certain EXIF data like geographical locations can create security issues.
  • If you’re planning to do resizing/editing to get things to fit, use a lossless format like .png when editing that won’t degrade in quality when you chop it up. You may also want to consider using these formats on your site for things like logos and non-photo images. Not only are they lossless, they often can be smaller without JPEG compression if there’s a lot of solid colors.
  • Fonts are images too! Specifically, a font pack is a collection of vector files that get turned into rasters by your browser. Poorly-optimized fonts are a sneaky one that developers often miss, but when you’re trimming by the millisecond they can really hurt. We recommend you use web fonts instead of system fonts: they’re optimized better for web display, and can help you shave down those critical seconds.
The Big Link (and Form) Check
  1. Identify every link on your site
  2. Click every link on your site to see it goes where it’s meant to
This is simple, but it’s also a job that a lot of site owners don’t prioritise because it’s boring, fiddly work. It’s also really important. One of the most common exit pages on the internet is the 404. A 404 means you’ve broken a promise to the user, and that makes them like you less, and that makes them more likely to leave. Check every link, and check it twice.
The same goes for forms: if a form doesn’t work as expected, the odds of a user bouncing skyrocket. How are they meant to trust you with their credit card information if you can’t handle a signup sheet?
Make a spreadsheet of every link and form on your site, and go methodically through them and tick them off only once you know they work as expected.

The Very Technical Stuff

Your XML Sitemap
A properly-configured XML sitemap is crucial in your SEO—it helps the crawlers navigate your site. There are a number of programs that can automatically generate this for you, or you can ask your team to do it—the former is cheaper and faster, but if your site is more complex then you probably want to make sure an actual human is behind the keyboard.
You’ll then need to add your sitemap to the site, and submit it to Google via the Google Search Console. The path you want to follow is Dashboard → Crawl → Sitemaps → Add/Test Sitemap. Once you’ve uploaded the file and you feel like it’s ready to launch, hit submit and you’re done.
SSL Certificates
Post-GDPR, a number of browsers have started to introduce blockers that stop users accessing your site entirely if it:
  • Asks for credit card information
  • Doesn’t have an SSL certificate installed
Thankfully, the price has dropped sharply in the last few years as well: in the past, they were going for hundreds of dollars apiece, but now it’s relatively easy to get one for free. How installation works is going to vary based on your server and operating system: we’ve got guides for free SSL installation on Ubuntu 14.04 and Let’s Encrypt provides a variety of free certificates with excellent documentation. If you need help with this, you can always hire our ecommerce developers to remove any technical stress.
Users are also becoming more security-aware, and many won’t buy from a site that lacks the padlock in their browser’s URL bar.

The Checklist

I have:
  • Finalised visual design and branding
  • Proofread the copy
  • Made popups, upsells and CTAs inobtrusive
  • Cross-browser testing has been carried out
  • Set up my Favicon
  • Optimised my images
  • Checked all links and forms
  • Configured the XML sitemap
  • Installed an SSL certificate
Site development is never done: that’s why we call it development. It develops over time, building on what works and putting away what doesn’t. It’s an ongoing, iterative process, and it’s hard to say conclusively when a site is done. That’s why our teams work on a subscription service—once a site launches, there’s upkeep, maintenance, and constant development, and we wouldn’t be doing well by our clients if we dropped off the map after the site launched.
hire our ecommerce developers      
Which is a lot of preamble to say: this checklist ensures your site is ready to launch, but don’t rest on your laurels. And hey, maybe give our five-star web developers a call. You won’t regret it.

Share this article

  • twittertwitter
135 reads

Similar Reads