Can any one help me to make Dynamic product title with color options

Store Design
, ,
1

For Example Product Title is “Men Hoodie” and there have color variants “Red” “Green” “Blue” When I click on “Blue” color option so title should be “Men Hoodie - Blue” and when I click on “Green” Color option so title should be Change “Men Hoodies Green”

I have Knowledge about HTML CSS JAVASRIPT AND LIQUID.

Can Any One Write the Code for me? Because I was searching from 3 days but not found any solution.

Example.png
Example.png1082×468 379 KB

I’m Tray This Code But Not Working Properly

{% when 'title' %}
              
                # {{ product.title }}
                    {% for color_option in product.options_by_name['Color'].values %}
                      {% if product.selected_variant.id == variant.id %}
                       {{ color_option }} 
                        {% endif %}
                    {% endfor %}

And trying also with metafields. Its working 90% Good but not change dynamically.

{% for variant in product.variants %}
                 {% if product.selected_variant.id == variant.id %}
                  # {{ variant.metafields.custom.value_name }}
                  {% endif %}
                {% endfor %}

Thanks

Best Regards

Yousuf

2

Hi @Yousuf035 ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

Hay @Litos Hope you are doing.

Thanks for your comments.

My Site Link: HERMANANDCO

4

Hi @Yousuf035

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

  • Go to Online Store->Theme->Edit code theme.liquid paste my code before element

PageFlyVictor_0-1666863933074.png
PageFlyVictor_0-1666863933074.png1115×550 50.9 KB

Hope my solution works perfectly for you!

Best Regards;

PageFly

5

Hi @Yousuf035 ,

Please follow the steps below:

  • Step 1: change the liquid code of title:
# 
              {{ product.title | escape }} - 
              
                {% for color_option in product.options_by_name['Color'].values %}
                  {% if product.selected_or_first_available_variant.title contains color_option  %}
                    {{ color_option }}
                    {% break %}
                  {% endif %}
                {% endfor %}
  • Step 2: Go to theme.js file, find ‘$iconOptionContainers’ and change code here:

Screenshot.png
Screenshot.png1399×583 42.2 KB

Code:

if (variant) {
                            var optionValue = variant.options[optionIndex];
                            $(this).find('.label__value').text(optionValue);
                            $('.title_variant_value').html(optionValue);
                        } else {
                            var selectedOption = this.querySelector('.opt-btn:checked');
                            if (selectedOption) {
                                $(this).find('.label__value').text(selectedOption.value);
                                $('.title_variant_value').html(selectedOption.value);
                            }
                        }

Hope it helps!

6

Hi @Litos

Thank you so much. :blush:

Your given code is working 100%.

Thank so much again for help me out in this issue and give a 100% best solution.

7

Hi @PageFly-Victor

Thank you too.

Your given solution is working 75% Because your given script change whole title in to color option name.

Thanks

8

you are welcome, I am glad when can help you and feel happy when your issue fixed

9

Hi PageFly-Victor,

I tried your method. But it didn’t work. Can you help me check it? Thank you.

10

Hi @Yousuf035 @Litos Where should i paste the step1 code in my theme ,Going through the same issue