We conducted hundreds of UX audits of online stores in the past five years and noticed that Shopify-based sites have some common issues. In this article, we provide practical tips on how to avoid the most common usability issues on Shopify that prevent users from purchasing and, thus, affect the main KPIs of online stores andincrease conversion rate of Shopify store.
Note! Due to the NDA, we can’t share the info about our clients, so we add the examples of the Shopify sites with the same issues.
10 common UX/UI issues and best solutions
Here is a list of the most widespread interface mistakes found that affect user experience and, as a result, can decrease the conversion rate of online stores.
1. Homepage: big banner and no CTA
Most of the problem is a large banner, without any call to action. So the user enters the site and there are no entry points: no products to see or anything to get interested in, no promotions to look at, no new arrivals, and so on. In other words, there's nothing to engage the user on the site.
Here is an example of big banner without a CTA on the first screen
So, to increase conversion rate Shopify sites, we recommend using banners with current promotions with clear CTA visible on the first screen. It will inform the user about what he/she can get at the online store and help you engage the visitor to go deeper on the site.
On this site, here is a banner with the current promotion that captures the user's attention, and here is a clear CTA to engage the customer to go deeper
2. Not fixed upper navigation
The top navigation is not fixed, and there is no button to jump to the top of the page. That slows down the interaction with the site because the user is to scroll for a long time when it's needed to go back to the menu, for example.
The example of not fixed upper navigation on the site of online store developed on Shopify platform
It’d be better to fix the top navigation so that the users always have access to it whatever the position on the page. Also, it is worth adding a “Back to top” button in the right bottom corner to hasten the interaction and increase conversion rate.
An example of fixed header and “Back to top” button in the online store Orner
3. No shipping & returns pages
There are no pages of Shipping and Returns in the header of the site. The user is to search for the information on the site to get all the terms and conditions when needed.
Here are no links to Shipping and Return pages in the header
Yet, such important information as shipping and returns should always be clearly visible and easily accessible to the user. That increases the trust in the brand (customer loyalty), so we recommend placing links to these pages both in the footer and in the header of the site.
Example of links to the Shipping and Returns in the header of the site
4. No live chat and contacts
When the user needs quick help or advice, he just can't get it, since there are no contacts in the site's header and no Live-chat in the lower right corner. The user is to scroll to the page bottom to get the contacts of the Help Center and/or a link to the Customer Support page.
An example of the online store site without contacts and live-chat button
To increase conversion rate Shopify-based online stores, we recommend adding the contacts in the fixed site header so that the users have access to the help center whatever the page and position on the page they are on.
This example includes all of our recommendations: Live Chat in the right lower corner of the page, contacts, and a link to the Help Center in the site header
5. Site search gaps
When typing a query into the search bar, frequently a list of items or just pictures or products are displayed on Shopify online stores.
Here the product drop-down list appears in the search when entering a query. However, if the user doesn't know 100% what s/he is after, or if s/he is searching for a product category where the item sought can be found, then such a product list doesn't actually help the user, while long lists only make the search more difficult.
We recommend displaying prompts with the most popular queries, related queries, and so on, just like they do in Google. Such prompts speed up the search for goods because there is no need to enter the entire query, but to choose the appropriate one from the list. So not only do you shorten the customer journey, but you also demonstrate customer care, which also contributes to the customer's loyalty to the brand and helps to increase conversion rate.
On this site, the search tool hastens the process by providing the relevant product categories and popular items by the query with the previews shown
6. Inefficient catalog page structure
Frequently, a large banner is placed on the catalog listing page, filling the entire first screen and lowering the overall product selection beneath it. That disorients the user. So s/he can think s/he is mistaken and then leave. It also distracts the user from the goods and, therefore, from the purchase.
The product list is visible on the second screen only when the banner takes all the first screen here
Besides the banner, at the beginning of the catalog page, you can see the long text explaining what kind of page it is, what the benefits of the products are, etc. Yet, according to our experience, users prefer seeing to reading.
That's why you should shift the focus to increase conversion rate on Shopify sites. Make the banner narrower and show more items while placing the category text at the end of the page.
There is no banner on the category listing, so the user sees the relevant products on the first screen. Nothing distracts customers from the products and, thus, buying.
7. No “Previously Viewed” block
Neither on the page of catalog listings nor in the product card is there a block with previously viewed items. In this way, the user is forced to search for an item all over again in case s/he accidentally leaves the page or simply changes his/her mind, for example.
Here is no Recently or Previously Viewed Products block so the user is to start the search from the very beginning each time s/he wants to back to the items watched before
It's a good idea to add this block both on the categories and in the product card to help the user in making a decision.
In Demstore, Shopify-based online store, there is a block of “Recently Viewed Products” in product card and category page so that the user can quickly back to the items s/he is interested in
8. Non-informative product card
As we mentioned above, shipping and returning information is a crucial aspect of the decision-making process. That's why such details should be placed in a clearly visible place both in the header and on the product card.
Here is an example of the site without information about shipping and return both in the header and product card page
Add shipping and return information next to the item's description and features on the product pages, and also add a link to a page with more detailed terms and conditions for conversion rate optimization.
Example of informative product card page with such crucial information as shipping and delivery added on the visible place
9. Too big and non-informative website header
Online stores on Shopify often make website headers too big with a lack of such crucial information as Contacts, Shipping, About Us, and so on. We recommend making headers smaller and more useful for users by adding important information and links to them.
Here is the header that is not informative and too wide with much-unused space
Here is an example of a well-structured and user-friendly header on the website Intertop that contains all the needed information but is not too wide.
10. Non-informative product page previews
Often online stores sell unisex items, but that is not obvious from the product preview because there is only one item image on a single model. The user can see that the clothing is unisex only by going to the product's card.
It's better to add a gallery in previews: a demonstration of the item on both men and women (models of both sexes) when putting the cursor on the product preview.
Thanks to the gallery in the preview, it is clear that the item suits both women and men
Bonus: Mobile version issues to mind
With a growing mobile audience, adaptive versions of sites become critical nowadays. That’s why it’s crucial to take care of the usability of mobile users. Here we outlined the most common issues we revealed that affect the user experience.
The burger menu is at the top left of the page and opens on the right by tapping. That is confusing.
- Very large blocks result in a long scroll through the page to see all the offerings.
- Overloaded header. Unlike desktop, in the mobile version of the site, the header is very overloaded with various elements, making it difficult to hit the right icon. So it is better to move some elements (language switch, account, and "Favorites" list, for example) in the burger menu to make it user-friendly. Keep only the most important elements: logo, search, cart, and burger menu.
- The burger menu slides out when tapped, and it would be better to open it on the side or full screen.
Here are only a few issues described that can affect the conversion rate and other crucial KPIs of the site. Even small changes can lead to great results. So, it’s crucial to conduct the usability of your website regularly to identify and address the main issues for optimizing your conversions and sales,increase conversion rate of Shopify store and take your business to the next level.