Best ways to sell boxed tiles by m²

[nw2]

Hello community,

We currently run a live tile store on Shopify and are looking for the best way to handle pricing per square meter (m²) while selling only full boxes.

In the tile industry, customers expect to see prices per m², but each product is sold by the box, with every box containing a different number of m².

For example:

• Display price: 399 SEK/m²
• 1 box = 1.44 m²
• Customer is charged 574.56 SEK per box

Ideally, the customer should enter the number of m² they need, and the quantity should automatically round up to the required number of full boxes.

Has anyone implemented a solution like this on Shopify? Did you use an app or custom development?

Any examples or recommendations would be greatly appreciated!

[Steve_TopNewYork]

Hey @nw2 ,

This is a fairly common requirement for tile, flooring, and similar building material stores. Shopify doesn’t support selling by area with automatic box rounding out of the box, but it can be implemented quite effectively.

The approach I’ve seen work best is to:

Keep the actual product price based on the full box, since that’s what Shopify will charge at checkout.
Display the price per m² prominently on the product page for customer clarity.
Add an m² calculator where customers enter the area they need.
Calculate the required number of boxes by dividing the requested area by the coverage per box and rounding up to the next whole box (using a ceiling function).
Update the quantity selector automatically and add the correct number of boxes to the cart.

For your example:

Price: 399 SEK/m²
Coverage: 1.44 m² per box
Box price: 574.56 SEK

If a customer enters 5 m², the calculation would be:

5 ÷ 1.44 = 3.47 boxes
Rounded up to 4 boxes
Total charged: 4 × 574.56 SEK

This can be built with a relatively small custom Liquid/JavaScript implementation if you’re comfortable with theme customization. Otherwise, there are measurement and quantity calculator apps that provide similar functionality without requiring custom development.

If you found my reply helpful, feel free to mark it as the accepted solution so it can help other merchants following this discussion.

Thank You !

[lumine]

There is a native feature for exactly this and it is easy to miss because it sits inside the pricing card rather than anywhere obvious. Shopify calls it unit price. It went globally available on 2 October 2025, before that it was restricted, so a Swedish store has it now.

Mapped onto your numbers. The product price stays 574.56 SEK because the box is what checkout actually charges. Then in Pricing you click Unit price, set the total measurement to 1.44 m2 and the base measure to 1 m2. Shopify works out 399 SEK/m2 from those two values and renders it itself.

The reason that beats printing the m2 price in the theme is where it shows up. Unit price carries through to collection pages, the cart, checkout and the order confirmation email. A Liquid or JS snippet on the product page stops at the product page, so the customer browses in m2 and then sees nothing but box totals from the cart onward. That gap is where most of the pricing support tickets come from in my experience.

Two things that catch people out. It is set per variant, not per product, so every tile with different coverage needs its own total measurement filled in, and a bulk edit or a CSV pass is worth it if you have a few hundred SKUs. Also the available units follow your store default unit system, so check that is set to metric if m2 is not showing in the dropdown.

The calculator Steve described is still worth building on top, it just does less work than it looks. It only needs to set quantity. Take the area the customer entered, divide by coverage per box, ceil it, write that number into the qty input. Never touch price, let the unit price field do the display and let the box price do the charging. That also means the cart is already denominated in whole boxes, so a customer bumping quantity in the cart cannot land you on a partial box.

Does coverage vary per product for you, or do most of your tiles come in the same box size?

[Ploqo]

You do not need a paid app.

1. Charge by the full box

• Set each tile product’s price to the full box price (574.56 in your example).
• Shopify always checks out whole boxes, which is exactly what you want. You never sell a part box.

2. Show the m2 price and let the buyer enter their area

• Add a small calculator on the product page. The buyer types the area they need, it rounds up to full boxes, shows the price per m2, and sets the quantity for them.

Set it up

Add a coverage field to your products:

Settings > Custom data > Products > Add definition. Name it m2 per box, key custom.m2_per_box, type Decimal. Then open each tile product and enter its coverage (1.44 for this one).

In the theme editor, open the product page, then Add block and search Custom Liquid.

Paste this into the Liquid code box, then Save:

{%- assign cov = product.metafields.custom.m2_per_box | plus: 0.0 -%}
{%- if cov > 0 -%}
<div class="tile-calc"
     data-cov="{{ cov }}"
     data-box-price="{{ product.price | divided_by: 100.0 }}"
     data-cur="{{ shop.currency }}">
  <p class="tile-calc__per">{{ product.price | divided_by: cov | money }} <span>per m&sup2;</span></p>
  <p class="tile-calc__cov">1 box = {{ cov }} m&sup2;</p>
  <label class="tile-calc__label">Area you need (m&sup2;)
    <input type="number" min="0" step="0.01" inputmode="decimal" class="tile-calc__area" placeholder="e.g. 5">
  </label>
  <p class="tile-calc__out" hidden></p>
</div>
<style>
  .tile-calc{margin:16px 0;padding:16px;border:1px solid #e3e3e3;border-radius:12px;max-width:440px}
  .tile-calc__per{font-size:22px;font-weight:700;margin:0}
  .tile-calc__per span{font-size:14px;font-weight:400;color:#666}
  .tile-calc__cov{margin:2px 0 12px;font-size:13px;color:#666}
  .tile-calc__label{display:block;font-size:14px;font-weight:600}
  .tile-calc__area{width:100%;padding:11px 12px;border:1px solid #ccc;border-radius:8px;font-size:16px;margin-top:6px;box-sizing:border-box}
  .tile-calc__out{margin:12px 0 0;font-size:15px;line-height:1.55}
  .tile-calc__out b{font-size:17px}
</style>
<script>
(function(){
  var list = document.querySelectorAll('.tile-calc:not([data-ready])');
  var root = list[list.length - 1];
  if(!root) return;
  root.setAttribute('data-ready','1');
  var cov = parseFloat(root.dataset.cov);
  var boxPrice = parseFloat(root.dataset.boxPrice);
  var cur = root.dataset.cur || 'USD';
  var area = root.querySelector('.tile-calc__area');
  var out = root.querySelector('.tile-calc__out');
  var money = function(n){
    try { return new Intl.NumberFormat(undefined,{style:'currency',currency:cur}).format(n); }
    catch(e){ return n.toFixed(2) + ' ' + cur; }
  };
  var qtyInput = function(){
    return document.querySelector('form[action*="/cart/add"] input[name="quantity"]')
        || document.querySelector('input[name="quantity"]')
        || document.querySelector('quantity-input input, .quantity__input');
  };
  area.addEventListener('input', function(){
    var a = parseFloat(area.value);
    if(!a || a <= 0){ out.hidden = true; return; }
    var boxes = Math.ceil(a / cov);
    var covered = boxes * cov;
    var total = boxes * boxPrice;
    out.hidden = false;
    out.innerHTML =
      'You need <b>' + boxes + ' box' + (boxes > 1 ? 'es' : '') + '</b> ' +
      '(covers ' + covered.toFixed(2) + ' m&sup2;)<br>' +
      'Total: <b>' + money(total) + '</b>';
    var q = qtyInput();
    if(q){
      q.value = boxes;
      q.dispatchEvent(new Event('input',  {bubbles:true}));
      q.dispatchEvent(new Event('change', {bubbles:true}));
    }
  });
})();
</script>
{%- endif -%}

Your example, exactly: 399 per m2, 1 box = 1.44 m2. Buyer enters 5 m2, so 5 divided by 1.44 is 3.47, rounded up to 4 boxes, the quantity becomes 4, and checkout charges 4 x 574.56.

Note:

• The m2 price is worked out from the box price and the coverage, so you only ever type the box price once. There is no double entry
• The App Store has area / square meter / box quantity calculator apps

[Custom-Cursor]

Hey @nw2

hope you’re doing well!

We solved this with a custom solution. Customers enter the m² they need, and the quantity automatically rounds up to full boxes while displaying the price per m²

[nw2]

Thanks for all the answers! We are ready to move on now. Great community

[Easify-Jennifer]

Hi @nw2

This is a fairly common challenge in the tile and flooring industry because customers typically think in square meters, while inventory and fulfillment are managed in boxes.

One approach I’ve seen work well is letting customers enter the required m² on the product page, then automatically calculating the number of boxes needed and rounding up to the nearest full box. It’s also helpful to clearly show the actual coverage they’ll receive after rounding, so there are no surprises at checkout.

For example:

• Price: 399 SEK/m²

• Coverage per box: 1.44 m²

• Customer enters: 10 m²

• System calculates: 6.94 boxes

• Rounded to: 7 boxes

• Actual coverage: 10.08 m²

If you’re looking for an app-based solution, you may want to explore measurement or area calculator apps that are specifically designed for products sold by area but fulfilled in fixed units.

I’ve also seen merchants build similar workflows using product options apps. For example, with Easify Custom Product Options, you can collect the required m² through a custom input field and create a more guided purchasing experience for customers. Whether it can fully automate the box quantity calculation and cart quantity update depends on the exact workflow you’re aiming for, but it may be worth exploring if you’re already using product options for other product customizations.

I’d be interested to hear if anyone here has implemented a fully automated m²-to-box conversion directly on the product page, as that’s a use case that comes up quite often for tiles, flooring, wallpaper, and similar products.