My Js code isn't working on shopify but on my own desktop

Store Design

Topic summary

A developer is experiencing issues with JavaScript code that works correctly on their local desktop but fails when added to a Shopify custom liquid section.

Code Details:

  • The code involves a form with radio button inputs
  • It’s designed to toggle CSS classes based on selected color values
  • The JavaScript listens for form changes and maps checked radio button values

Key Problem:
The posted code snippet appears corrupted or reversed in the latter portion, showing garbled text like “DedoCroloc” and reversed syntax (e.g., “;)” instead of “();”). This suggests either:

  • A copy-paste error occurred when posting
  • The code itself contains encoding/formatting issues
  • There may be character encoding problems in the Shopify environment

Status:
The issue remains unresolved with no responses yet. The developer needs help identifying why the environment-specific failure is occurring, though the corrupted code display makes diagnosis difficult without seeing the actual working version.

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

Hi There,

I’ve been trying to add this code to my Shopify custom liquid section but it won’t work I have already tested it on my desktop but it seems to work just fine there. Can you find the mistake?

The mistake is somewhere in this part of Javascript file, but I added the HTML file so that is easier to understand what is going on



const form = document.querySelector('form');
const color = document.querySelectorAll('.yourColorD');

document.querySelector('form').addEventListener('change', function(e) {

  let colorCodeD = [...form.querySelectorAll('input[type=radio]:checked')].map(element => element.value).join('');

  color.forEach(element => {
    element.classList.toggle('color1', colorCodeD === 's1h1e1');
    element.classList.toggle('color2', colorCodeD === 's4h4e4');
    element.classList.toggle('color3', colorCodeD === 's4h4e4');
    element.classList.toggle('color4', colorCodeD === 's4h4e4');
    element.classList.toggle('color5', colorCodeD === 's4h4e4');
    element.classList.toggle('color6', colorCodeD === 's4h4e4');
    element.classList.toggle('color7', colorCodeD === 's4h4e4');
    element.classList.toggle('color8', colorCodeD === 's4h4e4');
    element.classList.toggle('color9', colorCodeD === 's4h4e4');
    element.classList.toggle('color10', colorCodeD === 's4h4e4');
  })

  console.log(colorCodeD);

});
1 Like