Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Showcase of Beautiful (or Creative) E-Commerce Websites

Designers are constantly striving to create eye-catching designs without losing the usability features that add significant importance to the experience of online shopping. Today’s showcase presents a variety of websites with elegant design solutions and innovative design techniques. We have analyzed the designs and now discuss their advantages and disadvantages in this review. We also suggest improvements and further ideas that could help improve shopping experience on these sites. Hopefully, you can learn something useful from our thoughts.

Heartbreaker Fashion1
With clothing inspired by ’50s and ’60s fashion, pin-up girls and vintage culture, Heartbreaker’s design nicely fits the company’s profile, with its pastels and retro textures. Good use of dotted and dashed borders, which separate the various elements rather delicately. Notice how well the designers keep the vintage theme across the product and category pages, with nice attention to detail for the credit card icons in the footer.


Hunter’s Wines3
Hunter’s Wines is an online wine store. The front page introduces some dynamics in its grid by placing text blocks next to each other in a somewhat chaotic manner. Notice how well the design separates sections of the pages by using yellow color in the background of the wine bottles. Product pages contain an interactive, sophisticated search filter, backed by a pastel color scheme and beautiful typography that nicely fits the overall feel of the site. The color of the text on call-to-action buttons could be improved.

Also, we have doubts about some elements on the page. A symbol under the wine bottles doesn’t really have any purpose and the arrow in the right upper corner of sections in product pages doesn’t seem to work properly. Overall, a very nice design which could use just a bit of rethinking to improve the shopping experience.


Sassy Duck5
Sassy Duck is a young fashion-forward handbag brand that creates luscious accessories for the modern woman. This website literally elicits a hunger for those female accessories. Again, large product photography is striking on the website, trying to evoke an emotional response from the site’s visitors. It’s interesting that the overview pages do not contain prices — they are displayed only once the visitor hovers over the product image. The call-to-action buttons could use some :hover, :focus and :active states to make the buttons a bit more responsive. The horizontal product navigation pans across as the mouse nears the edge of the page. A nice example of how an e-commerce website can work with a minimal amount of text.


Telegramme Studio7
Probably the most eye-catching detail in Telegramme Studio’s design is vivid, high-resolution product typograrphy displayed in the horizontal slideshow in the upper area of the front page. The slideshow might be moving a bit too quickly for some visitors. The grid remains consistent across the pages, always focusing on the designs produced by the agency. A nice example of a site on which high quality product shots are integral to each page.


Oi Polloi9
Oi Polloi is small retail store based in the Northern Quarter, Manchester, UK. This website design is (again) in retro style, supported by the typewriter-style typograph and old print-style textures. They capture the Oi Polloi brand well. The navigation menu is a good old drop-down which doesn’t quite work, especially because the page has six of them on top. This requires a bit more clicks than you’re used to on an e-commerce website. When you roll over an item on a product page, a tooltip provides details about available (and unavailable) colours and sizes. It might be useful including these options in the search as well.


A Modern Eden
A Modern Eden sells posters and iPhone applications. The design also features a large horizontal slideshow area on which all illustrations have a nice shadow to make them look a bit more realistic. The fonts used are chosen carefully and used consistenly throughout the design. The shopping basket ribbon placed next to the main navigation in the right upper corner is a nice touch. Product pages are nicely designed, with attractive green call-to-action buttons. It’s interesting how the designers display the price tag: it’s put somewhat above the product item’s title with a red circle in the background.

Sky’s Guide Service11
Sky’s Guide is a wonderful example of what a service website can look like with a quality set of textures and images. The choice of colors for design elements and body copy nicely complements the theme of the website and logo of the company (dark red and light brown). Call-to-action buttons are carefully designed to stand out against other elements and capture the user’s attention.

Notice a simple yet striking grid in the footer and a consistent use of fonts across the site. However, the site misses subtle hover effects to make the experience a bit more responsive. The font size of some texts on the site could be increased as well.


Patrik Ervell
Patrik Ervell demonstrates innovation at its finest. Category pages present a Flash video of the clothes being modelled on an actual male model, giving the customer a sense for how the clothing would actually look on them. The website also gracefully degrades to static images for browsers without Flash support. A very interesting take on the modern clothing website, and good use of white space. Unfortunately, the product page does not have a Flash video, although it might be a bit annoying if it did. The typography could be improved a bit to make the texts more readable and more pleasing to read.


Matthew Williamson
Designer fashion outlet Matthew Williamson demonstrates good use of fonts, contrast and high-quality images. The product pages allow users to zoom in and out to take a closer look at the shop items. Also, the product page provides a size guide, a delivery guide, a return guide for customers as well as comprehensive product details. The website does not feel particularly dynamic, though; the sidebar navigation has to reanimate after each page load. The splash page isn’t necessary, either. An example of how beautiful imagery doesn’t quite work when overall usability of the website isn’t good enough.

Paul Smith14
The Paul Smith website has an elegant design that emphasizes the quality of the brand. There is something quite appealing about the simple navigation at the top, especially the logo and colored horizontal stripes. The main shop page has a bottom-top navigation (instead of the traditional drop-down) which is not quite intuitive at the first glance. What is striking is that each product page has plenty of high-quality product images which is unfortunately not that usual on e-commerce websites.


Chicago L-Shirts
Chicago L-Shirts is big and bold on Helvetica and the dark processed vintage illustrations. The website is unique and hits you straight away with the featured product on sale, which fills the entire background. What’s interesting is that the shop doesn’t really have an overview page on which all t-shirts would be presented. Instead, the visitor has to navigate using “Prev” and “Next” links. And actually, it works quite well, because there are not so many t-shirts to browse through. A nice example of a shop which makes sure that every product page has a strong photographic presence. Unfortunately, arrows in the navigation aren’t clickable and different views (e.g. side view) of every t-shirt isn’t available.

W+K Studio16
WK Studio sells various stationary, t-shirts and children’s clothing. The color scheme is warm and friendly, and so is the stylish navigation and large product previews. Built on the BigCartel shopping cart, the shopping experience is pleasurable for a small store. Notice the lovely price tags shaped in the form of the heart which is an essential part of the studio’s logo. The color and typography of the body copy could be improved, and so could the typography. Very simple design that doesn’t look too simple because of the very well thought-out style and theme of the site.


Marie Catrib’s18
Probably the most striking attribute of this website is its playfulness. The typography is inviting and attractive and makes the reading experience pleasurable. The navigation menu on the top is very simple, but nice; subtle use of texture fits nicely to the style of the website. Also, notice the dashed horizontal line on the top and the decorative ellipses spinned in the footer of the page. When you hover on an item on the products overview page, two additional navigation options appear: “More info” and “+ Cart” which is a nice example of a context-sensitive navigation. Great use of subtle colors, textures and bold fonts bring out the tastiness of the freshly baked bread and confectioneries offered at Marie Catrib’s.


Sanctuary T Shop20
The landing page for Sanctuary T really helps to sell the brand and welcome customers. Best-selling teas are beautifully listed underneath the large eye-catching slideshow. New products are introduced using striking, pleasing and eye-catching illustrations. The site uses many colors (7 on the front page), and although they do fight for user’s attention, they actually never really get in the way. The typography is pleasant and inviting, however, mostly images are used to embed the fonts on the pages (and sometimes, Cufón is used). Notice how wonderfully the designers use tea cups to display the rating of every tea. Sanctuary T is a prime example of a website that brings the best out of square-edge elements and white space dividers.


There is certainly a lot to like about this website: the blended shades of blues, contrasting orange highlights, delicately patterned borders (complemented with an equally elegant choice of typography) and the subtle shadows on the roll-over navigation tabs. The design shows a lot of attention to small details, be it texture in the background or a “telephone” icon in the footer which works very well with the style of the site. The mega drop-down menu looks nice and stands out on hover. The page has a lot of whitespace, especially on overview pages and product pages and makes the shopping experience lightweight and easy.


Grenson is exemplary for a very strong and consistent grid layout. The design is accentuated with red highlights. The most striking element of the website is the roll-over product previews on single product pages, which automatically zooms in and pans to wherever the mouse is. It’s quite a nice touch and removes the extra clicks required to zoom and pan. A clean and good design without distractions and unnecessary trickery.

Cow&Co. Superstore24
Cow&Co demonstrates good use of interactive elements in the filtered navigation to make page selection a little more interesting. Adding items to the basket is quick and easy, and a lot of the navigation occurs without having to reload the page. The designers of the shop do not highlight “Add to basket” buttons, although it would actually make it just a bit easier if the buttons would stand out a bit more. The interesting part is that when you click on a product image on the overview page, the details are displayed on the right, without the page being reloaded. It’s hard to say if it’s a good idea or not: this behvaior might be a bit confusing for visitors who wouldn’t be able to locate the detail page. It would be useful to highlight it in some way when it appears after the click, though.


Dark Sky26
Dark Sky’s website shows how dots can be used to build and structure the layout of the page. The typography is just wonderful: attractive, yet not too eye-catching to distract. Notice the whitespace in the vertical grid layout and on the product pages. Call-to-action-buttons have the same background color as many other elements on the page which may be a bit confusing at first. However, other colors probably wouldn’t work that well together with other elements.


By itself, RFRM would be a very simple and not that remarkable website with handmade, vintage inspired jewelry. What sets this online shop apart from other sites is that the centrepiece of the website is the large window, or “hole,” that exposes the background layer image below. When you scroll the website, it feels like you’re looking out of the window — which looks very interesting and unusual.


This website doesn’t look remarkable, but it uses a nice design technique that helps it stand out. Each product page has a large seamless header that creates a large frame for the product. This allows for large product shots of background images that can be used on each page. Interesting idea that may find its place in your e-commerce website as well. The downside of the design is the not so comforable navigation: all navigation items are always hidden in the horizontal navigation on the top of every page.


Ben The Bodyguard
This website of an upcoming app for iPhone or iPod touch has been discussed a lot over the last months, and rightly so. The site is a remarkable example of how an original, innovative design can bring a lot of attention to the site that actually hasn’t been released yet. As you scroll the page down, Ben the Bodyguard is following you through the city, leaving comments about the neighbourhood and services he provides. There are also some tricks which become apparent if you try resizing your browser. Ben’s path ends at the e-mail subscription box. Wonderful idea, wonderfully executed. A wonderful example of storytelling. The Web could use more websites like this one.

In Conclusion Link

It goes without saying: large high quality product shots are a key element of success on e-commerce websites. JavaScript-based image slideshows of products, elegant rich typography and meaningful use of white space all enhance the shopping experience and increase conversion rates. Some good websites experiment with innovative design techniques, yet all good websites pay a lot of attention to the look and feel of every single design element, be it a shopping cart, search box or headings. We are looking forward to more beautiful and usable e-commerce websites appearing online in the months to come.

(al) (vf) (ik)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31

↑ Back to top Tweet itShare on Facebook


Scotty Vernon is a creative designer with 7 year's experience; a geek, massive digital junkie, music lover and social media fanatic. I love great design, funky interface animations, and cutting edge technology and get easily excited about anything that combines all three! You can follow me on Twitter.

  1. 1

    I love the Ben the Bodyguard site, its a true example of where the future of web design should be headed, quality. Great collection of E-Commerce Websites though, nice post.

  2. 2

    Hey guys great showcase, the Paul Smith site is a fave of mine! Check this one out we’re just putting on Magento for a client:

    Love your thoughts guys.

  3. 4

    The examples are all definitely well designed, but to be honest what makes them stand out is the impressive photography. These minimilist styles depend so heavily on the photography that they would actually look like just an average wordpress theme without it.

    • 5

      I totally agree.

      There is never enough credit given to the photographers who make sites like these shine. Plus, many clients simply can’t afford professional quality photography, or would rather put what cash they do have toward enhanced functionality. Increasingly, clients are looking for sites they can update themselves, which often means photography that can’t support this type of design.

      Don’t get me wrong, I love this type of design/art direction, and when it can be supported with the right photography it’s fantastic, but I would be more impressed to see designs that did great things with thin budgets, or with a client’s amateur photography.

      • 6

        I totally agree. My first Ecommerce site looked fantastic with the products photographed professionally and the backgrounds matching the style and colour scheme of the site.

        After a couple of weeks of the client taking photos of his products propped up against a cardboard box, held at arms length or against the side of a tank (it is a military spares shop) the design started to look a little less impressive. ;-)

        High quality product photography is key to a retail site.

      • 7

        I agree – for instance with Saddleback Leather, we focused heavily on the textures of the product, which were scanned then tweaked for the web.

        Capturing the essence of a product or conveying the product lifestyle is hugely important, whether you have beautiful photography or have to get really creative with what you have.

  4. 8

    Very good looking and effective designs. Ben the Bodyguard website looks great and very different. Love this concept.

  5. 9

    Totally agree with Laurence. Design is great but there must be some balance with retail practicalities too. This for example:

  6. 10

    Love Theo and Marie Catrib. The Patrik Ervell site is a fun idea, but so impractical — wonder if there’s an alt site for mobile browsing.

    A couple more to add to the list: << storytelling through ecommerce << great product photography that doesn't overwhelm other elements.

    Check out our ecommerce portfolio at

  7. 11

    Great looking eCommerce websites, but I doubt the conversion rates are great for some of them. Being “different” and “unique” in eCommerce = fewer sales (generally).

  8. 12

    Great collection of sites! We’ve been seeing lots of design-centric sites lately built with Magento – pairing a powerful ecommerce platform with creative implementation has been a winning concept for lots of companies! More Magento sites:

  9. 13

    Personally, I’d like to shoot myself with a bow and arrow when I try scrolling in Oi Polloi’s brand navigation menu.

    • 14

      Not only is your comment generally unhelpful (what is wrong about it – be critical but be fair), but the whole concept of shooting yourself with a bow and arrow would require some impressive arm length and dexterity.

      • 15

        Dear Mr. Ward,

        First of all, I would like to extend my utmost apologies if I have offended you in any way.

        I am sad to say that I had forgotten about the uptight and generally unhumorous way commenting should be made on Smashing. Thanks for reminding me of this, and thanks for reminding me of why I stopped coming here in the first place. Big help!

        Also, thank you again for pointing out how shooting oneself with a bow and arrow is hard. That was not at all the intended meaning of it. I am now well aware of the fact that it is more or less impossible to do that. Silly me.

        The fact remains though. Oi Polloi’s brand drop-down menu is just that, a drop-down menu. With a scrollbar. And we all know what scrollbars are for, don’t we? Scrolling! Of course! And what does nearly every computer mouse and laptop trackpad in existence currently have? A scrolling mechanism. Included so you don’t actually have to reach for that draggable block or arrow to move up and down lists.

        Another serious usability miss with Oi Polloi’s scrollbar is, that like in 95% of all other scrollbars, you actually can’t click in a “void” to jump to the position. But who needs that, right? It’s simpler to relearn peoples habits and make them drag the draggabe block! It’s named draggable for a reason, right?

        Now, I am well aware of this comment being totally boring and really not that funny. I am probably the only one laughing when I think of it. But I really, really, do hope Vitaly and Sven will commend you in some way for your comment. It is people like you who drives such a thriving and expanding community forward.

        Yours forever,


  10. 16

    Wow! Great showcase. I’ like Oi Polloi so much. It’s perfect. Compared to my , I am ashamed of myself now.

  11. 17

    Thanks for the article

    I noticed that when I visited the cow&co site, as I scrolled down the page I thought to myself ‘this is a nice layout – man it would be cool if it just kept scrolling’. Then as I reached the bottom, the page automatically created more page content to scroll through…

    I like when that happens.

  12. 18

    Excellent work with high quality photography, I may note. Many people think great design but crap photography works and they are mistaken.

    Excellent post.

  13. 19

    Some feedback regarding this article

    – Telegramme Studio

    When a product is purchased it take the user redirected to another tab which shows the the PayPal page and there is no option for the user to continue shopping . If the user wishes to add another product to the cart then each product does not get added to the existing order placed.

    The site make be top trumps on the creative aspects and design ,but it falters on the shopping cart functionality.

    – Oi polloi

    -The Share this function could have been done better . The drop down overlaps with the site in the background

    -The mouse over images in the product gallery are not consistent and need to all display the same image

    -The inner pages i.e. shipping,FAQ’s, contact , feedback all look like dumps from wordpad . Very unattractive . Looks like all the creative juice got spend on the other pages and this must have been done in the 11th hour.

    I haven’t reviewed all the sites yet so more comments will follow

  14. 20

    Jesse Stewart

    January 25, 2011 9:42 pm

    Thank you Smashing Magazine for the feature. I’m the desiger that did Heartbreaker Fashion. I’m glad you liked it!

  15. 22

    Further comments

    * Patrick Ervell

    – Very nice flash header to show categories, but why is the male model not smiling?

    – Zoom in function – Image is blurry

    * W+ K studio

    – syntax Error while adding product to the cart . Same problem with adding products to cart . PayPal integration needs to be changes to match Chicago l shirts process.

  16. 23

    @Smashing Magazine : thanks for the great articles
    @Chiles: no need for you to comment about the sites since this article talks about how creative the design is.
    More credits to the photographer for very stunning photos.

    • 24

      @Kim – Its just my observation . If you are the admin of these sites take notes, otherwise go powder your nose

  17. 25

    Some of these websites built by Magento. Surprisingly the designers made it look like unMagento. Wow. Nice post.

  18. 26

    Jeroen Marechal

    January 26, 2011 3:16 am

    Nice list! This one is also worth mentioning –

  19. 27

    Jan Van Lysebettens

    January 26, 2011 3:18 am

    Great websites, lovely collection.

    I like these as well: ( check out the drag & drop shopping cart )

  20. 28

    Glad to see Heartbreaker Fashion mentioned. They used Magento. The site looks really nice. I wonder if any of these were made using Drupal + Ubercart.


↑ Back to top