Shopify Design Tips and UX Best Practices
Shopify merchants have achieved more than $40 billion in sales, but with poorly executed UX design being one of the biggest contributors to abandoned checkouts, it’s clear that superior UX can boost this statistic even further.
Shopify merchants have achieved more than $40 billion in sales, but with poorly executed UX design being one of the biggest contributors to abandoned checkouts, it’s clear that superior UX can boost this statistic even further.
Stan is a UX/UI consultant who specializes in eCommerce. His ultimate goal is to provide a concrete ROI for his clients.
Expertise
Shopify powers more than half a million eCommerce businesses in 175 countries. Since 2012, the number of merchants on the Shopify platform has grown an average of 74% annually, and these merchants have achieved more than $55 billion in sales as a result of Shopify being one of the best known and easiest to use eCommerce platforms today.
![Designing for Shopify can be very lucrative for designers.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126363%2Ftoptal-blog-image-1528755825836-d839d21ffcd70ab991b56c490f7c5b04.png)
With Shopify taking care of domains, hosting, all back-end, and some front-end functionality, more time, money, and resources can be spent on UX design. By 2021, eCommerce sales worldwide are expected to reach a new high of $4.9 trillion, and with substandard UX design being one of the biggest contributors to abandoned checkouts, it’s more than clear the implementation of eCommerce best practices will continue to prove highly effective.
In this article, we’ll explore how to design a Shopify website with Shopify design tips.
What Features Does Shopify Have?
Shopify ships with all of the features you’d expect from a top eCommerce platform:
- Integration with external payment gateways, such as Stripe and PayPal
- Access to Shopify Payments, with zero fees compared to external options
- The ability to allow payment by gift card or store credit
- A customizable checkout page (only for Shopify Plus customers)
- The option of user accounts or guest checkout
- Static pages (e.g., Privacy Policy or Terms and Conditions)
- Landing pages with promotional content
- Password access for stores in development
- Product variants with a range of customizable options
- Smart collections to automate the categorization of products
- Search and tag functionality to aid product discovery
- Blog functionality with the ability to embed products into posts
- An API to help developers build dynamic websites and mobile apps
Boosting eCommerce Product Discovery
Similar to the way brick-and-mortar stores are organized by department so customers can locate specific items by asking a staff member, online shoppers need the ability to browse, filter, and search so they can find what they’re looking for easily and quickly.
40% of eCommerce customers abandon websites that take longer than 3 seconds to load, which suggests how impatient they are when it comes to product discovery. Luckily, Shopify has a number of features that make it easy to build custom navigation, organize products and categories, and implement search functionality.
Custom Navigation
Presenting the customer with too many options may cause analysis paralysis (when there are too many available options to effectively make a decision results in frustration and abandonment). By designing a custom navigation, we can prioritize products and “collections” that convert most effectively—for example, visibly displaying the “Desk” collection if desk products are the most popular. These custom navigations can also be edited in the Shopify CMS to enable casual A/B testing.
Visually speaking, the best-converting Shopify themes display the title of the collection clearly and use enough whitespace to help the user easily identify what they’re looking for among all the products, collections, and pages being offered.
![Shopify design tip: consider using custom navigations](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126364%2Ftoptal-blog-image-1528755866137-ff0a201b51c4c64c348dcb5c3eb75198.png)
Collections
A collection is an organized group of similar products. Products can be sorted into collections manually, or they can be automatically sorted based on matched criteria (for example, if the product title contains a certain keyword, has been assigned a certain tag, or falls within a particular price range). Collections can also be temporary (i.e., seasonal or for a limited-time sale) ensuring that Shopify website designs are always relevant, timely, and, most of all, highly converting.
While these collections are defined behind the scenes, it’s useful for eCommerce designers to be aware of this functionality when designing for a Shopify website.
Product Tags
Displayed/visible tags help customers find similar products, and as mentioned above, they can also be used internally to create collections. However, the greatest benefit of tags lies in the fact that they can be used to create a faceted search, allowing customers to filter products based on a tagged defining attribute such as “Yellow.”
![Shopify design tip: using the Shopify tags system](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126365%2Ftoptal-blog-image-1528755891995-14519219f7417c48ee3b10f5a9a5cdd9.png)
Keep these Shopify design tips in mind:
- For added clarification, show which filters are applied.
- Allow customers to remove filters in order to widen their search.
- Truncate filters to show only the most popular at first glance.
![Shopify design principles use tags and truncated filters](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126366%2Ftoptal-blog-image-1528755912492-99e28f5d195cdec84cad6d4194020852.png)
Search
Search functionality is useful for customers who know exactly what they’re looking for and is especially important for mobile shoppers who find browsing and filtering frustrating due to the natural awkwardness of interacting on a mobile device.
These are the Shopify best practices to consider when designing search experiences:
- Never hide the search box; reduce friction by making it immediately available.
- Place the search where customers expect it to be (i.e., top right or centralized).
- Show the entire input box, not just the search icon.
- Incorporate autocomplete functionality to help users search faster.
- Design for human error by using suggested results and autocorrect.
- Save user searches and send follow-up emails if no sale was made.
![Improve Shopify store design by designing better search experiences](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126367%2Ftoptal-blog-image-1528755930996-26fc08052980407d6e4994447f73c0b3.png)
Shopify Best Practices for Products Pages
Shopify offers all the features needed to hook eCommerce shoppers and fluently guide users straight to the checkout. If we combine these features with eCommerce best practices, we can push the number of abandoned checkouts below the average statistic.
Use Captivating Product Images
What makes a good eCommerce website is imagery that captivates users emotionally. To that end, Shopify allows for multiple images and product variants to be uploaded. Nevertheless, as a Shopify best practice, display at least one of these product images in-scale (i.e., surrounded by other objects to illustrate how large the product is) to set expectations.
Customers want to conduct a thorough investigation of the product before they commit to buying it to ensure that all product images are vivid, high quality, and zoomable.
![Shopify design tip: Shopify stores with terrific imagery convert better](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126368%2Ftoptal-blog-image-1528755993333-aed67d8f03dd50361179a5f3b3713474.png)
Display Clear Product Information
A shocking (but not surprising) number of eCommerce customers abandon their shopping carts due to a lack of information about the actual cost. 60% of customers cite unexpected costs (e.g., shipping, tax, fees) as their reason for cart abandonment, and 23% are unable to calculate the total cost up front. Lack of transparency is a surefire way to tank conversions on eCommerce websites, so keep these Shopify tips and tricks in mind:
- Use progressive disclosure techniques to structure information clearly.
- Display a full breakdown of the costs up front.
- Communicate the value proposition explicitly.
- Make the buy now/add to cart button visually distinctive.
![A well-designed Shopify store](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126369%2Ftoptal-blog-image-1528756019986-6936baacd170b2ae6980a045f8ec243e.png)
Build Trust and Reassurance
According to Baymard Institute, lack of trust is cited as the reason why 19% of customers abandon at checkout. Fortunately, all Shopify stores ship with SSL (secure checkout) by default, but they also allow customers to leave reviews as social proof.
Social proof is an undeniable way to skyrocket conversions by empowering trust on eCommerce websites. According to BrightLocal, 88% of consumers trust online reviews as much as a personal recommendation, so it’s essential to nudge previous customers to leave reviews and indicate this within the customer journey. Most Shopify themes also take advantage of Schema markup to integrate these ratings directly into search results.
![A Shopify store utilizing product reviews as part of best Shopify design guidelines.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126370%2Ftoptal-blog-image-1528756041789-d14f10e8f2f90ad70c75cb67c49b2711.png)
Besides social validation, consider building customer confidence by implementing a live chat solution such as Intercom, Zendesk, Drift, or Kayako. Shopify allows for integration with third-party services through their app store and via manual installation.
Show Related Product Recommendations
All leading eCommerce businesses take advantage of cross-sell and upsell strategies. Tags, combined with analytics and A/B testing integrations such as Optimizely’s Web Recommendations, can help designers empower businesses to improve conversion rates by displaying alternative or additional items that customers may be interested in.
![The best-converting Shopify themes use cross-sell and upsell strategies](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126371%2Ftoptal-blog-image-1528756062568-42e57ae27784a1bfda633790fea9e8d6.png)
Integrate Shopping Experience Personalization
Integrations such as Web Personalizations by Optimizely, in combination with Shopify collections and tags, allow data-driven businesses to segment audiences based on their interests and previous purchase history and change the page content accordingly.
With anticipatory design techniques, Shopify stores can display more relevant content, keeping audiences engaged for longer, and thus more likely to convert to a sale. Personalization is key to boosting the financial bottom line of any eCommerce business.
Checkout Optimization
Guest Checkout vs. Customer Accounts
According to Baymard Institute, “the site wanted me to create an account” is the second most common reason (standing at 35%) why customers abandon their checkout without purchasing anything. Shopify recommends allowing guest checkout (especially on mobile), and to that end, it’s the default option to have customer accounts disabled.
![Shopify](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126372%2Ftoptal-blog-image-1528756091920-279b8ef017a5ff95448356eabb857930.png)
Pinpointing UX Flaws and Reducing Drop-offs
Attempting to solve abandoned checkouts without robust analytics is as effective as looking for a black cat in a dark room. Optimizing Shopify user experiences and checkout flows works best when it’s a data-driven process.
Shopify designers can connect Google Analytics to Shopify and set up a goal funnel, which, after enough data has been collected, will illustrate exactly where customers are deciding they don’t want to continue with their purchase.
![Goal funnel visualization using Google Analytics to analyze best-converting Shopify themes](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126373%2Ftoptal-blog-image-1528756108434-74a56dd8637f0b46b25af236f53121d2.png)
For best results, integrate Shopify with tools like Crazy Egg, Hotjar, and FullStory to observe these problem areas in more detail using heatmaps and visitor recordings.
Conclusion
For designers to be able to better communicate the benefits and capabilities of the Shopify platform and learn what solutions it can and can’t provide to clients, it’s best to open up a free demo store. Additionally, top eCommerce designers can become registered Shopify Experts, adding more credibility to their resume as a Shopify website designer.
Further Reading on the Toptal Blog:
Understanding the basics
What does Shopify do?
Shopify is an eCommerce platform designed to make it easy for businesses to set up a fully-functioning online store with a customized storefront and multiple payment options.
Is Shopify safe?
Shopify is Level 1 PCI-DSS compliant in all six categories as defined by the Payment Card Industry Data Security Standard. All Shopify stores use SSL encryption.
Which big companies use Shopify?
Plenty of big companies use Shopify to power their eCommerce stores including Budweiser, The Economist, Penguin Books, Tesla Motors, and Red Bull.
What are the tags on Shopify for?
Shopify tags are used to categorize products, enabling store owners to easily build product collections, and users to filter search results when browsing for products.
What is an eCommerce website?
An eCommerce website facilitates online transactions, enabling customers to purchase goods and services online.
The Hague, Netherlands
Member since July 19, 2017
About the author
Stan is a UX/UI consultant who specializes in eCommerce. His ultimate goal is to provide a concrete ROI for his clients.