The days of online stores all looking the same are thankfully long gone. Every month through my role at Shopify I meet and learn from amazing designers and front-end developers who are creating beautiful and highly immersive ecommerce experiences.
Thanks to flexible hosted theme based platforms creating unique storefronts is now easier than ever. Here are just a few Shopify based stores that showcase that ecommerce design doesn’t have to all look the same.
Tessemae’s make all natural salad dressings. Whilst the inner pages of the site follow a more traditional pattern in terms of layout the home page goes that extra mile. Firstly the large hero image give real character to the family brand. Secondly once you scroll or click on the “View our featured products” button the bottles of dressing change right before your eyes — a very neat effect.
Inspiring feature: The clever use of parallax scrolling to display the different bottles of dressing on the home page.
Overall the site is very “clean” in terms of the design and layout. This lends itself to showcasing the products really well. In particular the menu section in the header does a great job of keeping links to a minimum but directing you around the site. Additional, but arguably less important, links are placed towards the bottom of the page.
Inspiring feature: When viewing products you can seamlessly switch from a one column grid to a four column grid.
Rebel8 are a brand deeply rooted in skateboard, graffiti, and tattoo culture. The site “furniture” is predominantly in dark monochrome colours which definitely gives the brand a certain edge. The dark look lends itself nicely to the very bright and colourful product imagery used on the site. For example the hero images on the home page, which rotate every few seconds, lift the site and let the products pop.
Unlike other stores Rebel 8 appear to showcase all of their products directly on the home page. The site is also fully responsive collapsing the product grid down from 4 to 3 to 1 image per row on resizing.
Inspiring feature: Great use of dark colours not only gives the brand a certain edge but allows their well shot product photography to stand out.
Drop Dead were formed in 2005 in Shefffield, England. Their aim is to create high quality unique clothing for men and women which has been inspired by internet culture, life on the road and their ever-evolving taste in music and art.
The site has two main structures, the home page and everywhere else. The home page makes great use of the full viewport to display a revolving set of full screen images that click through to individual product collections. A slide in menu is available via a small button in the top left of the screen. When clicked this reveals links to all parts of the site along with further sub menus and a newsletter sign up form. Once inside the site takes on a quite different feel reverting to a very clean minimal look.
Inspiring feature: The menu on the inner site pages fixes itself to the top most part of the viewport to allow more room for the products and collections to shine.
Studio Neat was founded in 2010 by Tom Gerhardt and Dan Provost on the back of a successful KickStarter campaign for their product “The Glif“. Since then they have released further products including the Cosmonaut — a wide grip stylus for touch screens. As well as giving you the ability to buy their products directly they also make great use of custom templates to link certain products to online app stores. Instead of showing pricing info they simply link directly to the appropriate store.
Inspiring feature: The whole page background takeover teaser for their upcoming product the Neat Ice Kit which goes against the look and feel of the rest of the site.
Classic propaganda posters, antique art, vintage advertisements and illustrations are the stock in trade of Rue Marcellin. The site has a certain vintage feel to the design which lets the art and posters become the main focus of the page.
There’s a lot happening on the home page including a video and a Pinterest embed. Interior pages are a little less crowded and offer a lot of filtering options to refine your search.
Inspiring feature: When hovering over images in a product collection they zoom in to show the full (albeit smaller) piece of art. This is a nice reversal of the usual zoom in on hover effect you usually encounter.
Longboard Living are a Toronto based skate brand that have been operating since 2008. Their site has none of the traditional “furniture” that you often associate with an ecommerce site. Unusually they use the left hand side of the viewport to list quick access to all 14 different sections of their store. This feels like a very intuitive way of displaying a long list of products collections. It’s also possible to hide the menu should you wish.
The remaining part of the screen real estate is put to great use on the home page with a rather unique approach to the over used carousel. Instead of sliding in a series of images from the second panel rolls up from the bottom of the screen to reveal a full screen video background image and a three part video series about the brand.
Product detail pages also take advantage of large product photography and on occasions include video of them in use. Check out the Arbor Backlash page to see this in effect.
Inspiring Features: Great use of screen real estate to show of their products and the use of video to further sell the brand and products.
Ugmonk offer a wide range of products all designed in house — from t-shirts to typography inspired coasters and mugs. The story behind the company forms a major part of the site and offers real insight into their history and purpose.
Ugmonk use a subdomain to host their online store whilst using their main domain for the home page, about section, lookbook and blog. The two sites work very well together and integrate well. The actual product pages are nice and clean and allow you to view the products without any other elements intruding.
Inspiring feature: When viewing a product collection a neat little sub menu appears just after the page loads offering up other collections you may not have otherwise clicked through to.