5 Great Examples of Shopify

Shopify is one of the most popular platforms available for ecommerce websites – and for good reason! Shopify is effectively the WordPress equivalent, but for e-commerce solutions. It is simple to use and has an intuitive UI (User Interface) that can be easily picked up. If your main business is selling online, then in many cases Shopify can act as both your storefront and your corporate front.

Although Shopify offer several customisable themes, we would recommend you develop your own as Shopify offer an abundance of different functionalities to suit different designs. Here we have picked 5 really slick, unique, and beautiful websites that show the best you can get out of custom built designs from the Shopify platform.

First up is Master & Dynamic, who have one cool website – and really what you would be expecting when it comes to some of the more refined and expensive headphones around. The homepage doesn’t give too much away, but sets itself out as clean and structured. There is also a great user journey for customers to learn about the sound dynamics of each pair of headphones on the individual product pages.

What we really liked was how they integrated the video into the homepage design. (It is also one of the cooler product videos we have seen, so definitely check that out). The multi-currency option that Master & Dynamic have utilised on the site is one great example of a useful function that you can incorporate into your website when using a platform like Shopify.

Second, is Hardgraft. It’s quite a bold move to have the first page on your website as the product page, but then again the product is ultimately the focus of the site – and we think Hardgraft gets away with it. Whilst there are options to categorise the products more specifically in the fun menu popup to the side, they are already cleverly colour coordinated as you go down the page. What’s cool about this site is that whilst browsing through the shop you can buy any of the items without having to go into the specific product pages – something that makes online shopping a much more enjoyable experience.

For the more casual buyer – the product pages are really beautiful. Imagery from all angles allows you to see the product in action, and the very smartly laid out description gives off a slick look. What we like is when you add an item to the basket, a nice pop-down menu appears giving you a breakdown, and makes it easy to follow through with your order. The final checkout page also has a well-refined look – something that keeps in line with the rest of the site, and the Shopify allows you to do.

Third, is The Horse – a curated collection of leather lifestyle goods with a fresh and beautiful design. We particularly like the photography on this site showcasing all the products in stunning and bespoke compositions. The white background also helps to keep the site looking light.

The element of this site we feel needed mentioning is the subcategory options that appear when users choose from the ‘Time Tellers’ or ‘Leather Goods’ categories. A drop down menu is displayed that shows images of the various subcategory options rather than text to direct the user to the relevant page. This option allows users to easily see what subcategories are offered rather than waiting to be directed to that page.

Fourth, and something on the more hipster end of the scale with a design to follow suit, is Love Jules Leather, which really manages to give off that unique feel. Opening with a video that takes you on a journey through the process of making leather boots, the Homepage manages to get straight to the point by displaying some of its featured products, whilst also captivating you with the brands identity.

We liked this site because of the way in which they keep you engaged from start to finish. We especially like the functionality of both the Collection menu and the Cart menu/page being able to be accessed from both sides of the screen and moving the page to the side. This is a good space saver for many large page designs and allows the user to have the control to display or keep these hidden. The addition of the Instagram feed at the bottom of the homepage has also been added in a great way to make the images feel totally integrated to the site that we don’t often see.

Lastly, and by no means the least, is one of our own – SAFiYAA. Biasness aside this site oozes style, something quite essential when it comes to the high-end of fashion. The homepage has a slider that takes you through some of the best of their most recent campaign – leaving all the other sections clearly laid out and accessible.

What we like about this site is the product page – they are displayed in a smart a well-ordered fashion, whilst also allowing the viewer to view two angles of the product by being responsive to your mouse – something that makes browsing the store a much more enjoyable experience, and highlights the versatility of Shopify as well.

Shopify and Diffusion Digital

Shopify is one of our favorite platforms to work with here at Diffusion Digital – first off it’s such a great platform for small to medium sized businesses to manage hands-on, but also the level of creativity that you can apply to your own designs is endless. If you like some of the things you’ve seen in the above examples, then please don’t hesitate to get in contact with us. Creating a bespoke Shopify design for you and your business, that is both beautiful and efficient, is the kind of thing that we take pride in!

Responsive Web Design – What Is It?

Different websites have different needs and therefore will require different features in order for them to be successful. The needs of an e-commerce site compared with that of an accounting firm are far and few between, for example, where a clothing brand is selling a range of T shirts, they need to have a feature to let customers know when a particular size or colour is out of stock. This necessity would be obsolete in an accounting firm where they are offering their services rather then a physical product. Regardless of a particular site’s needs, however, there is one feature that is critical to the success of all sites – mobile-friendliness and responsive design support.

 

What Are The Basics?

Responsive Web Design or RWD is the technique of designing and coding a website so that it provides an optimal viewing experience for the user – easy reading and navigation with as little resizing, panning and scrolling as possible – across a whole host of devices (ranging from desktop computer monitors to mobile phone screens).

The designer who is responsible for creating the Responsive Design has to ensure that the websites navigation elements, screen-layouts, text, images, audio/video players and all other UI (User Interface) elements readjust themselves on a variety of devices. This means that you do not have to waste time developing two separate sites – one for desktop and one of mobile – and can therefore save yourself a lot of money and hassle!

More people in the UK now use their phone to browse the Internet then with their computers or laptops. This shift in device usage outlines the importance of incorporating a Responsive Design in your plan. In fact, Mashable even dubbed 2013 the Year of Responsive Web Design. Pete Cashmore wrote,  “For those of us who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”

 

What Does Responsive Web Design Look Like?

The purpose of Responsive Design is to have one site, but with different elements that respond differently when viewed on different sized devices.

For example lets use a traditionally ‘fixed’ website. When viewed on a desktop computer, the website might show four columns, but when viewed on a tablet screen you might be forced to scroll horizontally through these – which is something that users aren’t too fond of. Other times elements might be hidden or images appear distorted. This is often complicated by the fact that mobile and tablet users can view websites in both landscape and portrait orientation.

On an even smaller smartphone screen, there are often even more challenges. Largely sized images may break the layout, and if the graphics are too heavy, the pages can take a long time to load.

With Responsive Design, however, the tablet version could automatically adjust to display just two columns – making the content readable and much easier to navigate. On a smaller smartphone screen, the content could appear in just a single column, stacked vertically – therefore having the same beneficial effects as the tablet. Previously distorted or cut off images would have automatically resized to the screens dimensions.

Basically the content on your website automatically adjusts to whatever device it is being viewed on!

 

How Does Responsive Web Design Work?

Responsive websites use something called fluid grids. All the elements on a page are sized by proportion rather then by pixels. For example, if you have three columns you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.

 

To Round Up

Got the basics of Responsive Web Design, or still a little lost? Every website, regardless of that particular site’s goals or the audience that it serves, will benefit from a display that works great across different screen sizes. As a consumer it is now expected that a website is responsive when they access it from a device other then their computers – when the website isn’t, they will immediately be aware of this factor, and ultimately it can and will affect how they engage with your business.