Case study
Sports Nutrition Source
The first one I owned end to end
- Sector
- ecommerce
- Year
- 2024
- Role
- Frontend engineer
- Live
- Storefront password-protected — no public link
- Shopify Liquid
- TypeScript
- Svelte
- print-js
- webpack 5
01
Why it is here
The storefront is currently behind a password page, so there is nothing to link to and no live work to point at. It is in this list anyway, because it is where a habit started that shows up in everything above it.
02
What it taught me
This was the first build where I could not blame an existing pattern for anything, and the first where I had to answer for the whole page weight rather than my part of it. Two things came out of it that I have not stopped doing.
The first is treating each template as its own JavaScript budget rather than treating the theme as one bundle. Once you can see that a collection page is downloading the code for a product configurator it will never render, you cannot un-see it, and the fix is a build configuration rather than an optimisation project.
The second is that print output is a real feature, not an afterthought. Wholesale and B2B customers print things — order summaries, product sheets — and a page that has never been checked in a print stylesheet prints badly in a way that is immediately visible to the customer and invisible to the developer.
- Per-template JavaScript budgets rather than a single theme bundle
- Print stylesheets treated as a supported output, not an accident
- Svelte islands for interactive sections, static Liquid everywhere else