Sota Fuel: Shopify theme built from scratch

What is Sota Fuel?

Sota Fuel makes an electrolyte drink for people into action sports, with fewer additives than regular sports drinks.

They wanted a site with a lot of motion and animation that still loads fast.

Sota Fuel homepage product-collection section with animated bottle reveal for the electrolyte range

Theme built from scratch

I built the theme from scratch, without starting from an existing theme. It is written with Tailwind CSS, GSAP and plain JavaScript, which keeps it fast and easy to change.

Everything can be edited

One of the biggest priorities for this build was making sure everything could be changed easily. The entire theme is editable through the Shopify theme editor, so the client can tweak layouts, colors, text, and more without needing a developer.

The few things the theme editor cannot handle live in metafields, so Sota Fuel can still change them themselves.

Editing a section of the website - they are all this customizable, if not more

Animations

The animations were a big part of the project, and they could not slow the site down. I built them with GSAP: bottles that fall into a glass as you scroll, counters that start when the section comes into view, and images that slide in next to the text. Everything runs on scroll, and images and videos are lazy loaded.

Sota Fuel homepage scroll animation: bottles falling into a glass as you scroll

Sota Fuel animated stats section with scroll-triggered counters

Sota Fuel scroll-animated image-with-text section pairing product photography with brand copy

Purchase Flow & Upsells

The cart had to be easy to use and still give the customer a chance to add more.

Upsells sit in the cart, so the customer gets suggestions before checkout
A custom bundle builder lets the customer put together their own pack, with Simple Bundles under the hood

Sota Fuel slide-out cart and checkout flow with in-cart upsells and a custom bundle builder

Page Speed

The site had to stay fast despite everything moving on it. The site loads in under 1.5 seconds for over 75% of users, which is fast even with all the animations and visuals.

Here’s what I did to keep it quick: