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 over $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.

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 the top 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 makes 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 amongst all the products, collections, and pages being offered.

Shopify design tip: consider using custom navigations

Shopify store by Grovemade, making use of an optimized navigation.

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 a 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 Shopify.

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

Assigning tags to products on the Shopify platform.

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

Better Shopify website design with tags and truncated filters

Effective product filtering using tags. Shopify store by Pure Cycles.

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.

A comprehensive but well-structured search by Sunday Somewhere.

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

A visually captivating product page by Hardgraft.

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 upfront. 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 upfront
  • Communicate the value proposition explicitly
  • Make the buy now/add to cart button visually distinctive

A well-designed Shopify store.

Luxy Hair uses careful product presentation design to clarify important information.

Build Trust and Reassurance

According to the 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 Bright Local, 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 Shopify best practices.

Implementation of product reviews. Shopify store by MVMT Watches.

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.

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.

Hardgraft uses compelling upsell strategies.

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's checkout settings.

Shopify allows both customer accounts and guest checkout.

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 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.

Goal funnel visualization using Google Analytics, by Patrick Han.

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:

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.

About the author

Stan Prysiazhniuk, Netherlands
member since May 15, 2017
Stan is a UX/UI consultant who specializes in eCommerce. In his five-year career, he's helped companies like Mastercard, EBRD, OLX, Your Last Host, and TomTom to craft user experiences that sell to 200 million monthly active users. His ultimate goal is to provide a concrete ROI by diving deep into your business processes, understanding current struggles, their cost, and solving them with the design that converts. [click to continue...]
Hiring? Meet the Top 10 Freelance Shopify Website Design Experts for Hire in June 2018

Comments

comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Stan Prysiazhniuk
Designer
Stan is a UX/UI consultant who specializes in eCommerce. In his five-year career, he's helped companies like Mastercard, EBRD, OLX, Your Last Host, and TomTom to craft user experiences that sell to 200 million monthly active users. His ultimate goal is to provide a concrete ROI by diving deep into your business processes, understanding current struggles, their cost, and solving them with the design that converts.