Paint buy box
The shopper enters the area and the number of coats and sees the quarts, gallons and pails to buy, with the total, then adds them all to the cart in one click.
Paint is sold in containers, and the right mix of containers depends on the area, the coats and what sizes you sell. The Paint buy box works it out: area and coats in, containers out.
What the shopper sees
- Area to cover in the store's unit and Coats (the default is yours to set, two out of the box).
- A list of the containers to buy: for example 2 x Gallon and 1 x Quart, each with its price.
- The result line ("About 2.4 gallons for 2 coats. These containers cover 420 sq ft per coat"), and the total.
- Add to cart, which adds every container on the list in one go.
- The sample button, when the product has a linked sample, with the sample allowance line under it when an allowance is on. Clicking it 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: the amount needed = area x coats divided by the coverage per gallon (one coat). Which containers that becomes is the store's container policy, set once in the app's Settings:
| Policy | What the shopper gets | 2.53 gallons at a quart $30, a gallon $84, a 5 gallon pail $345 |
|---|---|---|
| Lowest price (the default) | The cheapest set of containers that covers the amount; ties go to fewer containers | 3 x Gallon, $252 (two gallons and three quarts would be $258) |
| Fewest containers | Larger sizes, rounded up; never a small container for a remainder | 3 x Gallon; 4.2 gallons gives one 5 gallon pail |
| Exact fit | The largest containers first, the remainder in the smallest size that covers it | 2 x Gallon and 3 x Quart |
Container sizes and units
The sizes come from the product's variants. Set the Container size and Container unit on each variant on the Products page: gallon, quart, pint, litre, millilitre, kilo or gram, so a clay or lime finish sold by the kilo works like a paint sold by the gallon. Leave both blank and the app reads the variant's title on its own: Quart, 1 Gallon, 5 Gallon, 2.5 L, 750 ml, 5 kg, 20 Kilo. Variants that are sold out are skipped; a variant titled "Sample" is the sample.
The product's amount follows its containers: gallons when any container is a US volume, litres when any is metric volume, kilos otherwise. The coverage value is read per that unit ("350 sq ft per kilo, one coat"), the result line says "About 8 kilos for 2 coats", and metric volumes convert into gallons on a mixed product. A weight on a volume product is left out and catalog health warns about it.
On a product with colours or finishes and sizes, the block recommends the sizes of the colour the shopper has selected in your theme's option picker, and follows the picker as they change it.
Settings
Labels, the result line (with {amount}, {unit}, {coats} and {area} placeholders; the word gallon in the note follows the unit too), the colours, radius and spacing are block settings in the theme editor, as is the Sample button position (above the calculator, below the add to cart button, or inside the panel; below is the default) and the two sample button settings: 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. The unit, the default coats and the container policy are set once in the app's Settings; the block carries a policy of its own only as the fallback before the app has saved.
When it hides
The block renders only when the product has a coverage per gallon and at least one variant with a known size. On other products it shows nothing on the storefront and a hint in the theme editor.
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.
Sample quick-add
An Add sample button on product cards, on collection pages, search results and featured collections, so a shopper collects samples from the grid without opening each product page.