How to embed a price calculator that adds to basket correctly?

Store Design
, ,

Topic summary

A user is attempting to embed a custom HTML/JavaScript price calculator on a Shopify product page that calculates shelf prices based on customer-entered width and depth dimensions. While the calculator successfully computes prices, it fails to properly add items to the cart—either adding nothing or defaulting to the product’s first variation at the lowest price without retaining any custom input data.

Core Issue:

  • The custom code displays calculated prices correctly
  • Cart integration is broken: custom dimensions and calculated prices don’t transfer to checkout
  • Product variations and user inputs are lost during the add-to-cart process

Community Recommendations:
Two respondents suggest abandoning the custom code approach, explaining that Shopify’s native architecture doesn’t support fully custom pricing calculations without apps. Both recommend dedicated Shopify apps:

  • Shop ify Product Price Calculator - handles dimension-based pricing formulas
  • Options Price Calculator - ensures custom inputs and calculated prices properly transfer to cart and orders

Status: The discussion remains open with no custom-code solution provided. The consensus points toward using specialized apps rather than custom embeds to achieve reliable cart integration.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I’m very new to coding. I am trying to embed this price calculator on my website. I just inserted it in a custom liquid box on the product page. It works somewhat, the customer enters width and depth and it generates the price correctly but it does not add to basket, when I did get it to add to basket it was adding the selected quantity but nothing else, it was auto-allocating the products first variations and lowest price. It was not retaining any of the input data either.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shelf Pricing Calculator</title>
    <script>
        function calculatePrice() {
            var width = parseFloat(document.getElementById("width").value);
            var depth = parseFloat(document.getElementById("depth").value);
            var quantity = parseInt(document.getElementById("quantity").value);
            // Calculate the price based on the width, depth, and quantity
            var price = calculatePriceByRange(width, depth); // Calculate price based on range
            var totalPrice = price * quantity;
            document.getElementById("totalPrice").innerText = "Total Price: £" + totalPrice.toFixed(2);
        }

        function calculatePriceByRange(width, depth) {
            // Example ranges with corresponding prices
            if (width >= 200 && width <= 300 && depth >= 200 && depth <= 300) {
                return 22;
} else if (width >= 200 && width <= 300 && depth >= 301 && depth <= 400) {
                return 25;
} else if (width >= 200 && width <= 300 && depth >= 401 && depth <= 500) {
                return 27;
} else if (width >= 200 && width <= 300 && depth >= 501 && depth <= 600) {
                return 30;
} else if (width >= 200 && width <= 300 && depth >= 601 && depth <= 700) {
                return 35;
} else if (width >= 200 && width <= 300 && depth >= 701 && depth <= 800) {
                return 37;

} else if (width >= 301 && width <= 400 && depth >= 200 && depth <= 300) {
                return 27;
} else if (width >= 301 && width <= 400 && depth >= 301 && depth <= 400) {
                return 31;
} else if (width >= 301 && width <= 400 && depth >= 401 && depth <= 500) {
                return 32;
} else if (width >= 301 && width <= 400 && depth >= 501 && depth <= 600) {
                return 38;
} else if (width >= 301 && width <= 400 && depth >= 601 && depth <= 700) {
                return 42;
} else if (width >= 301 && width <= 400 && depth >= 701 && depth <= 800) {
                return 53;
} else if (width >= 401 && width <= 500 && depth >= 200 && depth <= 300) {
                return 31;
} else if (width >= 401 && width <= 500 && depth >= 301 && depth <= 400) {
                return 33;
} else if (width >= 401 && width <= 500 && depth >= 401 && depth <= 500) {
                return 34;
} else if (width >= 401 && width <= 500 && depth >= 501 && depth <= 600) {
                return 40;
} else if (width >= 401 && width <= 500 && depth >= 601 && depth <= 700) {
                return 42;
} else if (width >= 401 && width <= 500 && depth >= 701 && depth <= 800) {
                return 55;
} else if (width >= 501 && width <= 600 && depth >= 200 && depth <= 300) {
                return 36;
} else if (width >= 501 && width <= 600 && depth >= 301 && depth <= 400) {
                return 41;
} else if (width >= 501 && width <= 600 && depth >= 401 && depth <= 500) {
                return 56;
} else if (width >= 501 && width <= 600 && depth >= 501 && depth <= 600) {
                return 58;
} else if (width >= 501 && width <= 600 && depth >= 601 && depth <= 700) {
                return 60;
} else if (width >= 501 && width <= 600 && depth >= 701 && depth <= 800) {
                return 62;

         } else if (width >= 601 && width <= 700 && depth >= 200 && depth <= 300 ) {
                return 39;
} else if (width >= 601 && width <= 700 && depth >= 301 && depth <= 400 ) {
                return 42;
} else if (width >= 601 && width <= 700 && depth >= 401 && depth <= 500 ) {
                return 59;
} else if (width >= 601 && width <= 700 && depth >= 501 && depth <= 600 ) {
                return 61;
} else if (width >= 601 && width <= 700 && depth >= 601 && depth <= 700 ) {
                return 65;
} else if (width >= 601 && width <= 700 && depth >= 701 && depth <= 800 ) {
                return 67;

            } else if (width >= 701 && width <= 800 && depth >= 200 && depth <= 300) {
                return 53;
} else if (width >= 701 && width <= 800 && depth >= 301 && depth <= 400) {
                return 56;
} else if (width >= 701 && width <= 800 && depth >= 401 && depth <= 500) {
                return 62;
} else if (width >= 701 && width <= 800 && depth >= 501 && depth <= 600) {
                return 65;
} else if (width >= 701 && width <= 800 && depth >= 601 && depth <= 700) {
                return 68;
} else if (width >= 701 && width <= 800 && depth >= 701 && depth <= 800) {
                return 71;
} else if (width >= 801 && width <= 900 && depth >= 200 && depth <= 300) {
                return 59;
} else if (width >= 801 && width <= 900 && depth >= 301 && depth <= 400) {
                return 61;
} else if (width >= 801 && width <= 900 && depth >= 401 && depth <= 500) {
                return 64;
} else if (width >= 801 && width <= 900 && depth >= 501 && depth <= 600) {
                return 68;
} else if (width >= 801 && width <= 900 && depth >= 601 && depth <= 700) {
                return 71;
} else if (width >= 801 && width <= 900 && depth >= 701 && depth <= 800) {
                return 106;
} else if (width >= 901 && width <= 1000 && depth >= 200 && depth <= 300) {
                return 66;
} else if (width >= 901 && width <= 1000 && depth >= 301 && depth <= 400) {
                return 68;
} else if (width >= 901 && width <= 1000 && depth >= 401 && depth <= 500) {
                return 70;
} else if (width >= 901 && width <= 1000 && depth >= 501 && depth <= 600) {
                return 72;
} else if (width >= 901 && width <= 1000 && depth >= 601 && depth <= 700) {
                return 108;
} else if (width >= 901 && width <= 1000 && depth >= 701 && depth <= 800) {
                return 112;
} else if (width >= 1001 && width <= 1100 && depth >= 200 && depth <= 300) {
                return 68;
} else if (width >= 1001 && width <= 1100 && depth >= 301 && depth <= 400) {
                return 70;
} else if (width >= 1001 && width <= 1100 && depth >= 401 && depth <= 500) {
                return 72;
} else if (width >= 1001 && width <= 1100 && depth >= 501 && depth <= 600) {
                return 74;
} else if (width >= 1001 && width <= 1100 && depth >= 601 && depth <= 700) {
                return 82;
} else if (width >= 1101 && width <= 1200 && depth >= 200 && depth <= 300) {
                return 70;
} else if (width >= 1101 && width <= 1200 && depth >= 301 && depth <= 400) {
                return 72;
} else if (width >= 1101 && width <= 1200 && depth >= 401 && depth <= 500) {
                return 74;
} else if (width >= 1101 && width <= 1200 && depth >= 501 && depth <= 600) {
                return 76;
} else if (width >= 1201 && width <= 1300 && depth >= 200 && depth <= 300) {
                return 72;
} else if (width >= 1201 && width <= 1300 && depth >= 301 && depth <= 400) {
                return 74;
} else if (width >= 1201 && width <= 1300 && depth >= 401 && depth <= 500) {
                return 76;
} else if (width >= 1201 && width <= 1300 && depth >= 501 && depth <= 600) {
                return 78;
} else if (width >= 1301 && width <= 1400 && depth >= 200 && depth <= 300) {
                return 74;
} else if (width >= 1301 && width <= 1400 && depth >= 301 && depth <= 400) {
                return 76;
} else if (width >= 1301 && width <= 1400 && depth >= 401 && depth <= 500) {
                return 78;
} else if (width >= 1301 && width <= 1400 && depth >= 501 && depth <= 600) {
                return 80;
} else if (width >= 1401 && width <= 1500 && depth >= 200 && depth <= 300) {
                return 76;
} else if (width >= 1401 && width <= 1500 && depth >= 301 && depth <= 400) {
                return 78;
} else if (width >= 1401 && width <= 1500 && depth >= 401 && depth <= 500) {
                return 80;
} else if (width >= 1401 && width <= 1500 && depth >= 501 && depth <= 600) {
                return 82;
} else if (width >= 1501 && width <= 1600 && depth >= 200 && depth <= 300) {
                return 78;
} else if (width >= 1501 && width <= 1600 && depth >= 301 && depth <= 400) {
                return 80;
} else if (width >= 1501 && width <= 1600 && depth >= 401 && depth <= 500) {
                return 82;
} else if (width >= 1601 && width <= 1700 && depth >= 200 && depth <= 300) {
                return 84;
} else if (width >= 1601 && width <= 1700 && depth >= 301 && depth <= 400) {
                return 86;
} else if (width >= 1601 && width <= 1700 && depth >= 401 && depth <= 500) {
                return 88;
} else if (width >= 1701 && width <= 1800 && depth >= 200 && depth <= 300) {
                return 86;
} else if (width >= 1701 && width <= 1800 && depth >= 301 && depth <= 400) {
                return 88;
} else if (width >= 1701 && width <= 1800 && depth >= 401 && depth <= 500) {
                return 90;

                // Add more range conditions and corresponding prices as needed
            } else {
                return 60; // Default price if no range matches
            }
        }

        function addToBasket() {
            // Retrieve form data
            var width = document.getElementById("width").value;
            var depth = document.getElementById("depth").value;
            var quantity = document.getElementById("quantity").value;

            // Store data in localStorage
            localStorage.setItem("shelf_width", width);
            localStorage.setItem("shelf_depth", depth);
            localStorage.setItem("shelf_quantity", quantity);

            // Redirect to basket page or perform other actions as needed
            // window.location.href = "basket.html";
        }

        // Load stored data from localStorage
        window.onload = function() {
            document.getElementById("width").value = localStorage.getItem("shelf_width") || "";
            document.getElementById("depth").value = localStorage.getItem("shelf_depth") || "";
            document.getElementById("quantity").value = localStorage.getItem("shelf_quantity") || "1";
            
        };
    </script>
</head>
<body>
    <h2>Shelf Pricing Calculator</h2>
    <form> 
        <label for="width">Width (mm):</label>
        <input type="number" id="width" name="width" required><br><br>

        <label for="depth">Depth (mm):</label>
        <input type="number" id="depth" name="depth" required><br><br>

        <label for="quantity">Quantity:</label>
        <select id="quantity" name="quantity" required>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <!-- Add more options as needed -->
        </select><br><br>

        <button type="button" id="calculatePriceBtn" onclick="calculatePrice()">Calculate Price</button><br><br>

        <div id="totalPrice"></div>
    </form>

    <!-- Add to Basket Button -->
    <button id="addToBasket" onclick="addToBasket()">Add to Basket</button> 

</body>
</html>
2

Thanks for sharing your experience—you’re definitely not alone! Getting custom price calculators to work smoothly with Shopify’s cart and product variations can be tricky, especially without deep coding knowledge.

Instead of custom coding, I’d recommend trying a Shopify Product Price Calculator app. It’s designed exactly for use cases like yours—where customers enter custom dimensions like width and depth, and the app calculates pricing based on your formula (e.g., width × depth × rate).

3

Hello,

Fully custom pricing based on calculations isn’t possible in Shopify without using an app. What you’re experiencing right now (the calculator showing the price but not passing the correct data or variations into the cart) is exactly the limitation of a custom embed.

For many of our clients, the app Options Price Calculator has been the solution. It not only calculates prices based on custom inputs like dimensions, but also ensures that all the data is properly carried over to the cart and order — so you don’t lose variations or pricing in the process.

If you need true custom calculation logic, I’d definitely recommend using an app like Options Price Calculator instead of trying to embed a standalone script.