Rolls
3.71 m wide. Linear metres = area ÷ 3.71, rounded up to the next 2 m. Split into 20 m rolls plus one remainder roll. 180 m² becomes 2 × 20 m + 1 × 10 m. Each roll is a variant of the turf product (length), added with its quantity.
Product gallery sits here. The mockup's layout, not the styling, is what this demo copies.
Synthetic turf
Lawn 40 Premium
$39.00per m², cut to length from 3.71 m wide rolls
15 year warrantySand infill 12 kg per m²Rolls up to 20 m, in 2 m steps
What goes in the cart
Total$0
On the live store this posts one request to Shopify's /cart/add.js with every line and quantity below, then opens the cart drawer. Sand rate, pin rate, warranty and price come from the product's metafields, so the store owner changes them in Shopify admin, never in theme code.
How it works on Shopify
Infill, pins, tape, glue
Sand = area × the product's own kg/m² metafield, sold as 20 kg bags. Pins from a per-m² rate. Jointing tape (100 m rolls) and glue (20 L drums) are added only when the order has more than one roll: joins = rolls − 1, join length = roll length.
Editable by the owner
Product metafields: turf.sand_rate_kg_m2, turf.pin_rate_per_m2, turf.warranty_years. Accessory products are picked in the section settings. The calculator is a custom Online Store 2.0 section (Liquid + JS) on a Dawn base, no page builder, no paid theme.
// /cart/add.js payload appears here