A picker that looks designed and still behaves like Shopify
The flavour choice on the Liquid+ product page carries real weight, because the two options are a genuine decision rather than a size. It needed illustrated tiles with a label, a short line of copy and a badge on the new one, not a dropdown that treats the most interesting thing about the product as an afterthought.
What we did
The tempting way to build this is to throw away the platform’s control and wire your own tiles straight to the cart. That is also how stores end up with a picker that shows the wrong price, forgets that something is out of stock, or quietly breaks the first time an app re-renders the page.
We built the tiles as the visible layer and left Shopify’s own variant control underneath, hidden but doing its job. Clicking a tile selects the real option, so price, availability, the add to cart button and anything else listening all update the way the platform expects. The selected state is rendered on the server, so the page arrives correct rather than flickering into place, and the click handling is written to survive the product section re-rendering itself, which it does every time a variant changes. On a product that does not have the option at all, the tiles fall back to being decorative instead of erroring.
The result
The flavour choice looks like the brand and behaves like the store. Nothing in the checkout path had to be reimplemented to get there, which is the part that would have carried the risk.
What to take from it
Custom product page design is worth doing, and the safe version of it sits on top of the platform’s controls rather than in place of them. If a designed picker is holding its own copy of what is selected, that copy will eventually disagree with the store about price or stock, usually on a phone, usually on the day of a sale. Ask whoever builds it which one the cart is actually listening to.
