splitting variant buttons

Highlighted
New Member
1 0 0

I'm trying to split my variant buttons. I can do it when i inspect the element but im struggling to do it with the liquid file. (I'm using debutify).

 

What I'm trying to accomplish:

05b82fcff7e6d6ca4f114be57d3668d8.png

What's on my store currently:

61f28f605499ac94eac261ac90ca33b0.png

this is the code currently, i'm not sure where to add <br> to accomplish this. any help would be great, thanks. 

{% if section.settings.product_selector == 'radio' %}
                              <fieldset class="single-option-radio"
                                name="{{ option.name | handleize }}"
                                id="ProductSelect--{{ section.id }}-option-{{ forloop.index0 }}">
                                {% assign option_index = forloop.index %}
                                {% for value in option.values %}
                                
                                  {% assign variant_label_state = true %}
                                  {% if product.options.size == 1 %}
                                    {% unless product.variants[forloop.index0].available  %}
                                      {% assign variant_label_state = false %}
                                    {% endunless %}
                                  {% endif %}
                                
                                  <input type="radio"
                                    {% if option.selected_value == value %} checked="checked"{% endif %}
                                    {% unless variant_label_state %} disabled="disabled"{% endunless %}
                                    value="{{ value | escape }}"
                                    data-index="option{{ option_index }}"
                                    name="{{ option.name | handleize }}"
                                    class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                                    id="ProductSelect--{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}">
                                  <label for="ProductSelect--{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}"class="btn btn--small {% unless variant_label_state %} disabled{% endunless %}" style="height: 39px; width: 84px; line-height: 25px;">{{ value | escape }}</label>
                                {% endfor %}
                              </fieldset>

 

 

0 Likes
Highlighted
Trailblazer
175 26 29

Hello @IsaakD7 

Is you requirement like after 3rd option, need to break line?

Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
0 Likes