Mastering Tile Sales: How to Sell by Square Meter (m²) on Shopify While Shipping Full Boxes

Hey there, fellow store owners! Let's chat about a really common hurdle for anyone selling building materials like tiles, flooring, or even wallpaper on Shopify: how do you sell by the square meter (m²) when you can only ship in full boxes? It's a classic conundrum, and it came up recently in the Shopify community with a fantastic thread started by @nw2 looking for the "best ways to sell boxed tiles by m²". And let me tell you, the community delivered!

The core problem, as @nw2 laid it out, is that customers naturally think in square meters. They know they need 10 m² for their bathroom. But your inventory and shipping are all about boxes, each containing a specific, often different, m² coverage. You can't exactly send half a box of tiles!

So, how do we bridge that gap? The community discussion highlighted two powerful, complementary strategies: leveraging Shopify's native "Unit Price" feature and implementing a smart, interactive calculator on your product page. Let's break it down.

Part 1: Displaying the m² Price Everywhere with Shopify's Native Unit Price

This was a brilliant insight shared by @lumine, and it's a game-changer many merchants miss. Shopify actually has a built-in "Unit price" feature that helps you display the price per square meter, liter, kilogram, etc., consistently across your store.

Why is this so important? As @lumine pointed out, a custom code snippet on your product page might show the m² price there, but it often disappears once the customer hits the cart or checkout. This inconsistency leads to confusion and, you guessed it, more support tickets! Shopify's Unit Price carries that information through the entire customer journey: collection pages, product pages, cart, checkout, and even order confirmation emails. That's a huge win for transparency and customer trust.

How to Set Up Shopify's Unit Price:

1. Set Your Product Price to the Box Price: First, ensure the main price for your tile product in Shopify is the price of one full box. For @nw2's example, that's 574.56 SEK per box. Shopify will always charge by this full box price at checkout.
2. Access Unit Price Settings: In your Shopify admin, go to the product you want to edit. Scroll down to the "Pricing" card.
3. Click "Unit price": You'll see an option to add unit pricing details.
4. Enter Details:
   • For "Total measurement," enter the square meter coverage of one box (e.g., 1.44 m²).
   • For "Base measure," set it to 1 m².
5. Shopify Does the Math: Shopify will automatically calculate and display the price per m² (e.g., 399 SEK/m²) based on these values.

A couple of important notes from @lumine:

• This setting is per variant, so if your tiles have different coverages, you'll need to set it for each variant. A bulk edit or CSV import can help if you have many SKUs.
• Make sure your store's default unit system is set to metric if you want to use m². You can check this in your Shopify Settings.

Part 2: The Interactive m² to Box Calculator for Seamless Ordering

While the Unit Price feature handles the display, you still need a way for customers to enter their desired m² and have your store automatically figure out how many boxes they need. This is where an interactive calculator comes in, and the community offered excellent solutions, both custom and app-based.

@Easify-Jennifer initially suggested using measurement apps or product options apps like Easify Custom Product Options. @Custom-Cursor confirmed they used a custom solution, and @Steve_TopNewYork reiterated the need for such a calculator.

The most detailed and actionable solution came from @Ploqo, who provided a fantastic custom Liquid and JavaScript snippet to build this calculator directly into your theme without needing a paid app. This calculator allows customers to input their required area, rounds up to the nearest full box, shows the actual coverage they'll receive, and crucially, updates the quantity selector on the product page.

How to Implement the Custom m² Calculator:

This involves adding a metafield to your products and then inserting some custom code into your theme. Don't worry, it's not as scary as it sounds!

1. Add a Coverage Metafield to Your Products:
   • Go to Settings > Custom data in your Shopify admin.
   • Click on Products > Add definition.
   • Name it something like m2 per box.
   • Set the Key to custom.m2_per_box.
   • Choose the type as Decimal.
   • Save the definition.
   • Now, open each tile product (or variant) and enter its coverage (e.g., 1.44) into this new metafield.
   
2. Add a Custom Liquid Block to Your Product Page:
   • Go to Online Store > Themes.
   • Click Customize on your current theme.
   • Navigate to a product page.
   • In the theme editor, find where you want the calculator to appear (e.g., near the quantity selector). Click Add block and search for Custom Liquid.
   
3. Paste the Code: Copy and paste the following code into the "Custom Liquid" box. This code includes the HTML structure for the calculator, some basic styling, and the JavaScript to handle the calculations and quantity updates.

{%- assign cov = product.metafields.custom.m2_per_box | plus: 0.0 -%}
{%- if cov > 0 -%}

  
{{ product.price | divided_by: cov | money }} per m²
  
1 box = {{ cov }} m²
  Area you need (m²)
    
  
  



{%- endif -%}

This script does a few clever things:

• It reads the m2_per_box from your metafield.
• It calculates the number of boxes needed by dividing the customer's input m² by the box coverage and rounding up (Math.ceil).
• It then updates the quantity input field on your product page, so when the customer clicks "Add to Cart," the correct number of full boxes is added.
• It also displays the actual total m² they'll receive and the total price for those boxes.

For those less comfortable with code, remember that there are also several "area / square meter / box quantity calculator apps" in the Shopify App Store that can provide similar functionality without the need for manual coding.

Bringing It All Together for a Seamless Experience

The beauty of these two solutions is how perfectly they complement each other. By using Shopify's native Unit Price feature, you ensure that your tiles are always clearly priced per m² across your entire store, from browsing to checkout. Then, by adding a custom calculator (or an app), you empower your customers to easily input their required area, automatically get the correct number of boxes, and add them to their cart with confidence.

This combined approach solves the core challenge of selling by area while fulfilling by fixed units. It makes the buying process intuitive for your customers and streamlines your inventory management. It's a fantastic example of how a little bit of custom work, combined with smart use of Shopify's features, can significantly enhance the shopping experience for specialized products.

So, if you're a tile or flooring merchant on Shopify, give these strategies a try. You'll likely see happier customers and fewer headaches for your team!