Project Calculator Section

The project calculator helps customers calculate exactly how much product they need for their flooring project. Customers enter room dimensions or total area, and the calculator determines how many boxes to order, including waste allowance.

Overview

This specialized calculator is perfect for flooring stores. Customers can calculate material needs by entering room dimensions (length × width) or total area. The calculator accounts for waste and shows the estimated total cost.

Where to Use

  • Product pages: Help customers calculate quantity for specific products
  • Homepage: Featured calculator for popular products
  • Collection pages: Calculator for collection products
  • Landing pages: Project planning pages

Note: The project calculator section cannot be used in header or footer groups.

How It Works

  1. Customer selects unit system (imperial/metric)
  2. Enters room dimensions or total area
  3. Adjusts waste percentage (if needed)
  4. Calculator shows:
    • Number of boxes needed
    • Total area
    • Area with waste included
    • Estimated total cost
  5. Customer can add calculated quantity to cart

Settings

Content

Heading

  • Main heading for the calculator
  • Examples: "Calculate Your Project", "How Much Do You Need?"
  • Default: "Calculate Your Project"
  • Tip: Keep it clear and action-oriented

Heading Size

  • Controls the visual size of the heading
  • Options: XL, 2XL, 3XL, 4XL
  • Default: 3XL
  • Tip: Larger sizes (3XL, 4XL) for more impact

Description

  • Supporting text below the heading
  • Explains how to use the calculator
  • Supports rich text formatting
  • Tip: Brief instructions or benefits

Product Settings

Product

  • Select the product for calculation
  • Calculator uses this product's price and information
  • Important: Product must be selected for calculator to work
  • Tip: Choose products sold by the box/roll

Coverage per Box

  • How much area one box/roll covers
  • Default: 10
  • Units: Changes based on unit system (sq ft for imperial, sq m for metric)
  • Tip: Check your product packaging for exact coverage
  • Example: If one box covers 10 sq ft, enter 10

Calculator Options

Default Unit System

  • Imperial (sq ft): Square feet and feet (default)
  • Metric (sq m): Square meters and meters
  • Note: Customers can switch units in the calculator
  • Tip: Choose based on your primary market

Allow Room Dimensions Input

  • Enabled: Customers can enter length and width
  • Disabled: Customers can only enter total area
  • Default: Enabled
  • Tip: Enable for better user experience

Default Waste Percentage

  • Default waste allowance percentage
  • Range: 0-30%
  • Default: 10%
  • Note: Customers can adjust this with a slider
  • Tip:
    • 5-10%: Simple rectangular rooms
    • 10-15%: Rooms with corners and cuts
    • 15-20%: Complex layouts, patterns
    • 20-30%: Very complex projects

Button

Button Style

  • Style of the "Add to Cart" button
  • Options: Primary, Secondary, Outline
  • Default: Primary
  • Tip: Primary for maximum visibility

Styling

Card Max Width

  • Maximum width of the calculator card
  • Range: 400-1000px
  • Default: 600px
  • Tip:
    • 400-500px: Compact, mobile-friendly
    • 600px: Balanced (recommended)
    • 700-1000px: Larger, more spacious

Card Shadow

  • Shadow effect on the calculator card
  • Options: None, Small, Medium, Large, Extra large, 2X large
  • Default: Large
  • Tip: Larger shadows create more depth

Card Corner Radius

  • Rounds the corners of the calculator card
  • Options: None, Small, Medium, Large, Extra large, 2X large
  • Default: Large
  • Tip: Rounded corners look modern and friendly

Card Border Width

  • Thickness of the card border
  • Range: 0-4px
  • Default: 1px
  • Tip: Set to 0 to remove border completely

Input Corner Radius

  • Rounds the corners of input fields
  • Options: None, Small, Medium, Large, Extra large
  • Default: Large
  • Tip: Match card corner radius for consistency

Additional Info

Additional Information

  • Optional text below the calculator
  • Supports rich text formatting
  • Use for: Tips, disclaimers, installation notes
  • Tip: Keep it brief and helpful

Colors

Color Scheme

  • Select a color scheme for the calculator
  • Controls text colors, background, and button colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that makes the calculator stand out

Padding

Top Padding

  • Space above the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room from previous section

Bottom Padding

  • Space below the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

Calculator Features

Unit System Toggle

  • Customers can switch between Imperial (sq ft) and Metric (sq m)
  • All calculations update automatically
  • Coverage per box converts based on unit system

Calculation Modes

Room Dimensions (if enabled):

  • Enter length and width
  • Calculator multiplies: length × width = total area
  • Best for: Rectangular rooms

Total Area:

  • Enter total area directly
  • Best for: Complex shapes or known area

Waste Percentage Slider

  • Adjustable from 0% to 30%
  • Default set in section settings
  • What it does: Adds extra material for cuts and waste
  • Formula: Total area × (1 + waste%) = Area with waste

Results Display

The calculator shows:

  • Boxes Needed: Number of boxes/rolls to order
  • Total Area: Calculated area (length × width or entered)
  • With Waste: Total area including waste percentage
  • Estimated Total: Total cost based on boxes needed

Add to Cart

  • Button shows: "Add X boxes to cart"
  • Quantity updates based on calculation
  • Adds calculated quantity to cart
  • Button shows loading and success states

Common Use Cases

Tile Calculator

  • Product: Tile product
  • Coverage: 10 sq ft per box
  • Waste: 10% default
  • Units: Imperial (sq ft)
  • Use when: Customers need to calculate tile quantity

Carpet Calculator

  • Product: Carpet product
  • Coverage: 12 sq ft per roll
  • Waste: 15% default
  • Units: Imperial (sq ft)
  • Use when: Customers need to calculate carpet quantity

Flooring Calculator

  • Product: Flooring product
  • Coverage: 20 sq ft per box
  • Waste: 10% default
  • Units: Imperial (sq ft)
  • Use when: General flooring calculations

Tips & Best Practices

✅ Do's

  • Set accurate coverage: Use exact coverage from product packaging
  • Choose appropriate waste: Set realistic default waste percentage
  • Select the right product: Choose products sold by box/roll
  • Add helpful description: Explain how to use the calculator
  • Test calculations: Verify calculator works correctly
  • Add additional info: Include tips or installation notes
  • Use clear heading: Make it obvious what the calculator does

❌ Don'ts

  • Don't use wrong coverage: Incorrect coverage leads to wrong calculations
  • Don't skip product selection: Calculator won't work without a product
  • Don't use too high waste: Unrealistic waste percentages confuse customers
  • Don't forget to test: Always test the calculator before publishing
  • Don't use complex products: Products with many variants may not work well

Setting Up Coverage

Finding Coverage Information

  • Check product packaging
  • Look at product description
  • Contact manufacturer
  • Check product specifications

Coverage Examples

  • Tiles: Usually 10-20 sq ft per box
  • Carpet: Usually 12-15 sq ft per roll
  • Vinyl: Usually 18-30 sq ft per box
  • Laminate: Usually 15-25 sq ft per box

Important Notes

  • Coverage changes with unit system
  • If using metric, coverage should be in sq m
  • If using imperial, coverage should be in sq ft
  • Be precise - small errors multiply

Waste Percentage Guide

When to Use Different Percentages

0-5%:

  • Perfect rectangular rooms
  • No cuts needed
  • Simple installations

5-10% (Recommended Default):

  • Standard rooms with some corners
  • Normal cuts and adjustments
  • Most common projects

10-15%:

  • Rooms with many corners
  • Complex layouts
  • Pattern installations

15-20%:

  • Very complex layouts
  • Diagonal installations
  • Multiple rooms

20-30%:

  • Extremely complex projects
  • Custom patterns
  • Professional installations

Unit System Guide

Imperial (sq ft)

  • Length/Width: Feet (ft)
  • Area: Square feet (sq ft)
  • Coverage: sq ft per box
  • Best for: US, UK markets
  • Example: 10 ft × 12 ft = 120 sq ft

Metric (sq m)

  • Length/Width: Meters (m)
  • Area: Square meters (sq m)
  • Coverage: sq m per box
  • Best for: International markets
  • Example: 3 m × 4 m = 12 sq m

Conversion Note

  • 1 sq m = 10.764 sq ft
  • Coverage per box should match the unit system
  • Calculator handles conversion automatically

Examples

Example 1: Tile Calculator Setup

  • Product: Ceramic tile
  • Coverage: 12 sq ft per box
  • Default Waste: 10%
  • Units: Imperial
  • Dimensions: Enabled
  • Result: Calculator for tile projects

Example 2: Carpet Calculator Setup

  • Product: Carpet roll
  • Coverage: 15 sq ft per roll
  • Default Waste: 15%
  • Units: Imperial
  • Dimensions: Enabled
  • Result: Calculator for carpet projects

Example 3: Metric Calculator Setup

  • Product: Laminate flooring
  • Coverage: 2 sq m per box
  • Default Waste: 10%
  • Units: Metric
  • Dimensions: Enabled
  • Result: Calculator for international customers

Calculation Examples

Example Calculation

Input:

  • Room length: 12 ft
  • Room width: 10 ft
  • Waste: 10%

Calculation:

  1. Total area: 12 × 10 = 120 sq ft
  2. With waste: 120 × 1.10 = 132 sq ft
  3. Coverage per box: 10 sq ft
  4. Boxes needed: 132 ÷ 10 = 13.2 → 14 boxes (rounded up)

Display:

  • Boxes needed: 14
  • Total area: 120 sq ft
  • With waste: 132 sq ft
  • Estimated total: (14 × product price)

Troubleshooting

Calculator Not Working

  • Check: Make sure a product is selected
  • Check: Verify product is published and available
  • Check: Ensure JavaScript is enabled
  • Check: Test in different browsers

Wrong Calculations

  • Check: Verify "Coverage per box" is correct
  • Check: Ensure coverage matches unit system
  • Check: Test with known dimensions
  • Solution: Update coverage per box setting

Add to Cart Not Working

  • Check: Verify product is available
  • Check: Ensure product has inventory
  • Check: Test add to cart functionality
  • Check: Check browser console for errors

Units Not Converting

  • Check: Coverage per box should match unit system
  • Check: Test unit toggle functionality
  • Note: Coverage doesn't auto-convert - set it for each unit system

Results Not Showing

  • Check: Enter dimensions or area first
  • Check: Ensure values are greater than 0
  • Check: Verify calculator JavaScript is loaded

Related Sections

  • Featured Product - Product showcase
  • Product - Full product page
  • Product Spotlight - Product with features

Next Steps: