Setup guide
The three steps on the dashboard: set the values on your products, add the four blocks in the theme editor, and test a product on the storefront.
The dashboard shows a three-step guide and ticks each step off as you go. The order matters: the blocks hide themselves on products that have no values yet, so set the values first.
1. Set the values on your products
Open Products in the app. For tile, enter the pieces per box, the coverage per box and the tile dimensions. For paint, enter the coverage per gallon (one coat) and, on each variant, the container size. Link the sample product where you sell one. The Products and values guide explains every field; for a large catalog use the CSV import or the field map.
2. Add the blocks in the theme editor
The app ships four theme app blocks. The dashboard has a link for each one that opens the theme editor on your product template with the block ready to add:
| Block | What it shows | Where to place it |
|---|---|---|
| Tile buy box | The sample offer and the area to boxes calculator with Add to cart | In the product information section, under the price or in place of the theme's buy buttons on tile templates |
| Paint buy box | The area and coats to containers calculator with Add to cart | The same spot on paint templates |
| Tile specs | Tiles per square foot, tiles per box, dimensions | Above the buy box or under the description |
| Paint specs | Coverage per gallon, container sizes, recommended coats | The same, on paint templates |
If your theme uses separate templates for tile and paint, add the tile blocks to one and the paint blocks to the other. If every product shares one template, add all four: each block renders only on products that carry its values and stays hidden elsewhere (the theme editor shows a hint so you can see where it sits).
The blocks inherit your theme's font. Colours, corner radius, spacing and every label are block settings in the theme editor, so you can match them to your theme without code. Nothing is written to your theme files; removing the block or uninstalling the app leaves the theme as it was.
Your theme's own buy buttons stay where they are. The buy boxes add their own Add to cart, so hide the theme's quantity selector on tile and paint templates if you do not want two ways to add the product.
3. Test on the storefront
Open a tile product on your storefront, enter an area, and check the box count, the covered area and the total. Add the boxes to the cart and confirm the quantity. On a paint product, enter an area and the coats and confirm the containers. The dashboard notices the first time a block renders; click Mark as tested once you are happy.
After setup
- Create a catalog health rule for your tile collection so products added later never go live without values.
- Turn on sample tracking and, if you use Klaviyo, connect it.