I Have Colour Swatches But How To I Add The Name Of The Color When It's Seclected?

[FOP]

Hello,
I am needing some help, I found coding online for color swatches for the DAWN Theme, they have worked perfectly but they do not display the color name when you hover and or select the color, I would love for the color name to appear next to where is says 'Color'.  I would love some help on this,  attached below is how the swatches currently look & the coding I used 

I would appreciate any help or advice you can give, I've spent countless hours over the last week trying to find a solution.

Thanks,

Natalie

Change Main-Product.Liquid

Go to edit code, head over to the Section folder and find main-product.liquid. Once found, scroll down until you find the below code: 

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

{{ value }}

</label>

replace the above, with the below code

{% assign variant_needed = null %}

{% for variant in product.variants %}

{% if variant.options contains value %}

{% assign variant_needed = variant %}

{% endif %}

{% endfor %}

{% if variant_needed.metafields.color.swatch and option.name == "Color" %}

<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-color: {{variant_needed.metafields.color.swatch}}">

&nbsp

</label>

{% elsif variant_needed.metafields.image.swatch and option.name == "Color" %}

<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-size: cover; background-image: url('{{variant_needed.metafields.image.swatch}}')">

&nbsp

</label>

{% else %}

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

{{ value }}

</label>

{% endif %}

Add Code To Base.css

Now, head over to the Asset folder, find base.css and paste the below code at the bottom of the file

.product-form__input input[type="radio"] + .color-swatch {

border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */

width: 40px;

height: 40px;

padding: 0;

}

.product-form__input input[type="radio"]:checked + .color-swatch,

.product-form__input input[type="radio"]:hover + .color-swatch {

border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */

}

.product-form__input input[type="radio"] + .swatch {

border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */

width: 40px;

height: 40px;

padding: 0;

color: #000;

display: inline-flex;

justify-content: center;

align-items: center;

}

.product-form__input input[type="radio"]:checked + .swatch,

.product-form__input input[type="radio"]:hover + .swatch {

border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */

background: none;

}

[nidhipatel]

Hi @FOP 

• To display selected color name after 'Color' and display name on hover you need to add below code:

• open main-product.liquid file and replace below code.

{%- for option in product.options_with_values -%}
    <fieldset class="js product-form__input">
      <legend class="form__label">{{ option.name }} : <span>{{ option.selected_value }}</span></legend>
      {%- for value in option.values -%}
      <div class="variant_block">
        <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                name="{{ option.name }}"
                value="{{ value | escape }}"
                form="{{ product_form_id }}"
                {% if option.selected_value == value %}checked{% endif %}
                class="{% if variant.available %} available {% else %} unavailable {% endif %}"
                >

        {% assign variant_needed = null %}
        {% for variant in product.variants %}
        {% if variant.options contains value %}
        {% assign variant_needed = variant %}
        {% endif %}
        {% endfor %}

        {%- assign newval = value | handle -%}
        {% if option.name == "Color" %}
        <label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-color: {{ newval | remove: '-' | remove: ' ' }}">
          &nbsp
        </label>
        {% elsif option.name == "Color" %}
        <label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-size: cover; background-image: url('{{ newval | remove: '-' | remove: ' ' }}')">
          &nbsp
        </label>
        {% else %}
        <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
          {{ value }}
        </label>
        {% endif %}
        <span class="variant_tooltip">{{ value }}</span>
      </div>
      {%- endfor -%}
    </fieldset>
{%- endfor -%}

• add below css inside base.css file

.variant_block{
  position:relative;
  display: inline-block;
}
.product-form__input .variant_tooltip{
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -50%;
  white-space: nowrap;
  background: #000;
  color: #fff;
  padding: 2px 5px;
  border-radius: 5px;
  min-width: 40px;
  text-align: center;
  font-size: 12px;
  line-height: 17px;
}
.variant_block:hover .variant_tooltip{
  display: block;
}
.product-form__input .variant_tooltip::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #000;
  bottom: -6px;
  left: 50%;
  transform: translateX(-60%);
}

• open global.js find VariantRadios and add below line inside script

fieldset.querySelector('.form__label').lastChild.textContent = Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;

I hope it's helpful to you.

[FOP]

Hello,
The labels work although not all of my colors work, they now show like this without all of the colours and the colour which are there (other than black) are wrong.

[FOP]

@nidhipatel Not too sure if you are able to assist with why the colours are not showing at all now.  

[joaovalado]

Hi, 

This was very helpful and is working great, although one thing isn't working/updating.

This part of the code:

{% if option.selected_value == value %}checked{% endif %}
class="{% if variant.available %} available {% else %} unavailable {% endif %}"

When changing between the different variants, the "checked" always shows in the first/default variant, and the class always shows as unavailable.

You can see an example here, where the color "White" is sold out:

https://shop.vicoustic.com/products/gen_vmt-penray-01-panels

Do you have any idea how can this be fixed?

I would also like to have a specific css class for sold out items.

Thank you

[delijaa1]

Got the same problem but found the solution with ChatGPT: 

updateOptions() {
  const fieldsets = Array.from(this.querySelectorAll('fieldset'));
  this.options = fieldsets.map((fieldset) => {
    const checkedRadio = Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked);
    const label = fieldset.querySelector('.form__label');
    const labelText = label.lastChild.textContent.split(': ')[0];
    if (checkedRadio) {
      label.lastChild.textContent = `${labelText}: ${checkedRadio.value}`;
      return checkedRadio.value;
    }
  });
}

[D666]

Hi @nidhipatel,

I'm trying to get the same result and your solution looks great. However, I cannot find the code you specify (<variant-radios class="no-js-hidden"...>) in my main-product.liquid.  This is likely because I'm using a newer version of Dawn (11).

Can you please help?