Variant Text Not Updating in "Choose Options" - Dawn Theme

[Dedomiz]

Hi There,

My Problem is quite simple but I am not sure what piece of code to change for this.

When I have more than 1 color variant for a product, my collection page displays Choose options instead of add to cart. Now, When I click on the 'choose options', no matter which Color Variant I click on, the text where it says "Color:" doesn't change, but the product image changes just fine.

I have added some custom code so that the variants display colour swatches instead of text bubbles but I'm still not too sure how that affected it.

 

store URL is giftvine.co

Anyone's help on this would be greatly appreciated - Thank you 🙂

 

[BSSCommerce-HDL]

Hi @Dedomiz ,

 When we check your site, some errors occur like below:

It means there is no selector has id: selected--color and the correct one must be selected- Color

To fixed this problem please follow these steps:

- Find files that has selector selected- Color

- Paste this code -> Save

document.querySelectorAll('input+label[data--color]').forEach(el=>{
    el.addEventListener('click',()=>{
      document.querySelector('#selected- Color').textContent = " "+el.getAttribute('data--color')
    })
  })

Or can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Dedomiz]

Hi @BSSCommerce-HDL 
Thanks for the reply,

The store link is https://giftvine.co/ and there isn't any password.

I already have a very similar line of code applied into the file, color-option.liquid

<script>
  document.querySelectorAll('input+label[data-{{ option.name | downcase | replace: ' ', '-'  }}]').forEach(el=>{
    el.addEventListener('click',()=>{
      document.querySelector('#selected-{{ option.name | downcase | replace: ' ', '-'  }}').textContent = " "+el.getAttribute('data-{{ option.name | downcase | replace: ' ', '-'  }}')
    })
  })
</script>

I tried replacing it with the code snippet you provided but the same problem still occurs.

The color option changes when on the product page just fine, but when on the collections page and clicking the 'choose options' button, it doesn't change there.