New section: Product Frame

A merchant wrote in with two things about a rail they were trying to copy. First: when a product is sold out the card should say so, and when it isn't, there should be a way to add it to the cart right there. Second, with a screenshot attached — "the image is getting cut, please make sure that in your section the image gets perfectly fit."

Those look like separate asks. They're the same one. A card that has to show a whole photo and carry a button has to decide where the button goes, and floating it over the picture is exactly what forces the crop.

Product Frame puts the button somewhere it can't get in the way.

Every photo shown whole

Each card is a fixed frame, and the photo is sized to fit inside it rather than cropped to fill it. A tall model shot, a square packshot and a supplier's landscape photo can sit in the same row and none of them loses an edge. The area behind the photo takes the card's own colour by default, so a studio-white shot looks like it was framed on purpose. If a photo has its own dark background, tint that area and it becomes a proper plate.

If you prefer the cropped look, one setting switches it back.

The button has its own strip

The frame keeps a strip clear along its bottom edge, and the photo is laid out above it. So the buy button always lands in the same place on every card, and it can never end up over a face, a hem or a logo — at any frame shape, with any photo.

That strip is reserved whether the button is showing or not, so if you set it to appear on hover, nothing shifts when it does. The photo doesn't resize and the row doesn't jump.

Three answers, depending on the product

• Sold out — the card says Sold out in a quiet, non-clickable state, and the photo dims. No button that does nothing.
• One version of the product — Add to cart adds it, without opening the product page.
• Several sizes — Add to cart opens the sizes on the card itself. Pick one and it goes in the cart. Sizes that aren't in stock are struck through and can't be chosen.

Products with more than one set of options — a size and a colour — link to the product page instead, because a single tap can't honestly stand in for two choices.

The whole thing still works with JavaScript off: the button falls back to a plain product link, so a shopper is never left with a control that does nothing.

The rest

Four frame shapes, two to five cards across, and control over the space around each photo. Background, card, plate, text and accent colours are all yours; the vendor line, prices and labels can be turned off or rewritten. Every colour that the section works out for itself — the muted price, the vendor line, the button's own label — is measured for contrast against the surface it actually sits on, not the page behind it.

Find it under Products in the section catalogue.