Tile buy box

The shopper enters the area to cover and an overage, or a box count, and sees whole boxes, the area they cover, the tile count and the total, then adds the boxes to the cart.

Tile is sold by the box, and shoppers think in square feet. The Tile buy box does the conversion on the product page: area in, whole boxes out, with the overage the shopper chooses, and an Add to cart button that puts the right number of boxes in the cart.

What the shopper sees

Area to cover, in the store's unit, with an Overage select (10, 15 and 20 percent by default; the options and the default are yours to set).
Boxes: filled in as the shopper types an area. A shopper who already knows the count can type it here instead, and the box count overrides the area until the area or overage changes again.
The result line: "9 boxes will cover 97.2 sq ft (252 tiles)", the price per box and per square foot, and the total. A product sold by the crate or the sheet says so: set its Container word and Piece word on the Products page and every label follows (crate, crates; sheet, sheets). Blank keeps the words set on the block.
Add to cart, which adds that many boxes of the selected variant.
The sample offer, when the product has a linked sample: a button in the dropdown layout, a card with a title, text and the price button in the inline layout. Under the button, the sample allowance line when an allowance is on. Clicking the button adds the sample to the cart without leaving the page and opens the theme's cart drawer when it has one; otherwise the button reads "Sample added" for a moment and the cart count updates.

The maths: boxes = the area times (1 + overage), divided by the coverage per box, rounded up, never less than one.

Two layouts

Pick one in the block's settings in the theme editor:

Dropdown: a Full order button that carries the price per square foot and per box. When the shopper opens it the button becomes the header of the panel, which slides open under it, and Add to cart stays a ghost button until a quantity is in. Compact, good under a theme's own buy buttons.
Inline: the calculator is always open under a heading ("Enter tile quantity"). This is the layout for stores where the calculator is the main way to buy.

Both layouts share the same values, labels, colours and behaviour; switching never loses your settings.

Where the sample button sits

The Sample button position setting puts the sample offer where your customers look for it:

Above the calculator: a button in the dropdown layout, a card with a title and text in the inline layout. The default.
Below the add to cart button: the calculator first, the sample under it.
Inside the calculator panel: the sample button shows only once the calculator is open, under its Add to cart.

Settings

In the theme editor, the block carries every label (the heading, the field names, the result line with placeholders for the count and the area, the words for box, boxes and tiles), the colours, the corner radius, spacing and whether the sample offer shows. Two settings belong to the sample button: Sample button after adding, the label shown for a moment when the theme has no cart drawer to open ("Sample added"), and Show the sample allowance line, which shows the free or discounted sample offer from the sample allowance under the button. In the app's Settings you set what applies to every product: the unit, the overage options and the default, which price to show (per box, per unit of area, both) and whether the sample button shows at all.

When it hides

The block renders only when the product has a coverage per box. On a product without one the storefront shows nothing and the theme editor shows a hint. Use catalog health to find those products.

Variants

The box count and prices follow the variant the shopper selects in your theme's own option picker. Variants whose title contains "Sample" are left out of the full-order list; they are the sample.