Mutation on Shopify Customizer

Retired Boards Appdev Store Design
,

Topic summary

A developer is troubleshooting a MutationObserver implementation that fails to work properly when Shopify’s theme customizer is fully loaded.

The Goal:

  • Monitor changes within a specific Shopify section
  • Trigger functions when modifications occur in the customizer

Technical Details:

  • Uses Shopify.designMode to detect customizer environment
  • Targets a section by ID using Liquid templating: #shopify-section-{{ section.id }}
  • Configures observer to watch attributes, child nodes, and subtree changes

Current Status:

  • The code snippet appears corrupted or improperly formatted (reversed/garbled text in portions)
  • No responses or solutions have been provided yet
  • The issue remains unresolved

The discussion lacks follow-up comments, leaving the implementation problem open for community assistance.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

The code below doesn’t work when the customizer is fully loaded. The goal of this code is to check for changes within the section, so that I could run functions on it.

if (Shopify.designMode) {
  document.addEventListener('DOMContentLoaded', function(){
    const targetNode = document.getElementById("#shopify-section-{{ section.id }}");

    // Options for the observer (which mutations to observe)
    const config = { attributes: true, childList: true, subtree: true };
  
    // Callback function to execute when mutations are observed
    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === "childList") {
          console.log("A child node has been added or removed.");
        } else if (mutation.type === "attributes") {
          console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
      }
    };
  
    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);
  
    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
  });
}