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

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.





store URL is

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

Replies 2 (2)

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

New Member
4 0 0

Hi @BSSTech-Venture 
Thanks for the reply,

The store link is and there isn't any password.

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

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

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.