New Shopify Certification now available: Liquid Storefronts for Theme Developers

Change product title when color is click dawn theme

moise75
Excursionist
42 0 8

Screenshot 2022-12-03 220934.png

Replies 6 (6)
KetanKumar
Shopify Partner
36721 3634 11915

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

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

banned
moise75
Excursionist
42 0 8

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

moise75
Excursionist
42 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 1785 3020

@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

 

banned