Sota Fuel: Shopify-tema byggt från grunden

Vad är Sota Fuel?

Sota Fuel gör elektrolytdryck för folk som håller på med actionsport, med färre tillsatser än vanliga sportdrycker.

De ville ha en sajt med mycket rörelse och animationer, som ändå laddar snabbt.

Produktsektionen på Sota Fuels startsida, med animerad flaska för elektrolytsortimentet

Tema byggt från grunden

Jag byggde temat från grunden, utan att utgå från något befintligt tema. Det är skrivet med Tailwind CSS, GSAP och vanlig JavaScript, vilket håller det snabbt och lätt att ändra.

Sota Fuels produktsida med ingrediensöversikt och prenumerationsrabatt

Allt går att redigera

En av de viktigaste prioriteringarna i det här bygget var att allt skulle gå att ändra enkelt. Hela temat kan redigeras i Shopifys temaredigerare, så kunden kan justera layouter, färger, texter och mer utan att behöva en utvecklare.

De få saker som inte går att ställa in i temaredigeraren ligger i metafields, så att Sota Fuel kan ändra dem själva ändå.

Redigering av en sektion på sajten. Alla sektioner är minst lika anpassningsbara

Animationer

Animationerna var en stor del av projektet, och de fick inte göra sajten långsammare. Jag byggde dem med GSAP: flaskor som faller ner i ett glas när man scrollar, räknare som startar när sektionen syns och bilder som glider in bredvid texten. Allt körs på scroll, och bilder och videor lazy-laddas.

Scrollanimation på Sota Fuels startsida: flaskor som faller ner i ett glas när man scrollar

Sota Fuels animerade statistiksektion med räknare som triggas vid scroll

Scrollanimerad bild-med-text-sektion på Sota Fuel som parar produktfoto med varumärkestext

Köpflöde och merförsäljning

Varukorgen skulle vara enkel att använda och samtidigt ge kunden en chans att lägga till mer.

Merförsäljningen ligger i varukorgen, så kunden får förslag före kassan
En egenbyggd bundle builder låter kunden sätta ihop sitt eget paket, med Simple Bundles under huven

Sota Fuels utfällbara varukorg och kassaflöde med merförsäljning i varukorgen och en egenbyggd bundle builder

Laddtid

Sajten skulle vara snabb trots allt som rör sig på den. Sajten laddar på under 1,5 sekunder för över 75 % av användarna, vilket är snabbt även med alla animationer och visuella element.

Så här höll jag den snabb: