Change product title when color is click dawn theme

[moise75]

[KetanKumar]

@moise75 

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.

[moise75]

https://www.faithloveafrica.com/products/god-is-faitfull

[PageFly-Victor]

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

[moise75]

how can I change the title then? Will that work for only this product?

[moise75]

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

[PageFly-Victor]

@moise75 

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