Science Fitness

A Supplement Brand Held Back by Its Platform

Science Fitness sells premium supplements made in the UK, to customers who care about what they put in their bodies. A brand selling health supplements needs a website that looks the part and reads as trustworthy.

The old site was WordPress with WooCommerce. It worked, but it had become difficult to live with: multiple plugins competing for space, a checkout that needed separate configuration and maintenance, a JavaScript stack that had grown with every new feature, and a platform that required constant attention.

After looking at it properly, it was clear the store needed to be faster and more premium, to match the quality of the product.

Why Shopify?

Moving from WooCommerce to Shopify is not the right call for every ecommerce business. For Science Fitness it was, and it is worth explaining why.

WordPress with WooCommerce is a capable platform, but it is high maintenance. Core updates, plugin updates, security patching, PCI compliance and hosting performance all take hours of ongoing management.

Shopify removes that burden. Hosting, security, PCI compliance and uptime are Shopify's responsibility, so nobody has to worry about the store going offline on a busy weekend.

Shopify's checkout is also among the most heavily optimised in ecommerce, with Shop Pay, Apple Pay and Google Pay built in as standard. On WooCommerce, each of those needed separate integration and configuration.

Then there is the admin. Products, orders, inventory and customers all live in one place, rather than across a WordPress dashboard with a commerce plugin sitting alongside it.

One Custom Theme, Nothing From a Template

The Science Fitness store does not run on a purchased theme with the colours changed. Every line of the front end was written for this brand. That costs more to build and takes longer to deliver, and it is what makes the numbers below possible.

The old WooCommerce homepage loaded 36 separate JavaScript files and an HTML weight of 306 kilobytes. The new Shopify homepage loads 2 JavaScript files totalling 20 kilobytes, with an HTML weight of 183 kilobytes.

Every feature is written into the theme rather than installed as an app. This matters because each Shopify app typically injects its own JavaScript into every page of the store.

Glow effects are built with gradients rather than blur filters, because blurred layers force the browser to repaint on every animation frame. Product gallery images preload in the background while the browser is idle, so switching between images is instant with no flash of a half-loaded photo.

Animations move and fade elements rather than triggering layout recalculations. Adding to basket never reloads the page, and the cart flies out immediately.

Science Fitness customers arrive predominantly on mobile, so every kilobyte and every unnecessary script removed is felt directly by the customer.

A Dark, Premium Design Built Around the Products

A near-black canvas. Generous whitespace. Colour used as an accent rather than a background wash. Brand green sits as the primary accent across the site, but the detail that defines the design is per-product colour theming.

Each product in the range owns a colour. Energy is red. 4Gamer is green. Creatine is cyan. Hydration is indigo. Magnesium is yellow. Recovery and Gummies are orange.

Open any product page and the whole page adopts that product's colour.

A single colour value is stored against each product in the Shopify admin. When the client adds a new product they set one colour, and the entire page themes itself with no code.

There is an accessibility layer built into it too. The site works out whether each product colour is light or dark and switches the button text between black and white accordingly.

Typography carries the same consideration. Space Grotesk handles headlines, Inter handles body copy, and IBM Plex Mono handles labels, prices and technical detail. Prices use tabular figures so digits align cleanly in columns.

Every Detail Written From Scratch

Buttons reveal an arrow on hover that slides in from the right and nudges the label across, consistent with every call to action on the site.

Content rises and fades in as the page is scrolled, section by section. The reviews carousel loops without a visible seam, its edges fading softly into the background, pausing when a visitor hovers to read.

The product gallery responds to the direction of navigation. Selecting a later thumbnail brings the new image in from the right, an earlier one from the left.

The homepage product cards are lit in their product colour, with the tube breaking out past the card edge and lifting on hover.

The fly-out cart shows progress to free delivery in real time. The bar fills as the customer adds items, and the message updates to show exactly how much more they need to qualify.

On mobile the menu is full screen. Tapping Shop slides in a second panel showing every product with its image and price.

The showpiece is the Made in the UK certification card, where a sheen of light sweeps across it. The seal's glow breathes, and its dashed ring slowly rotates, rendered in the product's colour.

Every animation respects the reduce motion accessibility setting. For any visitor who has asked their device to minimise movement, everything holds still.

What Was Built, and Why It Matters

We chose Shopify to remove the maintenance burden and deliver a stronger checkout. We built the theme from scratch because templates limit both performance and visual range, and a premium supplement brand can afford neither.

Customers get a store that loads quickly on mobile data. The Science Fitness team get a platform they can manage without hiring developers.

That is what our website design service is built to leave behind: a store shaped around the product rather than around a template.