Color swatch, label tag for showing selected option value

Store Design
1

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 %}

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

{%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%}/>

{% endfor %}

{%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

2

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

3

Here it is.

Thanks,

Steve

4

Hey @Steve94Bp

Please try this:

{%if option.name == "Color" %}
    {% assign file_extension = 'png' %}
    {%assign index =  forloop.index %}
 
                
                                  // This is the label where I want to show the selected option value.
                           
      

           {%for value in option.values%}
 

               
 
              
                    

{{value}}

           {% endfor %}
        

 {%else%}
5

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.

6

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

7

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