November 30, 2018

Shopify for Professionals

Back to Blog

Challenges with E-Commerce

As web designers & developers every now and again we are told by clients that they plan to sell products online. E-Commerce has always been a tricky service to provide as there are many ways to do it. You can sell directly from your own website with a custom built E-Commerce platform, or you can use a third party site like Etsy or Ebay. Custom platforms always came with a hefty price tag because of all the moving parts –

How is shipping handled? What Payment Portal are you using? How is inventory handled for products sold online and in-store?

Every aspect would require specific programming and there wasn’t a versatile platform that would work for any situation.  Shopify wanted to change that.


Who is Shopify for?

We recently took on a project to help a client who had hired a developer to create a Shopify website using a provided design. The developer was able to replicate the design to an extent, but some core functionality and structured content required elements to be hard-coded. This as a result caused some issues. The once versatile platform had now become rigid and only editable via code. So why did this happen?

Shopify has a large library of themes and add-ons. These themes are built with flexibility in mind. You can add content blocks, sliders, social media icons etc. but in the end, the overall structure of the theme cannot be changed by a non-developer user. For individuals, who are not designers or developers and are looking to build an e-commerce website with no customized user experiences these restrictions don’t bother them.  But that is rarely the case.

The second that a web designer is brought into the equation, they may have preferences and requests that break the mould of the chosen theme. The solution? Build a Shopify theme from scratch with a design that reflects the template structure of the Shopify framework. The problem with this solution is that the costs associated with the website development have significantly increased based on the additional skills required. You are now paying premium costs (vs. using an open source platform) and also now need to hire a developer who is versed in “liquid” – Shopify’s own custom programming language.

So, who is Shopify for? In our opinion, Shopify is a great platform for small businesses not looking for custom layouts with specific functionality.


UX issues with Shopify

So now that we’ve discovered who Shopify is an ideal solution for, we wanted to identify aspects of the platform that caused frustration.

One of the requests from our client was that they wanted a way to display products that have a specific tag. Being familiar with WordPress, we assumed that “archive” templates would be available to easily display a filtered result. After some digging we found that while there is no “Tag Archive” template, there is a template used for “Collections”.

Collections vs. Product Type vs. Tags

Collections are groupings of products based on specific parameters. For example, you could have a collection for “Products under $20” where the conditional statement for this Collection would be “Group products where Cost is under $20″. In the same way, you could create a collection of Products that are for “Men” where the conditional statement is “Group products where Tag is equal to Men”.

While this solution works, it made situations overly complicated because there were too many possibilities. In our opinion what would make more sense would be if Shopify simply provided templates for, tags, product type & vendors. Collections could remain for the more complex breakdowns (like filtering by values, compare price etc) but for simply organizing products to show filtered lists, they aren’t very relevant. The best solution would be to allow templates to be created to display filtered results based on Tags, Product Type or Vendor, instead of having to create a “Collection” where the parameters are “Show product type is ‘Outerwear’”. The product type is already defined, why make it so that the user has to do double the work by creating a collection where the parameters are the same. Also, products should be able to appear in multiple “Product Types”. For example, a unisex scarf could fall under “Product Type = Menswear” and “Product Type=”Womenswear”.


Organizing Content

Adding & Selecting Categories

Another frustrating issue with organizing your products in Shopify is that you can’t easily organize / add types and vendors while working on a product. The clean “type and display” interface where you can add a Vendor by typing a name and suggestions appearing looks visually appealing but the practicality would be better suited if the list was upfront as a series of checkboxes.

Too many clicks and not enough options

It appeared that every time I wanted to edit something to help better organize or classify a product I was forced to click on something which then revealed tools that should have already been visible. I liked how clean and clutter free the interface was but found that key tools were hidden just for the sake of hiding them.

How many products are there?

When viewing the “All Products” screen to identify the number of products there was no visual “product count”. The only indicator that there were more products was the next arrow with no pagination to identify how many more products there are.

After doing some digging we discovered that there were techniques that could be done to display the number of products via an XML file. This means that the information is available, it just isn’t built into the framework. From a UX perspective every tool available to the user should be easily accessible. This includes displaying the total number of products, filter options and how the content should be displayed (e.g. in groups of 20, 50, 100 etc).


Everything is hidden, Everything is an upgrade

As I navigate through the back-end of a Shopify site, what should be a simple task often become a large ordeal. Take for example, I wanted to create a simple “Buy Now” button. After browsing for quite some time I came up empty handed. I turned to google in search of a solution. The first result appeared to be exactly what I was looking for, however after 30 seconds into the video I hit another road block. The video said to click the “Buy Button” link from the nav – Sounds simple enough. However the problem is that I didn’t have a buy now button in my admin area. It turns out that this is a feature that needs to be activated by visiting the Settings page (which from a UI perspective is challenging to find), then go to “Sales Channels” then scroll to “Buy Button” and then activate it. This whole process seemed redundant and not as clear as it should have been. The area that appears after activating the “Sales Channel” should be available by default. Not everything needs to be buried or require an upgrade in order to be used as a function.


In Conclusion

In conclusion, Shopify is a great platform for businesses with little knowledge of web design, or for designers who are okay with working within the framework provided. Shopify is widely used and I feel that a lot of the UX issues mentioned will get worked out in the future. With that being said, the upfront costs of running a Shopify site are meant to provide one-size fits all solution to retailers who want to sell things online. The problem is, while their target market is meant to be anyone who wants to sell products without the help of a developer, the reality is the end result will be poorly configured and not properly optimized. So how do you fix this? Hire a developer who is familiar with the platform. This now does not justify the high price tag which originally worked by keeping things “simple”. Our thoughts would be to instead use a free open-source platform like WordPress and have your own hosting package with an independent web host. In theory, you could still do most of the set up / customization on your own, but when the time comes that you want to make things more professional, it will be much easier and cost efficient to find a developer / designer to finish the job.

Share this!

Lee TravagliniLee Travaglini"Nothing is impossible, only improbable"

About the Author

Lee Travaglini is the co-owner of Good Lookin Kids Inc. As a web designer his specialties focus on interactive design, including: IA, UI, UX, WordPress theme development and HTML5 game design and development. He also has extensive experience as a web developer using HTML5, CSS3 (adaptive CSS) and has a familiarity with jQuery (Javascript) and PHP.

With over nine years experience in the Interactive Design industry Lee has developed a strong understanding of the language possibilities and limitations that exist within each interactive design project. This understanding has sharpened his ability to adapt to different design styles and practices on a consistent basis.

Being an entrepreneur and a creator Lee is always looking to expand his abilities and is always wiling to try new creative outlets.


Dribble
/lezus