Color Swatches in Launch theme

Question

I need help in creating color swatches for my store which uses the Launch theme. I am able to replace the dropdown list with radio buttons for each product variant. However the page does not update the product sku, id, etc according to the button selected.

In the Snippet section of the theme files there is a file called "product-main.liquid" which points to another Snippet file called "product-options-dropdown.liquid":

The file "product-main.liquid" is a lengthy one. If it helps I can just show you a portion of the code where it points to "product-options-dropdown.liquid":

{% unless onboarding %}
        {% capture product_form_id %}product-form-{{ form_id }}{% endcapture %}

        {% capture product_form_class %}
          product-form
          {% if selectedVariant.available == false %}product-form-outofstock{% endif %}
          {% if show_spb %}product-form-has-spb{% endif %}
        {% endcapture %}

        {%
          form 'product', product,
          id: product_form_id,
          class: product_form_class,
          data-product-form: form_id
        %}
          <div class="clearfix product-form-nav">
            {% if product.variants.size > 1 %}
              <div class="product-options">
                {% include 'product-options-dropdown' %}

                <div class="selector-wrapper no-js-required">
                  <select
                    class="product-select"
                    name="id"
                    id="product-select-{{ form_id }}">
                    {% for variant in product.variants %}
                      {%- capture option_content -%}
                        {%- if variant.available -%}
                          {{ variant.title }} - {{ variant.price | money }}
                        {%- else -%}
                          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                        {%- endif -%}
                      {%- endcapture -%}
                      <option
                        {% if variant.id == selectedVariant.id %}selected="selected"{% endif %}
                        data-variant-id="{{ variant.id }}"
                        {% if variant.available %}
                          data-sku="{{ variant.sku }}"
                          value="{{ variant.id }}"
                        {% else %}
                          disabled="disabled"
                        {% endif %}>
                        {{ option_content | strip_newlines }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              </div>
            {% else %}
              <input
                class="product-select"
                name="id"
                value="{{ product.variants[0].id }}"
                type="hidden"
                data-variant-title="{{ product.variants[0].title }}" />
            {% endif %}

And here is what "product-options-dropdown.liquid" looks like. It is not as long, so here is the entire code:

    {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
  {% for option in product.options_with_values %}
    {% assign option_index = forloop.index0 %}
    {%- capture option_id -%}
      single-option-{{ form_id }}-{{ option_index }}
    {%- endcapture -%}

    <div class="selector-wrapper js-required">
      <div class="select-wrapper">
        <label
          class="selected-text"
          for="{{ option_id }}"
          data-select-text>
          {{ option.name }}:
        </label>
        <span class="selected-option" data-selected-option aria-hidden="true">{{ option.values | first }}</span>
        <select
          class="single-option-selector"
          id="{{ option_id }}"
          data-option-select="{{ form_id }}"
          data-option-index="{{ option_index }}">
          {% for value in option.values %}
            <option
              value="{{ value | escape }}"
              {% if option.selected_value == value %}selected="selected"{% endif %}>
              {{ value }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
  {% endfor %}
{% endunless %}

I figure that if I use this file as a template I can create a similar file for radio buttons instead of a dropdown list. I also need to have "product-main.liquid" point to this new file. So I went and created "color-swatch.liquid":

{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
  {% for option in product.options_with_values %}
    {% assign option_index = forloop.index0 %}
    {%- capture option_id -%}
      single-option-{{ forloop.index }}-{{ option_index }}
    {%- endcapture -%}

    <div class="selector-wrapper js-required">
      
        {%if option.name == "Color"%}
        <label>
          {{ option.name }}
        </label>     
      
      <div class="variant-swatches">
        {% for value in option.values %}
        <input
          class="single-option-selector"
          type="radio"
          name="color"
          id="color-{{ forloop.index }}"
          data-option-index="{{ option_index }}"
          value="{{ value | escape }}"
          {% if option.selected_value == value %}checked{% endif %}/>
           
           <label for="color-{{ forloop.index }}">
              {{ value }}
            </label>
        
        {% endfor %} 
        
      </div>
     {% endif %}
    </div>
  {% endfor %}
{% endunless %}

Now I'm at the point where selecting an option does not update the variant accordingly. If anyone can show me where I went wrong and help me solve this that would be greatly appreciated! Thanks in advance!

Answer 1

Well this is complex issue because each theme has its own structure. I not sure you can understand this or not but Shopify has a different hidden select dropdown which actually works in the form.

The hidden select option has the variants names with their IDs. What you have to do is, you need to trigger the hidden select options manually by using JS code.

To see that hidden select option inspect through browser and search below class name.

no-js

Mostly it looks like this:

<select name="id" id="ProductSelect-product" data-section="product" class="product-form__variants no-js">