Custom Product Form Breaks with Recharge Subscriptions

Store Design
,

Topic summary

Issue: A custom Shopify product form conflicts with Recharge Subscriptions. Selecting “Subscribe” causes the first variant’s radio input to lose its name=“id” attribute, breaking form submission (Shopify uses name=“id” to pass the selected variant).

Context: The Liquid product form renders two variant radios with name=“id” and includes the ‘subscription-product’ snippet. Custom JS listens to clicks on “.box-option” labels. When the label for “subscribe” is clicked, it programmatically clicks Recharge’s “.rc_block .rc_radio__autodeliver”, selects a 14‑day option (“[data-day-count=‘14’]”), and toggles UI state. For “onetime,” it clicks “.rc_radio__onetime” and resets sub-options.

Observed behavior: After triggering the subscribe flow, Recharge appears to strip the name attribute from the variant input. Replacing radios with a hidden produced the same removal.

Status: No resolution provided. Likely an interaction with Recharge’s script that manipulates form inputs. Code snippets (Liquid and JavaScript) are central to the issue; discussion remains open.

Summarized with AI on January 17. AI used: gpt-5.
1

Hello all, I am having an issue with a custom coded product page with Recharge Subscriptions installed. For some reason when the user selects ‘Subscribe’ there is a weird interaction with the code in the product form that removes the name=“id” of one of the products, thus breaking the entire form.

{% form 'product', product, data-productid: product.id, class: 'custom-selection-form'  %}
      
      
            

              # SWEET CREAM 
              

              <sub>Nitro Latte</sub>
              
              

Subscribe Today and Save on Each Month's Shipment!

                
                     
            

        
            

---

        Subscription Options    
        

            
                
           
                    
               
            

            
             

                    
                    
       

            

            
              
              

                
                
                
              

       
              
              {% if product.available %}{% include 'subscription-product' %}{% endif %} 
            

 
        

         {% endform %}

JAVASCRIPT

document.querySelectorAll(".box-option").forEach((box)=>{
                box.childNodes.forEach((input) =>{
                    if(input.nodeName == 'LABEL'){
                      box.addEventListener('click', (e)=>{
                        input.click();
                        
                        if(input.htmlFor == "subscribe"){
                          document.querySelector('.rc_block  .rc_radio__autodeliver').click(); //This line is causing the name= blank bug on the 24 pack
                          document.querySelector("[data-day-count='14']").click();
                          document.querySelector('.sub-dates').classList.toggle('sub-selected');
                        }else if(input.htmlFor == "onetime"){
                          document.querySelector('.rc_radio__onetime').click();
                          document.querySelector('.sub-dates').classList.toggle('sub-selected');
                          document.querySelectorAll('.sub-option input').forEach((sub)=>{
                            sub.checked = false;
                          })
                        }

                        
                      })
                  }        
              })
          });

In my Form I have the line:

<input {% if forloop.first %} checked {% endif %} type="radio" value="{{ variant.id }}" id="{{ variant.id }}" name="id"/>

This renders out a total of 2 variants. If ‘Subscribe’ is selected, the name=“id” is removed from the first variant.

I have also tried removing the name from these inputs and tried using an to keep track of the selected varaint that way, however, I ended up having the same issue where Recharge took the name off of the input and broke the form.

Any help or insight would be appreciated, thank you!