Hale Clothing

Hale Clothing seeks to serve the health and fitness community by selling comfortable, great-fitting, high-quality menswear for those with an athletic or muscular build

Hale Clothing came to Steadfast Collective looking for a new eCommerce website to sell their range of menswear for those with an athletic build.

Shopify was the ideal platform of choice as its primary purpose is to enable businesses to sell, ship and process payments online.

Hale Clothing seeks to serve the health and fitness community by selling comfortable, great-fitting, high-quality menswear for those with an athletic or muscular build.

The team at Hale involved a wide range of rugby players, athletes and sports fanatics in their brand and product development.

Industry eCommerce

Service

Visit www.haleclothing.co.uk

Technology

The new Hale site is built using Shoify.

Using their new command-line tool and GitHub integrations, made it much easier to work on the site in our local dev environments. In the future it will also allow us to easily make tweaks locally, without the changes affecting the live site.

A large portion of work was put into the logic surrounding the product page, as each product would have different variants (e.g. size, colour), and the page info would need to update when you change variants. For example, if a certain variant is out of stock, the “Add to cart” button becomes disabled, and an out-of-stock message appears, allowing you to sign up for an email list for when that product becomes available through Klaviyo.

We used AlpineJS to help us handle a lot of this logic, as it is a lightweight javascript framework that helps add interactivity. We used this to help us build out lots of features across the site, including; adding/updating items to the cart, signing up users to email newsletters, filtering blog posts and paginating the results, image sliders, open/closing modals, displaying different size guides in tabs, FAQ accordions etc.

One of the newer features Alpine has added is a plugin called Persist, which allows states to persist across page loads; this was useful for hiding the announcement banner at the top of the page and keeping it hidden as the user navigates to other pages.

We used TailwindCSS, which is a utility-based CSS framework, to help us quickly build out and style page elements.

Results

Hale was provided with a new website focused on clean, fresh design that showcases their products whilst also telling the Hale story, sharing the thought process behind the brand and putting the Hale community ethos front and centre.