350,000 Shopify Themes versus 1 Custom Magento Build
Can the Shopify store UI match Magento?
Once upon a time, a client commissioned us to construct a leading-edge online marketplace.
'Build me a destination of beauty and innovation,' she said. 'Make it so pleasing to the eye, that it will draw customers from far and wide across the internet.'
Honestly, putting beauty before functionality was a challenge for us. To a man (or woman), our Magento customers wanted speed, efficiency and greased sales funnels. Now, we would have to put these in the queue behind form and beauty.
Our client was a meticulous planner, she obsessed over each detail, part and page of her website. Her enthusiasm was contagious and we threw ourselves into the project, spending many hours over budgeted time, pushing ourselves to make her dream an online reality.
Unfortunately, just as the new work was about to take flight, difficulties appeared and consternation arose. Despite best efforts on both sides an impasse was reached and despite all attempts at resolution, the great construction was closed down. Another was started in its place, this time using Shopify instead of Magento version 2.
Magento vs Shopify in the Design Space
As many people interested in electronic commerce know, there is major online competition between Shopify and Magento. While we recognize that Shopify is a flexible and highly capable platform, we held the view that Magento would be more difficult to build but would reward the extra work it required with a more optically pleasing result.
Thus, we were particularly interested in the design outcome, after having sweated over small UI details, spending hours crafting HTML, CSS and JavaScript into shape.
It would be fascinating to see how our painstakingly constructed, hand-coded art would stack up against a Shopify template. (To be totally transparent, we started with a theme as a base for our development, but this was modified beyond recognition by the time the project went live.)
So, we decided to deconstruct the home page to find out. Please come along for the ride!
Home Page Design Duel: Shopify vs Magento
Before we show the complete home page from each platform, below are some element highlights.
Shopify images are displayed first, then the Magento equivalent. All images are snipped from webpages that are loaded onto the same display. Each homepage has been viewed after a hard reload in Chrome Version 85.0.4183.102 (Official Build) (64-bit).
Shopify vs Mage Comparison Structure
In all cases (except the side by side comparison), the Shopify version is the top image. The Magneto equivalent is the image below.
Click on any of the images to enlarge them.
Page Header:
Below are snips of the dueling page headers.
Our assessment: There is an obvious lack of symmetry in the Shopify version. At this resolution, the Shopify navigation has been forced to bend around the left aligned logo, seemingly merging with the payoff line below the logo. The shopping cart has also been forced below the top three icons on the right.
The Magento version at this resolution, simply looks good. It is symmetrical, and easy on the eye. Knowing the hours of work required to make the symmetrical lineup in the Magento header, it is possible that the Shopify banner could be made to look equally good if enough time is spent on it.
Main Banner:
Below are snips of the dueling banners.
Our assessment: Both banners look pretty good. The Magento one however is a clear winner for us because its bigger and bolder. Product placement though similar in both versions, larger, more prominent and in-your-face on the Magento version.
Shop By Category
Below are snips of each version of the category slider.
Our assessment: The Shopify 'Shop By Category' heading is better, the Magento version is insipid. However, Magento does a better job of showcasing the product categories in a stylish manner that is appropriate for the website's overall look and feel. The Shopify 'View More' buttons are a little pedestrian for this kind of up-market store.
Side By Side Visual Comparison
The final reveal below, shows both full home page views side by side for the ultimate comparison. In this case, the Shopify version is first on the left and the Magento version is on the right.
Our assessment: There is simply too much white space on the Shopify home page. The orange flash at the very top of Shopify's home page is visually jarring and difficult to read. It is hard to fathom why the message it conveys is of enough significance to justify visually unbalancing the above-the-fold view of the home page. White space distribution is uneven and there is way too much of it. This forces the page to be a lot longer than necessary and relies on the scroll-patience of the shopper to browse the contents of the entire page.
At the lower end of the home page the brand slider, newsletter signup and the footer, together make up a styling nightmare that speaks for itself.