E-commerce

Product Variant Selection

A phone product page where colour swatches swap the gallery with a circular colour-wipe, storage options show price differences and low or sold-out stock per colour, an availability matrix shows every colour × storage combination at a glance, and the SKU, price and URL update with each choice.

Full screen Add this to my project

Use the Live / Loading / Empty / Error switch at the top of the demo to see every state.

Why it matters

Shoppers never pick a combination that can't ship and always see what is available instead, which cuts 'out of stock' frustration and support tickets while making variant-rich products easy to share.

How it works

01Each colour × storage combination has its own SKU, price and stock; choosing a colour re-checks storage stock without silently changing the shopper's choice.
02Sold-out combinations offer in-stock alternatives and a restock email alert; low stock shows 'only N left'.
03The variant is written to the URL hash (e.g. #azure-512), so links, refresh and back/forward reopen the exact combination.