HELP with textboxes content not going to the cart

34 0 12

Store URL:  (please see the product page or search the product "brown jacket")

Pass: door


Hi! Please I want to add a checkbox to my product page, which when checked gives 3 textboxes to write in them and the content of those textboxes go to the cart, I have successfully deployed the checkbox and when checked it gives three textboxes but the problem is that the content in those textboxes isn't going to the cart. I wrote a code for text boxes in the main-product.liquid file and the javascript code in dt-theme.js file. I will be writing the code down below and please help me find what I have done wrong or If I have pasted the code in the wrong file.


code for textboxes in main-product.liquid below with the form id of the add to cart button ("product-form-template--21570773975329__main")


<form id="product-form-template--21570773975329__main" action="/cart/add" method="post" enctype="multipart/form-data">
  <!-- Your existing product form code -->

  <!-- Add this checkbox -->
  <input type="checkbox" id="customSizeCheckbox" name="properties[Use custom size]"> Use custom size

  <!-- Add these textboxes -->
  <div id="customSizeInputs" style="display: none;">
    <p class="line-item-property__field">
      <label for="bustSize">Bust Size</label><br>
      <input type="text" id="bustSize" name="properties[Bust Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">

    <p class="line-item-property__field">
      <label for="waistSize">Waist Size</label><br>
      <input type="text" id="waistSize" name="properties[Waist Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">

    <p class="line-item-property__field">
      <label for="bicepSize">Bicep Size</label><br>
      <input type="text" id="bicepSize" name="properties[Bicep Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">


the javascript code pasted in dt-theme.js, below ⬇️

document.getElementById('customSizeCheckbox').addEventListener('change', function() {
  var customSizeInputs = document.getElementById('customSizeInputs');

  if (this.checked) { = 'block';
  } else { = 'none';

Sharing the image of the product page as well



and this is how I have the cart to show the values, (highlighted in red)





Thanks! Would be waiting for your help!

Reply 1 (1)

Shopify Partner
2936 578 827

Hello @Boliye ,


1) Remove this attribute  


form all inputs.


2) Use your code in product template existing form tag.


3) After adding it to cart check the cart page

Issue is in your cart drawer. You need to check why cart drawer not display the line item properties or you can ask the theme support about it.



- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter