Case Study

Switching Ability Superstore to Shopify

Ability Superstore is a leading supplier of mobility aids and disability equipment in the UK. I have been building and maintaining their website since 2009, and it has seen many changes.

They were previously managing their online store using Shopit, a bespoke ecommerce platform I had built back in 2010 but was no longer maintaining. This year they decided to move over to Shopify to take advantage of newer features and technologies.

I Provided

  • A new UI design for the storefront
  • A responsive Shopify theme
  • Integrated a solution to enable VAT exemption on a per product level
Ability Superstore Desktop Homepage Ability Superstore Mobile Homepage

The New Design

The brief for the new website was to have a more advice-led feel to it, which included elements such as blog posts, user guides and social media snippets. However, we didn't want to deviate too far away from the current style.

 

Having worked on the website design since its initial conception in 2010, I already understood the business and what the company was about; offering a good product range, excellent advice and outstanding customer service.

Pinterest Moodboard

Analysis & Preparation

As with any new design project, I first spend some time looking at websites of competitors and similar industries and create a mood board on Pinterest.

  • Primary Red
    #BC1F31
  • Primary Yellow
    #FFDE00
  • Brown
    #BBA291
  • Light Brown
    #F6F2F0

The two key brand colours of Ability Superstore are red and yellow, both of which are quite strong, and so to offer a more neutral tone I introduced light and dark brown colours.

Almost before we knew it, we had left the ground. Poppins
All their equipment and instruments are alive. Roboto

For fonts, I went with "Poppins" for the headings and "Roboto" for body content. Poppins complimented the Coolvetica style of the logo nicely, and Roboto offered a readable font that wasn't too wide or narrow.

To get the designs started, I began with mocking up visuals for the homepage, category page and product page.

Building the Shopify Theme

To make the process of creating the new Shopify theme easier, I first created the designs as static HTML/CSS templates. Creating static templates made development quicker and testing easier as there was no need to publish changes to a server each time. The templates resided locally on my mac allowing access by various devices for testing.

 

Once I was satisfied that the static templates worked in all desktop and mobile browsers, I integrated them into a bare skeleton Shopify theme section by section starting with the header and footer.

The VAT Exemption Conundrum

The core requirement for this project was to apply VAT exemption to particular products within the checkout, and an issue with Shopify is the inability to modify the checkout.

We tried many solutions:

Solution 1 (Failed)

The UK's VAT rate is 20%. My idea was to apply an automatic 20% discount to the checkout if it contained a VAT exempt product. This solution almost worked except for the fact that Shopify deducts the discount on the product and then re-applies VAT. We worked out that the discount should be 16.66%. Unfortunately, Shopify doesn't allow floating point percentages as discounts!

Solution 2 (Failed)

This idea wasn't tried due to its complexities, but was more of a plan. The idea was to duplicate every product that had a vat exempt equivalent. When the customer confirmed they were vat exempt in the cart, a little bit of Javascript would flick the eligible products over to their VAT exempt equivalents. This solution was too complicated for my liking from both development and admin views.

Solution 3 (Working)

This solution was to add a variant option containing the inclusive and exclusive VAT prices to all applicable products. The customer would select the option before adding to the cart. For this to work, the Shopify VAT had to be turned off and set to 0%.

Shopping Cart
Shopify logo

Switching to Shopify?

I can help with your Shopify migration. Get in touch to discuss your project.

Find out more