Shopify themes, liquid, logos, and UX
Hi guys,
Lately, I've been trying to code something on Shopify, after first coding it on my coding application I tested it on my Live server and it worked perfectly fine.
Unfortunately, I tried it on Shopify but with no success.
I don't know why but maybe one of you experts might know why it doesn't work.
HTML:
<form>
<input type="radio" value="s1"></input>
<input type="radio" value="s2"></input>
<input type="radio" value="s3"></input>
<input type="radio" value="s4"></input>
<input type="radio" value="s5"></input>
<input type="radio" value="s6"></input>
<br>
<div class="main"></div>
</form>
CSS:
.main {
background-color: transparent;
border: 1px solid white ;
width: 50px;
height: 50px;
text-align: center;
}
.main.color1 {
background: blue;
}
JS:
const form = document.querySelector('form');
const color = document.querySelectorAll('.main');
document.querySelector('form').addEventListener('change', function(e) {
let colorCodeD = [...form.querySelectorAll('input[type=radio]:checked')].map(elementD => elementD.value).join('');
color.forEach(elementD => {
elementD.classList.toggle('color1', colorCodeD === 's1');
})
console.log(colorCodeD);
});
I compressed it to make it more understandable and simple. Please Help me I've been stuck forever on this on. haha.
I don't fully understand please explain.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025