How can I Add an Interactive size guide?

Ask the community
,
1

Is it possible to add an interactive size guide to my product page:

A button with a pop out that will allow a customer to select their ‘Bust Size’ and ‘Cup Size’ from a drop down menu. From here it will display the corresponding size option for them (Small, Medium or Large).

2

Yes, this should be possible, but this for you will need a professional programmer, who will be able to generate you a CUSTOM-PRODUCT-PAGE including the INTERACTIVE-SIZE-GUIDE.

If you have no real JS, CSS, HTML knowledge, don’t even start this attempt to create such a complex project.

Seach for a PROGRAMMER who can help you out. He will need a bunch of time to create you what you want.

Or you can generate it on your own starting with simple EXAMPPLE…

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Size Guide</title>
  <style>
    div {
      text-align: center;
      margin-top: 20px;
    }

    input {
      margin: 10px;
      padding: 5px;
    }

    button {
      margin: 10px;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
    }

    #result {
      font-weight: bold;
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <h2>Find Your Size</h2>
    <label for="height">Height (cm):</label>
    <input type="number" id="height" min="100" max="250" step="1" />

    <label for="weight">Weight (kg):</label>
    <input type="number" id="weight" min="30" max="200" step="1" />

    <button onclick="suggestSize()">Get Size</button>

    <p id="result"></p>
  </div>

  <script>
    function suggestSize() {
      const height = parseInt(document.getElementById("height").value);
      const weight = parseInt(document.getElementById("weight").value);
      let size;

      if (isNaN(height) || isNaN(weight)) {
        document.getElementById("result").innerText = "Please enter valid height and weight.";
        return;
      }

      if (height >= 170 && weight >= 70) {
        size = "Large";
      } else if (height < 170 && weight < 70) {
        size = "Small";
      } else {
        size = "Medium";
      }

      document.getElementById("result").innerText = "Suggested size: " + size;
    }
  </script>
</body>