Selecting DOM elements with JavaScript in Shopify

Shopify Discussion

Topic summary

A developer encountered a DOM selection error while building a JavaScript-triggered modal in Shopify. The modal snippet was rendered in theme.liquid with CSS to hide it by default, and a button was meant to toggle a CSS class to display it.

The Problem:

  • JavaScript couldn’t find the form element (.form-container-ja-outer-wrapper)
  • Console showed an error indicating the element wasn’t being selected
  • The test button was found successfully, but the modal form was not

Root Cause:
The JavaScript code executed before the DOM fully loaded. Since the button appeared earlier in the HTML than the modal snippet, only the button was accessible when the script ran.

Solutions Provided:

  1. Move JavaScript code below both the button and modal HTML in source order
  2. Wrap the code in a DOMContentLoaded event listener to wait for full DOM parsing
  3. Use Shopify’s {% javascript %} tag or load the JS file with defer attribute
  4. Add null checks (if (!testBtn || !form) return) before manipulating elements

Resolution:
The issue was resolved. The developer confirmed the explanations made sense and thanked the community for assistance.

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

Hi,

I’m trying to create a modal that will be triggered by JavaScript and am having some trouble getting things to work.

Here are the details:

  1. I’ve created a Snippet element that is rendered in the “theme.liquid” file

rovingcondor_0-1729715197277.png
rovingcondor_0-1729715197277.png318×183 7.21 KB

rovingcondor_1-1729715340938.png
rovingcondor_1-1729715340938.png418×148 6.08 KB

2a. I’ve add CSS to hide the Snippet element

2b. There is also CSS that can show that Snippet element. I want this to be added/toggled with JavaScript

rovingcondor_2-1729715560517.png
rovingcondor_2-1729715560517.png539×564 18.5 KB

.form-container-ja-outer-wrapper {
  display: none;
}

.form-container-ja-outer-wrapper.paragraph-class {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000a6;
  z-index: 1045;
}
  1. I’ve created a section in Shopify that has a button element and some JavaScript that is intended to add the CSS class “.paragraph-class” to “.form-container-ja-outer-wrapper” in order to show the Snippet element.

rovingcondor_3-1729715916589.png
rovingcondor_3-1729715916589.png627×543 19.7 KB
  1. I’m getting this error message in the console.

rovingcondor_4-1729716151762.png
rovingcondor_4-1729716151762.png525×128 5.16 KB

Hoping someone can help me trouble shoot this DOM selection issue with JS and Shopify.

Here is the test page I’m working on:

https://liftow.com/pages/ja-sandbox

Thanks!

2 Likes
2

Make sure the javascript that targets element is AFTER the target elements in the HTML source order.

html/DOM doesn’t ’ “hoist” html tags

Or use a document load event to wrap the logic for the element variables

3 Likes
3

Proper way to ask questions!

The problem is that when browser runs you JS code the entire document is not processed yet, so form can not be found.
testButton though is found because it is above your JS code. It is not Shopify-specific.

So i agree with Paul, your options are:

  1. Move your JS to be below both button and popup HTML;

  2. Use either document load or DOMContentLoaded event to run your JS code:

document.addEventListener( 'DOMContentLoaded', () => {
  const testBtn = document.querySelector('#modal-btn-test');
  const form = document.querySelector(".form-container-ja-outer-wrapper");

  if (!testBtn || !form) return;  // better check anyway

  testBtn.addEventListener('click', () => {
    form.classList.toggle("paragraph-class");
  });
});

Plus:

  1. Run your JS code from the .js file which is either defer’red or loaded at the bottom of your document.

3a. May try the {% javascript %} tag: https://shopify.dev/docs/storefronts/themes/architecture/sections/section-assets#javascript if you do not want to separate JS from HTML.

1 Like
4

Awesome. Thanks @tim_1 ! That makes total sense.

Appreciate the assistance from yourself and @PaulNewton

1 Like
5

Thanks for pointing me in the right direction @PaulNewton !

That makes total sense. Appreciate the reply!