Display name of colour variant selected on Shopify - shopify

Question

On this page I have some swatches that when selected they don't display the variant name.
Basically, I need to add a paragraph text under the variant swatches that indicate the name of the variant selected...
I'm not good on javascript and online I didn't found any complete guide about that
Thanks a lot for your help!

Answer 1

That looks like a theme I've seen before. If I recall correctly, that theme uses a file called swatch.liquid to make those colour circles. I'm writing this answer using a version of a swatch file that I happen to have on hand, so the specific code may not be exactly what your theme has, but hopefully I'll be able to help you find what you need.
Here is the code from my swatch.liquid file that prints out the swatches. (This is roughly the bottom half of the swatch.liquid file, found in the snippets folder)
<div class="product-options">
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="header">
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% else %}size {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
<input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}">
{{ value }}
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
{% endif %}
</div>
{% endunless %}
{% if variant.available %}
<script>
jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
{% endif %}
{% endfor %}
</div>
</div>
</div>
That looks a bit messy, I know - so let's try and find the part that you'll want to modify.
Here's the part from the above example that prints the swatch element when the swatch is a colour:
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
{% else %}
In between those <label> tags you should be able to add any text that you need - such as a <span class="swatch-color-name">{{ value }}</span>
Adding extra HTML in here may throw off the current styles of your page, so you may need to add some extra CSS rules to apply to any elements you add to get things to line up nicely again.
Hope this helps!
NB: If you're using Chrome, there's a useful extension called "Search All" that lets you search your entire Shopify theme if you're having trouble finding the file that needs to be edited. Searching for keywords like 'color' or 'variant.options' should help point you in the right direction.