I design .

I'm Ketan ‐ A Melbourne web designer, developer and illustrator with 20 years industry experience.

New Shopify website for Hearing Dogs UK

24 September 2021 front-end development web design shopify ecommerce

This month, I’ve been working on designing and building the new shop for Hearing Dogs, a UK charity that trains dogs to alert deaf people to important and life-saving sounds they would otherwise miss.

The shop uses the new Shopify 2.0 theme architecture that allows for better customisations, page speed and more flexible content. I built the new theme from the ground up to keep it small, lightweight. And, most importantly, I made it dependency-free, so no Sass, CSS frameworks or jQuery/javascript frameworks.

The design

As with any website design project, I always research and gather my findings on a moodboard. I do this for two reasons:

  1. It gives me ideas for the design.
  2. The moodboard helps to identify consistencies and patterns across similar websites.
  3. It gives me a starting point for creating the wireframes before any design work begins.

One of the challenges when designing the user interface for this shop was working with the two brand colours: green and burgundy. They are both strong and contrasting colours, with the green being quite bright if used on its own. I also had to take colour contrast into account for accessibility.

#A2234C
#72BF44
#000000
#1162A4
#C5891B

Initially, I played around with their secondary colours, but I couldn’t get them to work. So after some experimenting, I finally came up with a colour scheme that complemented well.

The live Hearing Dogs homepage with customisable sections.

The homepage uses Shopify’s new sections and blocks allowing Hearing Dogs to fully customise the content and layout.

An example of product page from the live Hearing Dogs website.

The product page was designed with a floating sidebar so the pricing and cart information always remains on screen. Current work in progress will allow VAT exemption functionality to be added here too in the coming weeks.

The shopping cart contains custom features such as donations and related items.

The cart also contains a floating sidebar and a custom donation feature.

Adding donations to the cart

I get many enquiries for Shopify projects that require some custom features, and this project was no exception. Hearing Dogs needed a one-off donation option in the cart. As there is no built-in solution for this within Shopify and I avoid using third-party apps, I had to develop a solution using features that are already built into the ecommerce platform.

The donation feature in the cart uses built-in Shopify features.

The solution above uses a product with a value of £1. By applying set quantities, the customer can apply a donation of any amount to the cart.

Check out the website at shop.hearingdogs.org.uk and donate to this fantastic cause!