defuss-shadcn / Website / website-shop
Shop
Blocks for a store front and its checkout: collections and products, the cart and its summary, discount codes, address, delivery and payment, the order summary and confirmation, shipment tracking and the wishlist. Every block is CSS-only and built from the library's components and tokens.
On this page (3)
§The template
The Shop blocks composed into one page - the source is the page.
§A store and its checkout
A collection banner, product cards, then the cart (Cart Items beside the Cart Summary), the checkout (address, delivery and payment beside the Order Summary) and the confirmation - only Shop blocks.
§The blocks
Collection Item
Links to one product collection with imagery and context - a picture with the name and count, text over the picture, or a wide banner.
Product Item
Displays one catalog entry with its image, name, price, and link - a second picture on hover, badges, rating, colors, a wishlist heart and add to cart.
Cart Item
Displays one selected product with quantity and removal controls - picture, name, options, a quantity stepper, the line total and remove.
Cart Summary
Shows cart totals and the action to proceed to checkout - a free-shipping progress bar, the breakdown, the total, checkout and how you can pay.
Discount Form
Accepts a promotional code and displays its application result - the field, the error when it fails, and the applied code with its saving.
Address Form
Collects a shipping or billing address - the fields every browser can autofill, laid out in a grid, with saved addresses to pick from.
Delivery Options
Presents available delivery methods with costs and estimates - radio cards with an icon, the arrival window and the price.
Payment Form
Collects or selects a payment method - card, PayPal or bank transfer as tabs, the card fields with the right keyboards and autofill, or a saved card.
Order Summary
Displays an order's items and charge breakdown - pictures with quantity badges, the lines, discount, shipping and total; collapsible on small screens.
Order Confirmation
Confirms a completed purchase and provides its reference - a check that draws itself, the order number, what happens next and where to go.
Tracking Status
Shows an order's fulfillment progress and shipment links - the estimated arrival, the steps from ordered to delivered, and the carrier's event log.
Wishlist Item
Displays one saved product with purchase and removal actions - stock status, price, when it was saved, add to cart or get notified.
Comments, ideas or improvements? Edit this page's source on GitHub