Buy Box
The right-hand column of a product page as one cart form: colours and sizes in a sliding ink pill, a price that rolls with the size, quantity, Add to cart, a ships-today line and folding details.
View codeThe library
E-commerce
10 shop blocks in plain HTML, CSS and JS that post real cart forms: a grid, a card, a buy box, a cart that slides out, the bar that sells free shipping. No app to install.
Free Shipping Bar
A free shipping progress bar that listens to the cart: the amount left rolls digit by digit, a small van rides the line, and the sentence rolls into a thank-you once the threshold is met.
View code
Product Gallery
The photos of a product page: each slides in from the side you head to and zooms towards the mouse, a click opens it full screen, and a colour chosen on the page switches the photos.
View code
Product Page
A whole product page in one block: photos held in view while the buy box scrolls past, colours that switch the photos, the reviews, You may also like, and on a phone a bar with Add to cart once the buy box has gone.
View code
Quick View
Shop card whose photo grows into a window with a short buy form: colour, size, Add to cart. Escape or the veil send it back into its card, which keeps the chosen colour. A sheet on phones.
View code
Size Guide
A size guide link that opens the size chart in a drawer, with cm and inches that roll from one to the other and the size picked in the product form underlined.
View code
Sticky Buy Bar
A bar that comes up from the bottom once the page's Add to cart has scrolled away: picture, name, variant, price and the same button. Never over the footer or the open cart.
View code
Cart Drawer
Side cart for a shop: an added product flies into the bag, the drawer opens and the line slides in. Quantities change in place, Undo after a removal, prices roll, free shipping fills up.
View code
Product Card
A shop grid card: the second photo rises on hover (a swipe on phones), colour swatches swap the photos in place, and Add rolls into the sizes and sends the form to the cart.
View code
Product Grid
A shop collection grid with category pills, colour dots and a sort: cards that go step back, the rest glide to their place, the count rolls and the address keeps the filters.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it