Color swatch, label tag for showing selected option value

Highlighted
Tourist
7 0 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 %}
 
               <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
 
 
0 Likes
Highlighted
Astronaut
1087 180 213

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Highlighted
Astronaut
1087 180 213

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

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
7 0 1

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. 

0 Likes
Highlighted
Astronaut
1087 180 213

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes