Coffee shop app order screen where customers customize a drink: size cards, milk and syrup options, an extra shot stepper and a live price on the add to order button.
Also known as: coffee shop app ui, coffee ordering app screen, drink customization screen, cafe menu item detail page, product options with live price
A coffee shop order customization screen built with Bootstrap 5: an HTML mobile template where a customer picks the cup size, milk, syrup and extra espresso shots while the price on the add to order button updates live. Use this coffee ordering app UI as the product page of a cafe website, a pickup-ordering PWA, or a Capacitor app.
How it works
The root .ccs-app is a 430 px app column that stays centred on wider screens.
.ccs-hero: a coffee photo with round buttons for back, favourite (.ccs-fav, aria-pressed) and the order bag with its count (.ccs-bag-n).
.ccs-sheet: a white panel overlapping the photo with the name, description and facts; .ccs-kcal follows the size and shots.
Size: three .ccs-size cards built from radio inputs with data-price, data-label and data-kcal.
Milk and syrup: .ccs-opt tiles, also radio inputs with a data-price surcharge.
.ccs-shots: a stepper for extra shots priced by SHOT_PRICE, plus a barista note with a character counter.
.ccs-bar: a sticky bottom bar with the order summary, a quantity stepper and the .ccs-add submit button showing the total.
script.js listens to change on the form and to stepper clicks, adds size, surcharges and shots, multiplies by the quantity and updates the total, summary and button label. Submitting prevents the real submission, raises the bag count and shows a Bootstrap 5 Toast. The photo comes from Unsplash; replace it with your own image.
Customization
--ccs-brown on .ccs-app: the accent for selected cards, option tiles and the add button.
data-price on any .ccs-radio: the price or surcharge of that choice; the total follows.
SHOT_PRICE and LIMITS in script.js: the shot price and the ranges of shots and quantity.
Add an option by copying a .ccs-radio and its .ccs-opt label with a new id and data-label.
height on .ccs-hero: a taller or shorter product photo.
data-bs-delay on .ccs-toast: how long the confirmation stays visible.
Replace the block in the submit handler with fetch() to your ordering API.
Use cases
Coffee shop and cafe apps: order ahead with size and milk choices.
Bubble tea and juice bars: swap the options for toppings, sweetness and ice.
Bakery and food ordering apps: any menu item with paid add-ons.
Accessibility
Every choice is a native radio input inside a fieldset with a legend, so arrow keys move between options. The inputs are visually hidden but focusable, and their labels show a focus ring. Steppers are labelled groups with output values; limit buttons use aria-disabled, so focus is never lost. The summary is a live region and the add button has a full label with quantity and price. Touch targets are at least 44 px, and animations stop for prefers-reduced-motion.
Usage notes
Requires Bootstrap 5 (added automatically, used for the Toast), Bootstrap Icons and the Outfit font. Input ids must be unique if you place two screens on one page.
Coffee Shop Order Customization Screen at a glance
Can I use the Coffee Shop Order Customization Screen code for free?
Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.
How do I add it to my website?
Load Bootstrap 5 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements).
Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag.
Download HTML gives you a complete page with everything already linked.
Does it need jQuery or a JavaScript framework?
No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.
Can I turn this screen into an iOS or Android app?
Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.
How does it look on a desktop screen?
The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.
Requirements
Add these to your page (already included in the download):
Sneaker store app home screen with brand chips, search, product cards and a filter bottom sheet with price range, sizes and sort that applies to the product grid.
Fashion store product detail screen with swipeable photos, colour swatches, size chips with a size guide bottom sheet, details accordion and a sticky Add to bag bar.
Grocery app product list screen with filter chips, a two-column product grid with add-to-cart steppers and a floating cart button showing the item count and total.
Order confirmation screen for delivery apps with a success illustration, order number, ETA computed from now, live order tracking steps and a help sheet.
Mobile checkout screen with a delivery address sheet, delivery time options, payment method radio cards, promo code and a live order summary with place order.
