How Gymshark’s Ecommerce Site Grew A £1 Billion+ Company

Becoming one of the fastest-growing ecommerce brands in the UK. Gymshark has managed to corner a section of the saturated sportswear market. Standing at a value of over £1 Billion. Gymshark Recently accepted an investment offer from General Atlantic, for a 21% stake in the company (Forbes)

The increasing popularity of ‘athleisure’ clothing has continued to drive sales. Most brands offered gym wear designed for functionality,  as opposed to being desirable and fashionable. Identifying and entering this market with the approach of ‘aspirational but affordable’ apparel. Resulted in a disruption to larger competitors such as Nike and Adidas. Leaving small gym wear brands trying to jump on the same success path.

This success has come with virtually no retail presence. Leading the ecommerce space, Gymshark had a turnover of £176 million in 2019-2020. A staggering amount for a brand that’s only 8 years old. 

How Gymshark’s Ecommerce Site Contributed To The Success Of The Brand

It’s no secret that a well designed and optimised website can do wonders for any business. First impressions mean everything, with over 75% of online shoppers saying that their first impression of a website is a major influence on if they purchase from that website or not. Gymshark has a vision for the brand to stand out and differentiate from the market. Incorporated into all online platforms, including their website. Gymsharks website goes deeper than high-quality images and instagrammable body goals.

Gymshark’s Website

The Home Page

Featured Products

The home page is well structured and offers a few nice touches. These work well. Especially when it comes to driving sales and great user experience. The first being a visual preview of the latest clothing line. 

A short stroll down, there is a preview of ‘new releases’. This can be done by editing the page and adding this element within the page builder. Page builders differ, however, Woocommerce have their own widget/product blocks. Using the new default WordPress Page builder (Gutenberg), you can use product blocks, and add it to your site with ease.

The result is a clean & presentable view of some featured products. Driving sales for this product line. Users can add these items to their cart (with one click). hovering over the picture brings up the Quick add bar with size options. This feature also integrates with stock levels, which is a great addition. 

Gymshark has not stopped there. They have also integrated many product images into their hover effect. Presenting the user with another product picture, when hovering over it. Not only does this make the site more interactive. The feature is a great way to reinforce a buying decision. Showing more features of the product (in this case – another angle).

Everything is designed to encourage a sale or increase order value; in a user-friendly way. When the user clicks this quick add feature, their cart is loaded along the right-hand side. Allowing them to see everything they have added, as well as change quantities. Gymshark also uses a custom related product section. Presenting this at the same moment a user adds a product to their cart. Naming this pop up “You Might Also Like” adds an element of personalisation. This gives Gymshark the ability to increase order value, as cross-selling can increase order value by 70%. For the user, this may assist them in finding the products they want, speeding up the purchase process.

Navigation 

The site utilities clear and impactful navigation tabs. High-quality original images enhance the navigation experience to category landing pages. Instead of having to find and click the menu buttons. The user is able to go deeper into the site, from the home page, making it easy to find what they are looking for. Of course, a navigation bar is available. But these options take users to the most popular sections of the site. Without having to look through a vast amount of options. 

The full navigation bar is clean and offers a simple selection of categories for the user. This section is tucked away at the top of the site. The top of the homepage is minimal, keeping the focus on the products/content onsite. This is displayed on every page of the site, allowing the user to navigate with ease. 

Page Header 

The desktop site displays a text carousel feature, underneath the home bar. This is either applied through a theme or a third party plugin. Present on every page across the site. A small thing that can have a big impact. Getting across messages, to re-enforce security, peace of mind, or answer a FAQ. Without taking the user away from their shopping experience. Gymshark has executed this feature well. Linking each section of text to a specific landing page on their support hub. On mobile, they keep it clean, due to a smaller screen. Large navigation buttons promote a better user experience in this case. 

Many plugins or themes offer dynamic options. We have always built our own and implemented them onto our client’s sites. Take ‘Simply Hair’ for example. We have created and used this feature for this client.  

Category Pages 

Product Layout 

Like many ecommerce sites, Gymshark has a vast range of products, and nothing gets quite as dynamic as clothing.

Throughout the site, product pages are tidy and colourful, keeping to a theme. Small things like a consistent background for each product box, make it look and feel premium. All product images are of the same size. 

The site uses a series of hover features. Which showcase a different model wearing the product or a different angle. So the user can get a true feel for the product, without leaving the page. Without this you may have to click each product that grabs your attention, to get a further look. Meaning you spend an endless amount of time loading pages. With the use of these features. You keep the user on this page and offer options to increase the chances they will look at more than 1 product. 

Product Filters 

Many ecommerce sites offer a multitude of products. Variants through size, colour, fit, and price… the options can be endless. Without the ability to filter, the user may give up before they have found what they are looking for. 84% of sites have a mediocre or poor product filtering experience.

In this case, Gymshark has some customization going on, and quite possibly built/coded this themselves. We’re not saying you need to do this. Just using a well-designed plug-in or filter experience can create product boxes for each colour, size etc. Allowing the user to filter results. This can be achieved by using a third-party plugin like iconic’s one for WordPress sites. 

Gymshark has designed a great filtering experience for the user. Their custom buttons and options allow the user to filter results with ease. Unlike most, there is not an overwhelming amount of filter options. 

Quick Add

The use of a ‘quick add’ to cart feature. Allows the user to add items to their cart/basket within category pages. Removing the need to leave the page. The user can then explore these pages, adding items as they scroll. If this was not possible, it’s likely the user would get bored of having to add an item. Clicking back to reload the page they were on. This could impact the number of products a customer will add to their basket. Adopting this feature on your site is a great way to allow the user to browse your products. And add things as they go along, increasing the chances they will add one product after another. 

Livechat

One of the biggest advantages of bricks and mortar have over ecommerce is sales agents. Being able to answer questions and help customers find the right product. Is the reason why many businesses choose to offer a brick and mortar experience. Gymshark uses Live Chat well on their site, to offer this experience, on a virtual landscape.

With this live chat feature, you get connected to a sales agent, who can assist you while you continue to browse the site. The chat feature is well presented, and even offers the ability to rate the sales agent who is helping you. It’s customer service like this, that can be the deciding factor on whether a customer will return. 

What’s even more bespoke about Gymshark’s live chat feature, is how the display/icon changes. It adapts to the page a user is on. When browsing the ‘leggings’ page, the user is pretending with a small box. Asking “Hey 🙂 can we help you choose the perfect leggings”. This would again be custom-built to do so. It’s clear that Gymshark doesn’t compromise when it comes to site functionality and user experience. You wouldn’t expect anything less from a company valued in its billions.

Integrating a live chat feature into your site is simple enough. Most generic live chat plugins will do the job, but our recommendation is to use Intercoms. If the price is an area of concern then free ones like Tidio work well enough.  

Product Pages 

The seamless experience continues throughout the whole site, even on product pages. Well written product descriptions. A clear layout. The use of White space. No endless scrolling. Gymshark has put a lot of thought into this. 

Apart from the drop-down options for descriptions., delivery and reviews. A favourite feature has to be adding colour swatches to products. This can be managed in the product gallery. 

This allows the user to see the same product in different colour options. Without having to find that specific colour elsewhere on the site.  Making the process quick and easy. Giving the user the ability to add the product they like, and choose the size and colour later on. It also gives users the ability to buy the same product, but in a different colour option. which the user may not have thought about or knew they wanted…a nice cross-sell integration. What makes this feature stand out, is that each colour variant is consistent with image quality, background colour, and size. 

Gymshark also embeds video into their product pages. This can increase on-page engagement and really bring products and their functionality to life. For a WordPress site, you can use a plugin from Iconic, to include product videos on the product page. 

That’s not the only sales tactic Gymshark has used on their product pages. 

The use of a custom related product feed integrates another cross-sell tactic. The ‘you may also like’ feature appears again on product pages. Increasing the chances the user will add more products to their cart before checkout.  

Shopping Cart 

The shopping cart provides a clear view of what the user had added, and the prices associated. There is also the option to increase/decrease quantity,  through a quantity editor plugin.  The use of  “you may also like” section through the related products plugin Aims to increase the order value before the checkout phase. This also may help the customer complete their outfit, or add an item they couldn’t find before the checkout. Making them a happier customer. 

The site also encourages security and peace of mind. With the use of a payment method plugin. Displaying the payment icons before checkout resonates with users. Knowing they can sign into their PayPal or use Klarna before getting to the checkout. Which means they could be more likely to proceed. Showing a familiar Icon can also tell users that the site is safe and can be trusted. 

Checkout 

Standard checkout pages can be lengthy. The checkout will involve many steps, making it easy for potential customers to give up. Before they even hand over their cash.

Gymshark uses a one-page checkout plugin with their site. Giving their customers the ability to have a quick and easy payment process. Without having to load more than 1 page. This can reduce the cart abandonment rate. Giving customers a better experience.

The site also uses a multi-step feature with their one-page checkout. Having too many fields at once can make the form too long and overwhelm users. Gymshark has eliminated this from happening. By reducing the number of fields a customer has to fill in on a single step, breaking down the process. Making it more enjoyable…well as enjoyable as parting with your cash as can be. 

By Creating a multi-step checkout form. You can make sure that each step contains the least number of fields and actions. Helping You deliver a great checkout experience, convert more customers, and boost sales.

Gymshark has not stopped there either. By having an autofill feature at this stage of the checkout process. Enhancing The user experience. Making it even simpler to fill these fields in and complete the order. Autofill enables the site to populate fields. Some of which are your address through postcode lookup systems. Meaning you don’t need to type in your full address. 

It’s clear that Gymshark has made the checkout process as painless and easy to use as possible. Removing every blocker. So the user can become a customer and not worry about a lengthy checkout experience. This can also be achieved on WordPress, using the Flux Checkout plugin.

Gymshark’s Blackout Event 

The blackout campaign was one of the most successful campaigns Gymshark have run. So much so, they sold 90% of their inventory in one day! Their traffic reached a peak of 6.3M – enough to crash the site.

There was a great deal of marketing strategy that went into this campaign. yet let’s focus on the ecommerce side of things. 

Gymshark changed the whole website for this campaign. They adopted a black/dark theme in the representation of Black Friday. They had embedded a countdown clock on the site’s home page. Creating anticipation.

For a week leading up to the event; the whole site had adopted this theme. Navigation, options and content had all changed, to focus on this event. Reinforcing it’s messaging. A whole site redesign and theme was possible through the use of a selection of plugins.

Messaging and communication were clear throughout the whole site. Users had been prompted to find and add items they liked to their cart, creating accounts. Which was a great way to capture data. Users were then able to head straight to checkout when the sale went live. Making it easier and quicker to get the items in the sale. 

Almost instantly, the queue for the online checkout was rather long.  Many waiting in FOMO (fear of missing out). Gymshark managed this well, with the use of a custom-built virtual waiting room. Virtual waiting rooms are a great way to reinforce confidence. Telling the customer they can still buy the items they want, but the site is running slower, and that they are in a queue. 

Wrapping It Up 

Gymshark’s website is well built. It’s clean, vibrant, and sticks to a theme. It’s got great added features, through plugin options and custom build integrations. Giving them the ability to offer a unique customer experience. Monetising  on the functionality the site offers. 

When it comes to building sites, the team at Digital Beans know their stuff. Our in-house specialist (Ben Linden), has built some of the best sites on the market. You think I’m biased. I probably am. Nevertheless, check out the following sites we have built, for a glimpse into what we can do. 

Simply Hair

Adios Plastic 

Have you been scratching your head over your website? Got a question? 

Get in touch today. 

Why Your E-commerce Checkout Is Killing Your Sales

We know you’ve done it, we all have. 

Leaving items in the cart without parting with your cash, is something many of us are guilty of. Whether you left because you found it elsewhere or simply because you ran out of time, it’s something that is all too common. In fact, a survey conducted by Barclaycard found that 41% of shoppers have abandoned a transaction during checkout in the past year, adding up to £18bn in lost sales.

As a business owner or marketer, you may be scratching your head on why this is happening. You have succeeded in getting people to the site, created a seamless shopping experience, your customers have added your products to their basket…it’s going great. Yet, the rest of the process is not as simple as you think. In most cases, users face another 5 steps from the product page. which can present blockers when purchasing.

Why Do Users Abandon Cart?

Cart abandonment rates differ from industry to industry. Each online store has its own set of barriers or blockers, from choosing a delivery slot for your groceries to the size of the engagement ring you are about to buy. Product cost can play a big part in these stats with higher valued purchases having higher cart abandonment rates – Salescycle. Retailers can experience abandonment rates below the average, if they have worked hard to improve the user experience, or have addressed some of the issues that cause abandonment, such as choice of payment methods.

Baymard research suggests 62% of all checkout abandonment rates were down to checkout process factors. Imagine you are shopping on mobile before the train comes. Or you have dinner in the oven and you need to go online and buy that product you’ve been meaning to. If this takes too long due to a complicated checkout process, leaving you searching for your card details and everything to apply for a mortgage; You are most likely going to run out of time, get frustrated and go to someone who offers a much simpler solution. 

Data Source –  Baymard 

A simple, quick and reliable checkout process can be a winner. It can increase your conversion rate. Order value. Even the likeness of return purchases. 

What Is A Well Optimised Checkout Experience?

A huge benefit E-commerce holds over bricks and mortar is: convenience, ease of use, and speed. A well optimised checkout experience should offer all the above. One should remove distractions, making it as easy as possible to buy. If your E-commerce site does not offer this, then shoppers won’t hesitate to leave and go somewhere else.

Furthermore, Baymards research also suggests that Improving the checkout process can have a significant impact on conversion rates. An average large-sized e-commerce site can gain a 35.26% increase in conversion rates. Though better checkout design alone. 

Niel Patel states that the design and layout of your checkout “is where much of the buyer’s decision to buy or not buy will rest”. A well-optimised checkout experience should be clear, informative and be as easy as possible for the customer.

How To Create A Well Optimised Checkout Experience?

When it comes to sites built on Woocommerce, Plug-ins are your best friend. They offer a whole host of functions. Improving customer experience and site design. 

At digitalbeans, we use a vast array of plugins for our web clients, to ensure they get the most out of their website. Some of our favorites include one called Flux Checkout. This plugin allows you to improve the checkout process. Drive sales. And give customers the best experience. 

Below are some of the ways you can optimise your checkout well, with the use of plugins; in this case, with Flux. 

Easy Payment Process (One Page, Multi – Step Checkout)

Standard checkout pages can be long. The checkout will involve many steps, making it easy for your potential customer to give up. Before they even hand over their cash.

A one-page checkout could be the solution you have been looking for. Give your customers the ability to have a quick and easy payment process. Without having to load more than 1 page. The result is a massive reduction in abandoned carts. As well as a better experience for your customers. Especially if their internet connection is not lightning fast. 

A checkout page with a ton of fields can overwhelm the customer right from the start and lead them to bounce. Reducing the number of fields a customer has to fill in on a single page can prevent this. 

By Creating a multi-step checkout form. You can make sure that each step contains the least number of fields and actions. Helping You deliver a great checkout experience, convert more customers, and boost sales.

Auto-Populating Fields

We can all agree that filling in our shipping & personal details can slow the process down. 28% of users agree that this is the very reason why they abandon their cart. The biggest section of the checkout process is the billing/shipping address. House/flat number, street name, city, postcode…it doesn’t seem like a lot. This can add up to six individual fields to populate, many may give up or rethink their purchase decision.

An address lookup plugin will allow customers to input their postcode. looking up their address with an autocomplete function. Saving time and errors. Giving customers a quicker and smoother experience during the checkout process.  

Dealing With Cart Abandonment

Despite the measures you take to prevent cart abandonment. There will still be those who leave your site before completing. which you may not be able to control. 

This does not mean they are gone, or won’t return. In fact you can encourage them to return with some clever tactics. 

The most effective methods for re-capturing those who abandoned their cart is through remarketing. Remarketing is when you target those customers who abandoned their cart, with tailored messages. Done via both display and email marketing. Remarketing emails generate higher open and click through rates than regular marketing emails (SalesCycle). You can get personal and even show the products they had in their basket – cool right? 

Customers respond positively to remarketing if done correctly. If you aren’t already doing this, it could be time to start. Give the customer a reason to come back and not lose the sale.  

What Next?

How well optimised is your checkout – do you know? 

Feel free to revisit your website and take the points you read about today. If you have any questions or would like some advice, don’t hesitate to ask below.

Whether it’s improving your checkout process or assisting with some remarketing campaigns. The team here at digitalbeans have years of experience and proven results. 

We would be more than happy to help you achieve your goals – get in touch with us today.