Skip to content
Susan Wu11/9/20216 min read

5 UX Design Best Practices for Shopify

 So, you just built your first eCommerce website on Shopify Plus. Or maybe you’ve had a successful site running for quite some time now. Regardless of where you are in your eCommerce journey, we’ll assume that at this point you have the general framework of your site setup, and maybe you want to give more attention to the user experience. 

User Experience is the primary function of every eCommerce storefront

User experience (UX) is pretty much exactly what it sounds like. The customizations in this area focus on the user (i.e. your customers) and how they are interacting with and USING your site. You want this experience to be as intuitive and seamless as possible, so you can avoid any snags or confusion throughout the customer journey. Anyone who makes their way to your site should be able to get from point A (browsing products they like) to point B (adding said products to cart) and, ultimately, to point C (completing their checkout) effortlessly. 

The industry's best Shopify Plus designers 

Now, when it comes to designing your Shopify Plus site, we always recommend letting a certified Shopify Plus Web Designer (like BlueSwitch!) handle the execution. However, one of the great things about Shopify Plus is that, from a UX standpoint, it’s generally an intuitive platform. Shopify Plus comes equipped with a variety of design themes to choose from, which is the starting point. Many of the themes have already pre-emptively addressed a lot of UX issues that could occur.

So, most of what we are going to cover here is focused on the user experience in relation to Shopify Plus and how you can fully utilize Shopify Themes to create customizations for your audience. Read on for five UX Design Hacks you need for your Shopify Plus site. 

 

Google_site_speed_screenshot_of_Dawn_Theme


Check Your Theme’s Page Speed

The first thing you want to do is assess your Shopify Plus theme’s page speed. This is a measurement of how fast the content on your page is loading and how long it takes for the end user to experience the page. It’s important to assess this early on, so you can start off with a better foundation for your site. (Ideally assess this before committing to a theme). It’s important to note that not all Shopify themes are equal and some will perform better than others in terms of site or page speed. 

You can check your page speed using online tools such as Google PageSpeed Insights or Lighthouse. Google PageSpeed assesses by categorizing your site speeds into colors (red is slower, green is faster). The closer your color is to green, the better. Lighthouse, which is also accessible through Shopify’s dashboard, gives you a score and compares you to similar stores. Always aim for a higher store. 

To avoid slowdowns, use only the apps you need

Keep in mind that there are many factors that will ultimately affect your site speed. Customizations and adding on apps will inevitably slow you down. This is why it’s important to assess this on the front end. If you know you’ll need to add on various apps to manage business requirements, you’ll want to start off with a theme with a faster site speed to accommodate that.

Coworkers_drawing_out_wireframes_on_whiteboard 

Map Out User Flows

This step ideally should also happen before you ever select your Shopify Plus theme. It’s important to note that user experience is never one size fits all. It should be customized to your store, your products and your customers. 

That’s why your first step, before you do anything else design-wise, is to map out your user flows. A user flow is basically a diagram (or flowchart) that shows the complete path a user will take when they are on your site. This maps out their step by step journey from start to finish (as when we talked about getting from point A to point B to point C). 

Once you know the steps your user will take on your site, compare this flow to the Shopify Plus themes you are looking at. Make sure the one you choose aligns with what you need your customers to be able to accomplish according to your flow. This will make it easier for you when you’re designing the rest of your site and require less customization. 

 

Prioritize Functionality Criteria

This next hack goes hand in hand with mapping out your user flows and should also be considered when you’re selecting the right theme for your site. Write up a list of functionality criteria you’d like for your site to have. This could be anything, ranging from filtering options for your product catalog to video functionality. A Shopify Plus certified UX designer can also help you nail down the essentials here.

Keep in mind, Shopify is somewhat of a pre-packaged platform. Sure, there is plenty of customization that can be done, but the idea is to get the most out of what’s already included for you. It’s easy to choose a theme based on the general aesthetic and feel of your brand, but if it can’t perform all of the functionality your store requires, it’s useless. 

So, find a theme that checks off as many of those functionality boxes as you can. Whatever you’re missing can be supplemented by apps, but don’t lean on those too heavily. Apps don’t always play nicely with one another, so you risk slowing down your site the more you have. Ideally, your theme should be doing most of the heavy lifting here. 

 

Optimize Your Site Architecture

This step is key and should be highly customized to your target audience. Focus on which customers you want to target and don’t be afraid to get specific. If you have a prior site, heat maps, or other customer data, use that to inform your targeting and base your site structure on that. Your site structure should be based on that. 

Organize it in a way that makes sense. Your main navigation should be focused on the broader categories and then make its way down to the filters that allow users to narrow down what they’re looking for. This will differ depending on the size and variety of your store’s catalog. The navigation should be intuitive for your customer. 

The natural flow of Shopify Plus navigation looks like this: 

Homepage > Collection Page > Product Detail Page > Checkout

 

Have Guest Checkout Option

Our last, but certainly not least UX design hack is fairly self explanatory: Set up a guest checkout option on the backend of Shopify Plus. This is one easy thing to check off your list that is extremely important to the user experience. 

The truth is, not everyone is going to want to sign up for an account or input all their info to place an order. Many of your customers are not going to be frequent shoppers and so a guest checkout gives them the option to still make a purchase, with less hassle and commitment on their end. 

We're Certified Shopify Plus Designers

All in all, these “hacks” are meant to make not only your site’s user experience better, but your life a little easier when it comes to designing a site that does what you need it to do. The good news is, Shopify Plus is a platform that does most of the work for you.

All you have to do is decide what is most important for you and your customer and Shopify will make it happen. And, when you work with a certified Shopify Plus Web Designer to build your eCommerce site, this process becomes even more streamlined and simple. 

avatar

Susan Wu

Creative Director @ BlueSwitch

RELATED ARTICLES