Switching on a quantity selector took four fixes

A print store selling in bulk needed customers to be able to set a quantity on the product page. The theme shipped with a quantity block already in the product template, switched off. Turning it on was one line.

It rendered badly enough that the client’s first reaction was that it looked broken, which it did. Three more fixes followed, and each one is a variety of the same underlying point.

What we found

Our own rule was eating it. The store has a bulk ordering grid, and a rule written for that grid stretched every button inside it to the full width of its container. The quantity stepper’s plus and minus controls carry the theme’s generic button class, so they matched, and the rule was specific enough to beat the theme’s own reset. It had been sitting there harmlessly for weeks because nothing else in that part of the page used that class. Excluding the two stepper controls fixed it.

The label only exists in one situation. The theme prints a label above the stepper when the variant has quantity rules attached, which is a business-to-business feature this catalogue does not use. So the stepper appeared unlabelled next to a labelled colour picker and a labelled size picker. We drew the label in from the stylesheet rather than editing a stock theme file, so it survives the next theme upgrade, and put it on the row that owns the layout instead of the one that owns the stepper, because our first placement pushed the stepper down and left Add to Cart short.

Add to Cart carried a margin from a setting. A top margin, emitted by the section’s own settings, was correct when the button was alone on its row and wrong the moment the stepper shared it. Zeroed only in that case.

What we did

Shipped all four, then measured the result rather than looking at it: the stepper and the Add to Cart button are centred to the same point at desktop and phone widths.

One thing deliberately left alone. The quantity selector is a shared file, used by the cart and the bulk order list as well as the product page, so anything constrained there changes three surfaces at once. The fix belongs on the product page, not in the shared component.

What to take from it

A disabled block is untested code. The moment you enable one, every rule in the theme that has been waiting to match it matches it, and none of that was visible while it was off.

So when a switch turns out to have four fixes behind it, that is not scope creep. That is the first time those two pieces of the page have ever been in the same room.