Displaying Swatch Names

KavisoTaylor
Tourist
5 0 1

I've seen a couple of other questions like mine, but their starting code was so incredibly different I wasn't sure how to implement fixes into our setup.

I went through Coding with Jans YouTube walkthrough of adding color swatches to our theme which worked great, after some customizing it looks great and works. The code added to do the bulk of adding these swatches was:

 

                {%if option.name == "Color"%}
                <label>{{option.name}}</label>
               
                {%assign index = forloop.index %}
                <div class="variant-swatches-style">
                {%for value in option.values%}
                <input class="single-option-selector-{{ section.id }}" 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}}">
                <img src="{{value | escape | append:'.jpg' | strip | asset_url }}"/>
                </label>	
                {%endfor%}
                </div>

 

 

So now I can upload a swatch (under our assets) and it pulls over as the swatch color. I'd like to add the swatch/color/variant name though so a customer knows the name of the color they are picking. Here's what the product selection currently looks like along with what I'd like to add:

 

Color_Goal.jpg

I can not figure out how to just target the selected color name and show it for the life of me. The closest I've gotten was putting in this:

 

 

<label class="variant-sku"{{ current_variant }}></label>

 

 

Which ends up showing the full item name + the color. I'm very very very ignorant of CSS/HTML/Javascript, and I'm just having a really tough time figuring out how to just call the color name. 

In my mind there has to be a way to append the initial label to be something like:

 

<label>{{option.name}} +SHOW THE FRIGGIN COLOR NAME PLEASE</label>

 

 

 I just can't get to the answer. Any help is much appreciated!

0 Likes
escherprint
Excursionist
26 6 4

What theme are you using? I'm using Impulse theme and I've figured out swatches for my theme. To add the name of the colour I just used the variant metal and added the name gold or silver for my jewellery pieces. The default name for swatches in my theme is colour so I had to go into the edit languages section to change it to metal.

Here is an example where the name show up:

https://shoptwoblooms.com/products/choker-necklace?variant=39842033860787

 

0 Likes
KavisoTaylor
Tourist
5 0 1

We're using the Venture theme. I have the swatches working, just can't figure out how to code the color name to populate when selected. It looks like the Impulse Theme has swatches built-in, so it was just an option to turn on. Venture doesn't have swatches so it was custom to put in, just need help figuring out how to code the names into the above code I posted. 

0 Likes
escherprint
Excursionist
26 6 4

Does this article help, it lists some coding for colour swatches:

https://help.stylehatch.com/article/335-product-color-swatches

0 Likes
KavisoTaylor
Tourist
5 0 1

Sadly no, that is also a support guide for a theme that natively supports swatches. I need something I can plug into the custom code I pasted above. 

0 Likes
escherprint
Excursionist
26 6 4

Okay hopefully someone else can help out. I'm trying to learn code myself and spent weeks trying to solve an issue I was having.

0 Likes