Book a call
← All work

Sheko

Flavour selection and a metaobject-driven ingredients explorer

A collection page that lets customers pick flavours inline, and a product tab where nutritional data is switchable across the whole range.

Role
Custom sections · Data modelling
Stack
Shopify OS 2.0 · Liquid · Metaobjects · Vanilla JS
Live
See the ingredients tab on sheko.com →
The ingredients tab: switch product or flavour and the nutritional data re-renders in place.
Flavour dropdowns on the collection page, so choosing a variant does not need a detour to the product page.

Sheko sells shakes in a lot of flavours. That creates two problems that look unrelated but are really the same one: comparing options costs the customer too many page loads.

Flavour selection on the collection page

Every product on the collection page gets a flavour dropdown, so a customer picks the variant they want without opening the product page first. It removes a full round trip from the most common path through the store.

The ingredients explorer

This was the more involved piece. Products carry an “Inhaltsstoffe und Nährwerte” tab, and expanding it does more than reveal static text — the customer can switch between products and flavours from inside the tab and watch the nutritional data update in place.

The data is modelled as metaobjects rather than hardcoded per product or buried in a metafield blob. That means the ingredient and nutrition records exist once as structured entries and are referenced wherever they’re needed. A value that changes gets corrected in one place and updates across the range, and the merchandising team edits real fields in the admin instead of HTML.

The alternative — duplicating a nutrition table into every product description — would have looked identical on day one and become unmaintainable by the tenth flavour.

Want something like this on your store?

Free 20-minute call. You leave with a concrete list of what I’d fix first.

Book a call