title: Shopify form customize fields
body: <p>I have access to the checkout page in Shopify Plus and I need to append a new field into the form. However, when the user adds a new "Discount Code", Shopify make an API request which I have no control of and replaces the form with the fetched data (returned as Html). This causes my new appended element to be removed every time this API request is made.</p>
  
  <p>I have tried listening to DOM changes with MutationObservers but this doesn't do what I'm looking for.</p>
  
  <p>Alternatively, I was thinking if it's possible to check when those API requests made by Shopify have been completed so that I can re-append the form element? </p>
  
  <p>These are the two functions I have to fire in order to append the new form fields via JS:</p>
  
  <pre><code>// Append new CHECKBOX
  addNewCheckbox({ contactInfo, logged: customerId })
  
  // Update Labels
  updateLabels(contactInfo)
  </code></pre>
  
  <p><strong>Possible solution:</strong>
  Checking if the page has any changes with <strong><a href="https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401" rel="nofollow noreferrer">MutationObserver</a></strong></p>
  
  <p>This way, I can check if the form has been updated and then re-apply my custom fields back into the form</p>