Public Ticket #1843435
Color Variations


  • Tom De Vis started the conversation

    I love how the color variations show on a product page.

    But whenever there is a color that it does not recognise it default to the "red-background color"

    For example on  https://climbingcats.eu/product/boulder-cat/
    You see that the colors "Athlethic Heather" and "Ash" are not recognised and are shown as Red.

    Also, is it possible that the colors are always shown fully, not only when hovered?

    Kind regards and thank you in advance.


  •  251
    Nico replied

    Hi Tom,

    You can create custom colors with CSS. For example use this CSS code:

    .ql_custom_variations .ql_custom_variation .ql_color_variation li a i.ql_Ash{
        background-color: #000000;
    .ql_custom_variations .ql_custom_variation .ql_color_variation li a i.ql_Athletic{
        background-color: #000000;

    And to show at full opacity, use this one:

    .ql_custom_variations .ql_custom_variation .ql_color_variation li a i{
        opacity: 1;
  • Tom De Vis replied

    Hey Nico, 

    Thank you very much, this worked like a charm.

    Although there are some colors that have similar names, most of them use the "Heather" keyword. Is there a way, to distinguish between them?

    Example of these colors: https://climbingcats.eu/product/race-to-the-boulders/

  •  251
    Nico replied

    You can replace this file:


    For this one:


    And that will make the class name look like this "ql_heather-midnight-navy"

    All lowercase and with dashes instead of spaces.

  • Tom De Vis replied

    Hello Nico,

    Thank you for the help but I've changed the file but it doesn't help.

    Double checked if the file is properly loaded 24 hours later and I can see the JS when using "inspect element" in chrome. Although the Class name is still with a space instead of a dash.

    <i class="ql_heather-midnight navy"></i>
    The first space got replaced, but the second one didn't.


    This code worked (replaced at line 158)

    var i_class = current_value.replace(/ /g, "-");

    Thank you for all the help Nico.


  •  251
    Nico replied

    Glad to hear that Tom!

    Let me know if you need anything else.