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

FOP
Explorer
100 0 17

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

Screen Shot 2022-07-12 at 10.49.15.png

 

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;

}

 

Replies 6 (6)

nidhipatel
Pathfinder
89 20 21

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.

image-20220719-044910.png

 

 

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

 
image-20220719-044944.png
 
 

 

.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

 
image-20220719-044815.png
 
 

 

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

 

 

image-20220719-043226.png

 

I hope it's helpful to you.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
FOP
Explorer
100 0 17

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.Screen Shot 2022-08-06 at 15.47.45.png

 

 

FOP
Explorer
100 0 17

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

joaovalado
Visitor
2 0 0

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
Visitor
1 0 0

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
Excursionist
17 2 3

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?