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

Dedomiz
New Member
4 0 0

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.

 

 

BrownWhite1.png

BrownBlack1.png

store URL is giftvine.co

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

Replies 2 (2)

BSSTech-Venture
Shopify Expert
354 82 88

Hi @Dedomiz ,

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

view (3).png

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

view (4).png

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Dedomiz
New Member
4 0 0

Hi @BSSTech-Venture 
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.