23 Excellent Examples of How to Design Online Stores

by Tom Kenny (@tkenny)

Online stores can often be confusing and hard to use which can turn potential customers away. There are some very simple things you can do to keep your users focused on your site. Here are some great examples of sites doing just that.



Good use of top navigation, highlighting the relevant section that the user is currently viewing. Good use of colour to ease usability.

The Mozilla Store


The Mozilla Store creates a fun, creative feel to their online store with related sketches in the header and clear navigation on the left makes it easy to find products.



HMV’s store almost jumps out at you due to the shadows either side of the content. Space for promo offers in the header to catch the users’ eye and big, bold and clear navigation.

Nerve Music Store


Nerve uses an unconventional method of dragging items to the shopping cart on the right but a big ‘Drag Stuff Here’ button above the cart instructs users what to do.

Taste Book


Taste Book gets across the message of what it is very clearly on the homepage followed by a big distinctive button indicating that it’s free to join.

Blooming Gorgeous Flowers


A design that displays the elegance of flowers with the use of vector illustrations as well as good photography. Great use of icons in the footer and for the basket in the header.

General Robots


Clean graphics and good use of colour shift the visitors’ focus to the products.

Bambino Direct


Fun colours directly relate to the products that Bambino Direct sell.

Blooming Direct


Blooming Direct’s store is ordered into three columns. On the left is the secondary navigation, in the middle is the content with the primary navigation on the top and on the right is the basket and space for offers.



Layout makes good use of whitespace especially in the left column which contains the navigation and categories. Use of colour to easily distinguish between what is and isn’t clickable.

Feel Unique


Very clear navigation through the use of tabs and login section on the left for easy access for returning customers.

Big W


Big W uses a very clean and uncluttered design that makes great use of whitespace making it easier for the user ti understand how to navigate and use the site.

Northern Tool + Equipment


Colours and design reflect the products on sale giving the users more of an association with the store.



Bold colours which translates into a bold and easy to navigation. Use of a big promo area and a recently viewed items in the ‘My Account’ section on the right giving the user the ability to see what they looked without remembering exactly where it is located.



Another great example of top navigation but with the colour changes dependent on what section that the user is viewing.



Boots uses a promo area that cycles between three different images with a very clear indicator to show which image it is on. It even includes a pause button so that the user can stop the auto-scroll and take in the message.



Big imagery allowing the company to promote specific items and draw the users’ attention to them.



Apple really keeps the focus on the products with little distraction elsewhere. It’s complete line-up of major products are displayed in the top two rows of the store.



Play makes it very clear which section you are visiting due to a clear tab system. Promo area in the middle updated regularly keeping the customers coming back to new content to keep them interested in the store.



Clearly defined sections with big message in the header notifying of free UK delivery which can be a great incentive for people to place an order with them rather than a competitor who charges even a small fee.



Etsy gets across the message of what they sell with a big tag line placed underneath the logo.



QVC displays a message to users who haven’t visited the site before. This allows them to send out an introduction message to welcome new visitors.



Great imagery of the products in use by people which is a fantastic way of presenting items.

Improve your design knowledge in just a minute or two a day, for free


You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.