How can I update product prices in real time on Prestige theme?

jaygolash1
Shopify Partner
12 0 4

Hello friends

I am using prestige theme shopify 

I want to little change into my product page like that  I add 3 prices checkbox in the product page but When I click on the checkbox then product actual price update in real time according to the checkbox price and same do other checkbox on click.

 

You may please see in the video and picture
I want to create same like this website functionality in my store.

you may also add.png

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
5999 1444 1783

Hi @jaygolash1 

 

You need to add multiple codes for this feature. This is not just a simple edits. Unfortunately, you need to hire a developer to do so. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


jaygolash1
Shopify Partner
12 0 4

yes, you are right @Made4uo-Ribe but I am a software developer not a shopify developer and I write the  code for it and It is working but can you please help me How can I find the id and checkout page so, I will add few more code in my existing code

Can you please check my code and edit the code If you available.

-----------------------------------------------------------------------------------------------------------------------

 <!-- You may also add functionality -->               
 
<div class="checkbox-meta">
  <h1 class="checkheading">You may also add</h1>
  
  <input type="checkbox" id="clothed2" name="clothed2" value="34.75">
  <label for="clothed2"> Alma Azaar (As Shown) [+$34.75] </label><br>
 
  <input type="checkbox" id="cloths2" name="cloths2" value="30.89">
  <label for="cloths2"> Zuri Pants [+$30.89] </label><br>
 
  <input type="checkbox" id="cloth3" name="cloth3" value="19.31">
  <label for="cloth3"> Plain Dupatta [+$19.31] </label><br><br>
  
  <h2 id="total-price">Total Price: $0.00</h2>
<script>
  document.addEventListener("DOMContentLoaded", function () {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  const totalPriceElement = document.getElementById("total-price");
  const basePrice = 100; // Replace with your actual base product price
 
  checkboxes.forEach((checkbox) => {
    checkbox.addEventListener("change", updateTotalPrice);
  });
 
  function updateTotalPrice() {
    let totalPrice = basePrice;
 
    checkboxes.forEach((checkbox) => {
      if (checkbox.checked) {
        const checkboxValue = parseFloat(checkbox.value);
        if (!isNaN(checkboxValue)) {
          totalPrice += checkboxValue;
        }
      }
    });
 
    totalPriceElement.textContent = "Total Price: $" + totalPrice.toFixed(2);
  }
});
</script>
 
<div class="contined-width">
<label class="tyh"> TYPE </label>
  <button id="unstitchedBtn" class="selection-button">Unstitched</button>
  <button id="stitchedBtn" class="selection-button">Stitched</button>
 
  <div id="unstitchedImage" class="hidden">
    <label class="tyh"> ADDON </label>
       <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
       <b>LINING + RS.2000</b>
      </span> <br>
 
    <img src="unstitched-image.jpg" alt="Unstitched Image"> <br>
 
    <div class="sizechartfixed">
    <button id="sizeChartBtn" class="selection-button" style="color: #fff; background: #000; border: #000;">Size Chart</button>
    <div id="sizeChartImage" class="hidden">
 
</div>
    </div>
  </div>
 
  <div id="stitchedOptions" class="hidden">
    <div class="size-buttons">
        <label class="tyh">Size</label>
      <button class="size-button" data-size="XS">XS</button>
      <button class="size-button" data-size="S">S</button>
      <button class="size-button" data-size="M">M</button>
      <button class="size-button" data-size="L">L</button>
      <button class="size-button" data-size="custom">CUSTOM SIZE</button>
    </div>
 
    <label class="tyh">Style</label>
    <label class="radi-lengh">
      <input type="radio" name="style" value="lengha"> Lengha
    </label>
    <label>
      <input type="radio" name="style" value="angrahka"> Angrahka
    </label>
 
    <div id="customSizeImage" class="hidden">
 
    <p style="font-size: 13px; font-weight: 500;">NOTE</p>
<ul>
<li>Please provide your final stitching measurements below (not body measurements).</li>
<li>You can provide the measurements that require alterations as rest of the measurements will be chosen from your nearest size.</li>
<li>Changes in custom stitched orders can only be made within 3 days of order placement and will require a confirmation from our end.</li>
<li>The length for articles with front embroidery cannot be altered under the custom size option. The length will remain the same as mentioned in the size chart.</li>
</ul> <br>
<p style="font-weight: 700;">&nbsp; Please select one option from nearest size*</p>
 
<p>*Choose your nearest size:</p>
<div class="size-buttons">
      <button class="size-button" data-size="XS">XS</button>
      <button class="size-button" data-size="S">S</button>
      <button class="size-button" data-size="M">M</button>
      <button class="size-button" data-size="L">L</button>
    </div>
 
 
 
   </div>
  </div>
</div>
 
 
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const selectionButtons = document.querySelectorAll(".selection-button");
    const sizeButtons = document.querySelectorAll(".size-button[data-size]:not([data-size='custom'])");
    const customSizeButton = document.querySelector(".size-button[data-size='custom']");
    const customSizeImage = document.getElementById("customSizeImage");
    const sizeChartBtn = document.getElementById("sizeChartBtn");
    const sizeChartImage = document.getElementById("sizeChartImage");
 
    let isSizeChartOpen = false;
    let isCustomSizeOpen = false;
 
    selectionButtons.forEach(button => {
      button.addEventListener("click", event => {
        event.preventDefault();
        selectionButtons.forEach(btn => {
          btn.classList.remove("button-active");
        });
 
        button.classList.add("button-active");
 
        if (button.id === "unstitchedBtn") {
          unstitchedImage.style.display = "block";
          stitchedOptions.style.display = "none";
        } else if (button.id === "stitchedBtn") {
          unstitchedImage.style.display = "none";
          stitchedOptions.style.display = "block";
        }
 
        customSizeImage.style.display = "none";
        isCustomSizeOpen = false;
 
        if (isSizeChartOpen) {
          sizeChartImage.style.display = "none";
          isSizeChartOpen = false;
        }
      });
    });
 
    sizeButtons.forEach(button => {
      button.addEventListener("click", event => {
        event.preventDefault();
        sizeButtons.forEach(btn => {
          btn.classList.remove("button-active");
        });
 
        button.classList.add("button-active");
 
        const size = button.getAttribute("data-size");
        if (size === "custom") {
          customSizeImage.style.display = "block";
          isCustomSizeOpen = true;
        } else {
          customSizeImage.style.display = "none";
          isCustomSizeOpen = false;
        }
 
        if (isSizeChartOpen) {
          sizeChartImage.style.display = "none";
          isSizeChartOpen = false;
        }
      });
    });
 
    sizeChartBtn.addEventListener("click", event => {
      event.preventDefault();
      if (isSizeChartOpen) {
        sizeChartImage.style.display = "none";
        isSizeChartOpen = false;
      } else {
        sizeChartImage.style.display = "block";
        customSizeImage.style.display = "none";
        isCustomSizeOpen = false;
        isSizeChartOpen = true;
      }
    });
 
    customSizeButton.addEventListener("click", event => {
      event.preventDefault();
      if (isCustomSizeOpen) {
        customSizeImage.style.display = "none";
        isCustomSizeOpen = false;
      } else {
        customSizeImage.style.display = "block";
        sizeChartImage.style.display = "none";
        isSizeChartOpen = false;
        isCustomSizeOpen = true;
      }
    });
  });
</script>

------------------------------------------------------------------------------------------------------------------------

EFOLI-Syn
Shopify Partner
22 1 0

Hello @jaygolash1 

You can create the same functionality in your store using Inkybay-Product Customizer app's product option feature. You can have the same field and assign prices. The actual price will update real time according to the checkbox/swatch on the product page. If you want to check the demo product please let me know.

Screenshot_1.png

Syn | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
jaygolash1
Shopify Partner
12 0 4

Yes I want to check demo

Please share @EFOLI-Syn 

EasifyApps
Shopify Partner
541 16 42

Hi @jaygolash1,

The Easify Product Options app is the perfect solution for creating checkboxes and seamlessly updating the checkbox option price on the main product. This app aligns perfectly with your specific requirements 😊

  • Storefront:

EasifyApps_2-1702284808968.png

 dc.png

  • App Settings:

EasifyApps_0-1702284694700.png

EasifyApps_1-1702284719101.png

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support