re-write a piece of code that was generated with for loop

[Valentinlako]

Hello community,

We wanted to add a "best seller" badge to a specific product variant. We did it, we know it works static, but I can't move my head around the for loops.

So, shopify creates the front-end variants using the following piece of code:

{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}

After the for is ended, we want to take ONE input (if input.value= 18 x 24 -> rewrite label WITH our div inside)

We want to add a div within the <label>, in order to attach the "best seller" text right into it

The result should be the following:  

We don't want to add another variant, just take the one 'liquid for' generated and rewrite the label inside it.

Or, more simple than that, if the label value = 18 x 24 -> rewrite the label with our div inside

We are 100% this should be very easy to accomplish, but we are beginners in Liquid. I hope I explained very detailed and I hope you understood
Thanks in advance.

[Valentinlako · Accepted solution]

Hey guys. I did it.


I am pasting it here in case anyone wants to use it:

{%- for option in product.options_with_values -%}

                      <fieldset class="js product-form__input">

                        <legend class="form__label">{{ option.name }}</legend>

                        {%- for value in option.values -%}

                          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"

                                name="{{ option.name }}"

                                value="{{ value | escape }}"

                                form="product-form-{{ section.id }}"

                                 {% if option.selected_value == value %}checked{% endif %}

                                 >

                        {% if value == '18" x 24"' %}

                        <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">

        <div class="best_seller" style="">

my div with best seller <p> and <img> for the arrow

</div>

                            {{ value }}

                          </label>

                        {% else %}

                          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">

                            {{ value }}

                          </label>

                        {% endif %}

                        {%- endfor -%}

                      </fieldset>

                  {%- endfor -%}


Basically, within the for I added an {% if the value is ="mybestseller" %} add the div ELSE just show value. Very simple