Adding color label to my color swatches in Shoptimize Product Page

[Gustav001]

Hi,

I have color swatches on my product page but on click or hover, they don't display the color label. This is for Shoptimize theme. I need to show the labels so that customer know exactly which product they are selecting.
I have checked all the settings and cannot find where to set this. Looks like it needs custom code?

Please advise.

[vinh0225 · Accepted solution]

Hi,

I updated the codebase.
Please check. https://www.gardensgenie.com/collections/fire-pit-tables/products/alameda-fire-table-60-concrete-top

Please let me know if you have any concern.

Regards,

Vinh

[ProtoMan44]

@Gustav001 Hey, thanks for posting here. if you have no idea about liquid code so please use an app like Globo product option etc.

[ProtoMan44]

@Gustav001 first you can creat a text feild to match option color as the option title 
add schema in shopify theme setting:

{
  "name": "Product Option Colors",
  "id": "product_option_colors",
  "type": "text",
  "default": "Black: #000, White: #fff",
  "info": "Enter color mappings in the format 'Name: #Hex, Name: #Hex'"
}

then add liquid code which is needed its a sample :

{% assign color_mappings = settings.product_option_colors | split: ',' %}
{% assign color_map = '' %}

{% for mapping in color_mappings %}
  {% assign parts = mapping | split: ':' %}
  {% if parts.size == 2 %}
    {% assign color_name = parts[0] | strip %}
    {% assign color_value = parts[1] | strip %}
    {% assign color_map = color_map | append: '{ "' | append: color_name | append: '": "' | append: color_value | append: '" }' %}
  {% endif %}
{% endfor %}

{% assign color_map = color_map | replace: '}{', '},{' %}
{% assign color_map = '[' | append: color_map | append: ']' %}
{% assign color_map = color_map | parse_json %}

{% for option in product.options_with_values %}
  {% for value in option.values %}
    {% assign color = '' %}
    {% for map in color_map %}
      {% if map.first == value %}
        {% assign color = map.last %}
      {% endif %}
    {% endfor %}
    <div class="product-option" data-value="{{ value }}" style="background-color: {{ color }}">
      {{ value }}
    </div>
  {% endfor %}
{% endfor %}

understand the color mapping to apply background color

[vinh0225]

Hi @Gustav001 

If you add "title", it will show a tooltip.

However, it is necessary to update liquid file.
If you allow me to access your store, I can help you definitely.

Regards,

Vinh

[Gustav001]

@vinh0225- thank you for your reply.

My store is www.gardensgenie.com. A sample page (with color swatches is: https://www.gardensgenie.com/collections/fire-pit-tables/products/alameda-fire-table-60-concrete-top...

Let me know what you need.

[vinh0225]

@Gustav001 

If you want this, it is necessary to update a liquid code.

If you are not familiar with code, I can help you and I will require access to your store admin.
If you don't mind, please let me know your collaborator access request code so that I can send a request.
Here is how to get it:

To get a collaborator request code on Shopify, you can do the following:

1. Log into your Shopify store
2. Go to Settings
3. Select Users and permissions
4. Scroll down to the Collaborators section
5. Select the option that only people with a code can request to edit your store
6. Click Generate new code
7. Click Generate code again to confirm
8. Copy the code and share it with me via private message.
   

Regards,
Vinh

[Gustav001]

@vinh0225- how do I PM you?

[vinh0225 · Accepted solution]

Hi,

I updated the codebase.
Please check. https://www.gardensgenie.com/collections/fire-pit-tables/products/alameda-fire-table-60-concrete-top

Please let me know if you have any concern.

Regards,

Vinh

[Gustav001 · Accepted solution]

@vinh0225 - as per our other chat, thank you very much for your great help!  It all works perfectly now. 

Regards,

Gustav