Display color swatch name when it is selected

Highlighted
New Member
4 0 0

On my shopify theme I am trying to display the name of the color next to the color label. For example if green is selected "Color:" will change to "Color: Green" and if red is selected it will change to "Color: Red". I am currently using a theme called Basel.

 

**Basel theme product page - https://new-basel2.myshopify.com/collections/bag/products/vintage-cinch-backpack

 

I've tried adding several different lines of code to my liquid file but nothing has worked. I would really appreciate if anyone had any solutions.

 

swatch.liquid -

 

   {%- include 'check_not_feature_img' -%}
    <table class="variations{%- if settings.swatch_design == '2' %} variant_square{%- elsif settings.swatch_design == '3' %} variant_simple{%- endif -%}" cellspacing="0">
       {%- assign option_index = 0 -%}
       {%- if settings.color_name_check != blank -%}{%- assign _gl_color_name = settings.color_name_check | replace: ' ,', ',' | replace: ', ', ',' | split: ',' -%}{%- assign gl_color_name = _gl_color_name | downcase -%}{%-else-%}{%- assign gl_color_name = '\nathan_dt\' -%}{%-endif-%}
       <tbody>
       {%- for option in product.options_with_values -%}
          {%- assign option_index = forloop.index0 -%}
          {%- assign downcased_option = option.name | downcase -%}
          {%- assign downcased_option_check = option.name | downcase | prepend: '"' | append: '"' | strip -%} 
          {%- if downcased_option == 'color' or downcased_option == 'colour' or gl_color_name contains downcased_option_check -%}
                <tr data-option-index="{{ option_index }}" id="gl_select_{{ option_index }}">
                   <td class="label"><label for="{{ option_index }}">{{ option.name }}</label></td>
                   <td class="value with-swatches">
                      <div class="swatches-select" data-id="{{ option_index }}" data-option-index="{{ option_index }}">
                         {%-assign index = 0 %}
                         {%- for value in option.values -%}
                            <div class="basel-swatch bg_color basel-tooltip swatch-size-{{settings.swatch_size}}{%- if settings.swatch_style == '1' %} colored-swatch{%- else %} image-swatch{%- endif %}{%- if first_available_variant and option.selected_value == value %} active-swatch{%- elsif forloop.first == true and product.selected_variant == blank and first_available_variant == false %} active-swatch{%- elsif option.selected_value == value and product.selected_variant != blank and first_available_variant == false %} active-swatch{%- endif %} bg_color_{{ value  | handleize  }} bg_{{ value  | handleize  }} swatch-enabled" data-value='{{ value | handleize }}' data-image-id="{{ featured_image_id[index] }}">
                               <span class="basel-tooltip-label">{{ value }}</span>{{ value }}
                            </div>
                            {%-assign index = index | plus: 1 %}
                         {%- endfor -%}
                      </div>
                   </td>
                </tr>
          {%- else- %}
             <tr data-option-index="{{ option_index }}" id="gl_select_{{ option_index }}">
                <td class="label"><label for="{{ option_index }}">{{ option.name }}</label></td>
                <td class="value with-swatches">
                   <div class="swatches-select" data-id="{{ option_index }}" data-option-index="{{ option_index }}">
                     {%- for value in option.values -%}
                         <div class="basel-swatch basel-tooltip text-only swatch-size-{{settings.swatch_size}}{%- if first_available_variant and option.selected_value == value %} active-swatch{%- elsif forloop.first == true and product.selected_variant == blank and first_available_variant == false %} active-swatch{%- elsif option.selected_value == value and product.selected_variant != blank and first_available_variant == false %} active-swatch{%- endif %} bg_{{ value | handleize  }} swatch-enabled" data-value='{{ value | handleize }}'>
                         <span class="basel-tooltip-label">{{ value }}</span>{{ value }}
                         </div>
                     {%- endfor -%}
                   </div>
                </td>
             </tr>
          {%- endif -%}
       {%- endfor -%}
       </tbody>
    </table>

 

 

 

0 Likes