Color swatch, label tag for showing selected option value

[Steve94Bp]

Hi,

Somehow I managed to code  a color swatch succesfully to my theme, it's working Ok, but I just want 1 extra thing which I haven't been able to do yet.

Basically I want a label which shows the name of the color of selected variant.

Here is my code for the color swatch:

{%if option.name == "Color" %}

    {% assign file_extension = 'png' %}

    {%assign index =  forloop.index %}

               <label>{{option.name}}:  </label> 

                <label> {{value}} </label>                  // This is the label where I want to show the selected option value.

      <div class="swatch">

           {%for value in option.values%}

               <input class="single-option-selector__radio " id="color-{{forloop.index}}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{%endif%}/>

              <label for="color-{{forloop.index}}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | escape | append: '.png' | strip | asset_url }})"></label>

           {% endfor %}

        </div>

 {%else%}

Do I have to use a forloop for that? I'm a bit lost with this.

Thank you for your help in advance.

Regards,

Steve

[diego_ezfy]

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

Kind regards,
Diego

[Steve94Bp]

https://holdimate.myshopify.com/products/baby-diaper-backpack?variant=35486016405664

Here it is.

Thanks,

Steve

[diego_ezfy]

Hey @Steve94Bp 

Please try this:

{%if option.name == "Color" %}
    {% assign file_extension = 'png' %}
    {%assign index =  forloop.index %}
 
               <label>{{option.name}}:  </label> 
                <label> {{value}} </label>                  // This is the label where I want to show the selected option value.
                           
      <div class="swatch" style="display:flex;">
           {%for value in option.values%}
 
<div style="display:flex;flex-direction:column;text-align:center;justify-content:center;margin-right:10px;">
               <input class="single-option-selector__radio " id="color-{{forloop.index}}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{%endif%}/>
 
              <label style="margin-right:0;" for="color-{{forloop.index}}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | escape | append: '.png' | strip | asset_url }})"></label>
                    <p style="display:block;text-align:center;">{{value}}</p>
</div>
           {% endfor %}
        </div>

 {%else%}

[Steve94Bp]

I don't want to show all of the colors below the swatchers, I want 1 row with the currently selected option value, and which dynamically changes whenever one of the swatches has been selected. 

[diego_ezfy]

Hello,

I understand. In this case, it would require Liquid/CSS/Javascript knowledge to implement a custom feature, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

In case you're unfamiliar with these technologies you'll need to hire a Shopify developer to assist you.

Kind regards,
Diego

[lichael06]

Hi I also have the same question, Have you found any answer about this?