We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Change product title when color is click dawn theme

Change product title when color is click dawn theme

moise75
Excursionist
45 0 8

Screenshot 2022-12-03 220934.png

Replies 6 (6)

KetanKumar
Shopify Partner
37635 3670 12168

@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.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

PageFly-Victor
Shopify Partner
7865 1786 3135

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>

 

PageFlyVictor_0-1670164033840.png

 

PageFlyVictor_1-1670164033850.png

 



Hope my solution works perfectly for you!

Regards,

Victor | PageFly

moise75
Excursionist
45 0 8

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

moise75
Excursionist
45 0 8

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
Shopify Partner
7865 1786 3135

@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