Shopify themes, liquid, logos, and UX
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi @Moise75,
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Go to Online Store->Theme->Edit code theme.liquid paste my code before </body> element
<script>
window.onload=()=>{
const changeColor=()=>{
const variant=document.querySelectorAll('fieldset')
variant.forEach(v=>{
const infor=v.closest('.product__info-wrapper');
const title=infor.querySelector('.product__title h1')
const inputs=v.querySelectorAll('input[name="Color"]')
if(inputs.length>0){
inputs.forEach(input=>{
if(input.checked){
const value=input.value;
const checkLenght=value.indexOf(' ');
if(checkLenght<0){
title.style.color=`${value}`
}else{
const newColor=value.slice(checkLenght+1);
title.style.color=`${newColor}`
}
}
})
}
})
}
changeColor();
document.querySelectorAll('fieldset input[name="Color"]').forEach(item=>{
item.onclick=()=>changeColor()
})
}
</script>
Hope my solution works perfectly for you!
Regards,
Victor | PageFly
Please let me know if it works by giving it a like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Let’s create a unique website design with PageFly for free now!
how can I change the title then? Will that work for only this product?
this only change the color I don't want the color to be change I want the title to change is it's black t-shirt change it to black T-shirt instead of Green
You can try again with this code:
<script>
window.onload=()=>{
const changeColor=()=>{
const variant=document.querySelectorAll('fieldset')
variant.forEach(v=>{
const infor=v.closest('.product__info-wrapper');
const title=infor.querySelector('.product__title h1')
const inputs=v.querySelectorAll('input[name="Color"]')
if(inputs.length>0){
inputs.forEach(input=>{
if(input.checked){
const value=input.value;
const content=title.innerText
title.innerText=content.slice(0,content.indexOf('-')-1) + value
}
})
}
})
}
changeColor();
document.querySelectorAll('fieldset input[name="Color"]').forEach(item=>{
item.onclick=()=>changeColor()
})
}
</script>
Hope my solution works perfectly for you!
Regards,
Victor | PageFly
Please let me know if it works by giving it a like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Let’s create a unique website design with PageFly for free now!
User | RANK |
---|---|
221 | |
145 | |
63 | |
46 | |
45 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023