shadcn.io is not affiliated with official shadcn/ui
Concert Merch Music Block for Solid
A tour merch shop with six drawn items, a size choice for the tee and hoodie, a named grey swatch and a quantity on every row, a cart with a Tee and poster bundle rule worked out as its own line, and a Place pre-order button.
Installation
Overview
Let fans pre-order tour merch, with this merch shop for Solid with Ark UI. It draws Merchbarn's autumn run in a hairline frame with a plus mark on each corner, in two cells. At the start six things sit in ruled rows: a tee, a hoodie, a tote, a poster, a cap and an enamel pin, each with a drawn silhouette and its price. The options are on the row: a Segment Group for the size of the tee and the hoodie, a named swatch for every item (Black, Bone or Slate, where the name shows and the dot is only a grey weight) and a quantity with minus and plus Buttons. Add puts that variant in the cart at the end, where each line has its own quantity and Remove. A ledger shows the subtotal, the bundle rule "Tee and poster together: 10% off both" as its own line when it applies, and the total. Place pre-order is the one Shine Button, and nothing is charged. It's built from Segment Group, Button, Empty, Shine Button and Guides. For band shops, event stores and any cart with a bundle rule it explains.
FAQ
How do I load my own merch?
Edit ITEMS for the things (an id, name, price in whole cents and whether it has sizes), SIZES and SWATCHES for the options, and shapesOf for the drawn silhouettes. Replace a silhouette with a product image where you have one. The cart, the ledger and the counts are worked out from the lines, so nothing is typed twice.
How is the bundle discount worked out?
When the cart holds at least one tee and at least one poster, 10% comes off the total of all tee and poster lines, rounded to the nearest cent, and the ledger shows it as its own line. Other items are never discounted. Until it applies, the note under the ledger says what to add ("Add a poster and the tee and poster are 10% off."), and removing either item removes the line.
What is a line in the cart?
One item in one size and one colour. Adding the same variant again raises its quantity, up to 9, instead of adding a second line; a different size or colour is a new line. The quantity on a shop row is what the next Add will put in the cart, and the stepper in the cart changes a line that is already there.
Why are the colours greys with names?
Colour should never carry meaning alone, so each swatch is a name you can read, Black, Bone or Slate, with a dot in a matching grey weight, and the choice is a radio group you can use from the keyboard. Replace the dots with your own colours if you like, and keep the names.
What stays local, and how do I make it real?
The cart and the result live in the page and reset on a reload. Place pre-order says "Held in this demo. Nothing was charged." and takes no card. In your app send the lines to your own order endpoint from place and let your payment provider's hosted checkout take payment; the ship date ("ships 20 Nov") is a constant to replace.
How does it look on a phone?
The options drop under each item's name and price, the cart becomes a band under the list with the same fixed height, and Place pre-order sticks to the bottom of the screen with the status line above it. An empty cart shows an empty state in the cart's own box, so the page never changes height.