title: How do I break up and display only 1 of three variants at a time?
body: <p>I'm looking to build a multi-step product selector using tabs. I'm looking to display on variant per tab but can't find a way to break up variants to display them individually.</p>
  
  <p>I have tried posting the code bellow multiple times (one in each tab) but this makes each selection "stuck". Yes I know this would of led to issues but I was just trying to make the code work. </p>
  
  <pre><code>        &lt;div class="product-size  option-{{ option | handle }} {{ product_options }}"&gt;
              &lt;span class="option-label"&gt;{{ option }}:&lt;/span&gt;
              &lt;div class="select-wrapper-sm"&gt;
                  &lt;select class="form-control input-sm size-variants"&gt;
                      {% for name in option_names %}
                          &lt;option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}"&gt;{{ name }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
              &lt;/div&gt;
              {% if product_options == 'swatches' %}
                  &lt;ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}"&gt;
                      {% for name in color_image %}
                          {%- assign title = name | split:':' | first | replace:'!__!','' -%}
                          {%- assign img_src = name | split:':' | last -%}
                          &lt;li  {% if selected_value == title %}class="active"{% endif %}&gt;
                              {% if option_title contains 'color' %}&lt;a href="#" data-tooltip="{{ title }}" data-placement="top" title="{{ title }}" data-value="{{ title | handle | escape }}" data-image="{{ img_src }}"&gt;&lt;span class="value"&gt;&lt;img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""&gt;&lt;/span&gt;&lt;/a&gt;{% else %}&lt;a href="#" data-value='{{ title | handle | downcase | escape }}'&gt;&lt;span class="value"&gt;{{ title | escape }}&lt;/span&gt;&lt;/a&gt;{% endif %}
                          &lt;/li&gt;
                      {% endfor %}
                  &lt;/ul&gt;
              {% endif %}
          &lt;/div&gt;
  </code></pre>
  
  <p>Currently the whole product form is being displayed with this code</p>
  
  <pre><code>&lt;div class="product-actions product-id-{{ product.selected_or_first_available_variant.id }} {% if product.variants.size == 1 and quick_view == 'yes' %}product-no-options no-border{% endif %}"&gt;
              {% form 'product', product %}
                  {% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity &lt; 1 and product.selected_or_first_available_variant.inventory_policy == "continue" %}
                  &lt;input type="hidden" name="properties[{{ 'general.theme.status' | t }}]" value="{{ 'general.theme.pre_order' | t }}"&gt;
                  {% endif %}
                  {% if product.metafields.c_f.line_properties != blank %}
                      {{ product.metafields.c_f.line_properties }}
                  {% endif %}
                  {% include 'product-options-form' design:'default' %}
                  {% if product.available %}
                  &lt;div class="product-actions-row"&gt;
                      &lt;div class="pull-left"&gt;
                          &lt;div class="product-qty"&gt;
                              &lt;div class="qty qty-changer"&gt;
                                  &lt;fieldset&gt;
                                      &lt;input type="text" class="qty-input" name="quantity" value="1" data-min="1" {% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity &gt; 0 and product.selected_or_first_available_variant.inventory_policy == 'deny' %}data-max="{{ product.selected_or_first_available_variant.inventory_quantity }}"{% endif %}&gt;
                                      &lt;input type="button" value="+" class="increase"&gt;
                                      &lt;input type="button" value="-" class="decrease"&gt;
                                  &lt;/fieldset&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="product-stock-dynamic {% unless product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity &gt; 0 and product.selected_or_first_available_variant.inventory_policy == 'deny'  %}hidden{% endunless %} stock-dynamic"&gt;{% if product_inventory_count %}max &lt;b&gt;{% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity &gt; 0 %}{{ product.selected_or_first_available_variant.inventory_quantity }}{% endif %}&lt;/b&gt; {{ 'general.theme.itemss' | t }}{% endif %}&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="pull-right"&gt;
                          {% capture status %}{{ 'general.theme.add_to_cart' | t }}{% endcapture %}
                          {% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity &lt; 1 and product.selected_or_first_available_variant.inventory_policy == "continue" %}
                              {% capture status %}{{ 'general.theme.pre_order' | t }}{% endcapture %}
                          {% endif %}
                          &lt;div class="product-actions-btn"&gt;
                                  &lt;button class="btn btn-lg js-add-to-cart-product-page" data-product-handle="{{ product.handle }}"  data-variant-id="{{ product.selected_or_first_available_variant.id }}" title="{{ status }}"&gt;&lt;span&gt;{{ status }}&lt;/span&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="product-actions-link"&gt;
                          {% if quick_view == 'yes' %}{% assign position = 'bot' %}{% else %}{% assign position = 'right' %}{% endif %}
                          {% include 'product-card-and-page-actions' position:position %}
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% if section.settings.dynamic_checkout_button %}
                      &lt;style&gt;
                         .shopify-payment-button__more-options {
                              display: none;
                          }
                         .shopify-payment-button__button {
                             outline: none;
                             border-radius: 0;
                             text-transform: uppercase;
                             background: #d3fbc9;
                             color: #FFFFFF;
                             padding: 9px 35px 11px;
                             font-weight: 500;
                             line-height: 32px;
                             border: 0;
                             color: black;
                             font-weight: bold;
                         }
                         .shopify-payment-button__button--unbranded:hover:not([disabled]){
                             background: black !important;
                             color: #FFFFFF !important;
                         }
                      &lt;/style&gt;
                      {{ form | payment_button }}
                      {% if section.settings.safe_checkout_image_yes %}
                          &lt;br /&gt;
                          &lt;h4&gt;{{ settings.checkout_popup_guaranteed_caption }}&lt;/h4&gt;
                          &lt;img src="{% if section.settings.safe_checkout_image != blank %}{{ section.settings.safe_checkout_image | img_url:'master' }}{% else %}{{ 'guaranteed.png' | asset_url }}{% endif %}" alt="" class="img-responsive"&gt;
                      {% endif %}
                  {% endif %}
                  {% endif %}
              {% endform %}
          &lt;/div&gt;
  </code></pre>
  
  <p>which uses <code>{% include 'product-options-form' design:'default' %}</code> to display the following code</p>
  
  <pre><code>&lt;div class="product-options id_{{ product.id }} {{ product_options }} {% if product.variants.size == 1 %}product-no-options no-border{% endif %}"&gt;
      &lt;input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}"&gt;
      {% unless product.options.size == 1 and product.options.first == 'Title' %}
      {%- assign index = 0 -%}
      {% for option in product.options %}
          {%- assign option_names = '' -%}
          {%- assign option_title = option | downcase -%}
          {%- assign index = forloop.index0 -%}
          {%- assign selected_value = '' -%}
          {%- assign color_images = '' -%}
          {%- assign color_image = '' -%}
          {% for variant in product.variants %}
              {% if variant == product.selected_or_first_available_variant %}
                  {% assign selected_value = variant.options[index] %}
              {% endif %}
              {%- assign img_url = variant.image.src |  img_url: '1024x1024' -%}
              {%- assign option_names = option_names | append:variant.options[index] | append:'&lt;&gt;' -%}
              {%- assign color_images = color_images | append : img_url  | append:'&lt;&gt;' -%}
              {%- assign check_color_name = '!__!' | append:variant.options[index] | append:'!__!' -%}
              {% unless color_image contains check_color_name %}
              {%- assign color_image = color_image | append:'!__!' | append:variant.options[index] | append:'!__!:' | append:img_url  | append:'&lt;&gt;' -%}
              {% endunless %}
          {% endfor %}
          {%- assign color_images = color_images | split:'&lt;&gt;' | uniq -%}
          {%- assign option_names = option_names | split:'&lt;&gt;' | uniq -%}
          {%- assign color_image = color_image | split:'&lt;&gt;' | uniq -%}
          &lt;div class="product-size  option-{{ option | handle }} {{ product_options }}"&gt;
              &lt;span class="option-label"&gt;{{ option }}:&lt;/span&gt;
              &lt;div class="select-wrapper-sm"&gt;
                  &lt;select class="form-control input-sm size-variants"&gt;
                      {% for name in option_names %}
                          &lt;option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}"&gt;{{ name }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
              &lt;/div&gt;
              {% if product_options == 'swatches' %}
                  &lt;ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}"&gt;
                      {% for name in color_image %}
                          {%- assign title = name | split:':' | first | replace:'!__!','' -%}
                          {%- assign img_src = name | split:':' | last -%}
                          &lt;li  {% if selected_value == title %}class="active"{% endif %}&gt;
                              {% if option_title contains 'color' %}&lt;a href="#" data-tooltip="{{ title }}" data-placement="top" title="{{ title }}" data-value="{{ title | handle | escape }}" data-image="{{ img_src }}"&gt;&lt;span class="value"&gt;&lt;img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""&gt;&lt;/span&gt;&lt;/a&gt;{% else %}&lt;a href="#" data-value='{{ title | handle | downcase | escape }}'&gt;&lt;span class="value"&gt;{{ title | escape }}&lt;/span&gt;&lt;/a&gt;{% endif %}
                          &lt;/li&gt;
                      {% endfor %}
                  &lt;/ul&gt;
              {% endif %}
          &lt;/div&gt;
      {% endfor %}
      {% endunless %}
      &lt;script&gt;
          var product_options_{{ product.id }} = [];
          {%- assign options = product.options -%}
          {% for option in options %}
          {%- assign option_index = forloop.index0 -%}
          {% for variant in product.variants %}
          {%- assign params = variant.options -%}
          product_options_{{ product.id }}{% for name in params %}{% if forloop.index0 &gt; option_index  %}{% continue %}{% endif %}['{{ params[forloop.index0]|handle|strip|downcase}}']{% endfor %}=[];
          {% endfor %}
          {% endfor %}
          {% for variant in product.variants %}
          {%- assign attributes = 'price,compare_at_price,id,image,inventory_quantity,inventory_management,inventory_policy,sku' | split:',' -%}
          {% for attribute in attributes %}
          product_options_{{ product.id }}{% for option in variant.options %}['{{ variant.options[forloop.index0] |handle|strip|downcase }}']{% endfor %}['{{ attribute|downcase }}']='{% if attribute == 'image'%}{% unless variant.image.src contains 'products' %}{{ product.featured_image |  img_url: '1024x1024' }}{% else %}{{ variant.image.src |  img_url: '1024x1024' }}{% endunless %}{% else %}{{ variant[attribute] }}{% endif %}';
          {% endfor %}
          {% endfor %}
      &lt;/script&gt;
      {% if design == 'creative' %}&lt;/div&gt;{% endif %}
  
  {% if design == 'default' %}&lt;/div&gt;{% endif %}
  
  &lt;script&gt;
      {% assign product_id = product.id %}
      product_id = {{ product.id }}
      options_product_id = $('.product-options.id_'+product_id);
      $options_{{ product_id }} = $('.product-options.id_{{ product_id }}');
      $select_{{ product_id }} = $('select',$options_{{ product_id }});
      $ul_{{ product_id }} = $('ul',$options_{{ product_id }});
  
  
      function updateSelectOptionsDisabling_{{ product_id }}(){
          $('option',$select_{{ product_id }}.not(':first')).attr("disabled","disabled");
          for(a in product_options_{{ product_id }}[$select_{{ product_id }}.first().val()]){
              $('option[value='+a+']',$select_{{ product_id }}).removeAttr("disabled","disabled");
              for(b in product_options_{{ product_id }}[$select_{{ product_id }}.first().val()][a]){
                  $('option[value='+b+']',$select_{{ product_id }}).removeAttr("disabled","disabled");
              }
          }
      }
  
      /*function currencyUpdate(){
          Currency.convertAll(shopCurrency, jQuery('.selected-currency').text());
      }*/
  
      function removeAbsentOption_{{ product_id }}($variant,current,$ul,$this_a){
          _this=$this_a;
          $inventory_management = $variant['inventory_management'];
          $inventory_policy = $variant['inventory_policy'];
          $inventory_quantity = $variant['inventory_quantity']
          if (($inventory_management != 'shopify') ||
                  ($inventory_management == 'shopify' &amp;&amp; $inventory_policy == 'continue') ||
                  ($inventory_management == 'shopify' &amp;&amp; $inventory_quantity &gt; 0))
          {
              $('a[data-value=' + current + ']', $ul).parent().removeClass('absent-option');
  
          }
      };
  
      function showAvailableOptions_{{ product_id }}(first_option_only,last_option_only)
      {
  
          first_option_only = typeof first_option_only !== 'undefined' ?  first_option_only : false;
          last_option_only = typeof last_option_only !== 'undefined' ?  last_option_only : false;
          if(first_option_only)
          {
              $a = $('a', $ul_{{ product_id }}.first());
          } else if(last_option_only)
          {
              $('li',$ul_{{ product_id }}.last()).addClass("absent-option");
              $a = $('a', $ul_{{ product_id }}.last());
          } else
          {
              $('li',$ul_{{ product_id }}).addClass("absent-option");
              $a = $('a', $ul_{{ product_id }}.not(':first'));
          }
          $a.each(function () {
              current = $(this).data('value');
              _this = $(this);
              for (size in product_options_{{ product_id }})
              {
                  if(!first_option_only || last_option_only){
                      size=$('li.active a',$ul_{{ product_id }}.first()).data('value');
                  }
                  if($ul_{{ product_id }}.length == 3){
                      flag_ignore_selection = false;
                      for (color in product_options_{{ product_id }}[size])
                      {
                          if(last_option_only){
                              color=$('li.active a',$ul_{{ product_id }}.not(':first').not(':last')).data('value');
                          }
                          for (material in product_options_{{ product_id }}[size][color])
                          {
                              switch (_this.closest('ul').data('index')) {
                                  case 0:
                                      if (product_options_{{ product_id }}[current] != undefined &amp;&amp; product_options_{{ product_id }}[current][color] != undefined &amp;&amp; product_options_{{ product_id }}[current][color][material] != undefined) {
                                          removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[current][color][material],current,$ul_{{ product_id }},_this);
                                      }
                                      break;
                                  case 1:
                                      if (product_options_{{ product_id }}[size] != undefined &amp;&amp; product_options_{{ product_id }}[size][current] != undefined &amp;&amp; product_options_{{ product_id }}[size][current][material] != undefined) {
  
                                          removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[size][current][material],current,$ul_{{ product_id }},_this);
                                      }
                                      break;
                                  case 2:
                                      if (product_options_{{ product_id }}[size] != undefined &amp;&amp; product_options_{{ product_id }}[size][color] != undefined &amp;&amp; product_options_{{ product_id }}[size][color][current] != undefined) {
                                          removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[size][color][current],current,$ul_{{ product_id }},_this);
                                      }
                                      break;
                              }
                          }
                      }
                  }
                  else if($ul_{{ product_id }}.length == 2)
                  {
                      for (color in product_options_{{ product_id }}[size]) {
                          switch (_this.closest('ul').data('index')) {
                              case 0:
                                  if (product_options_{{ product_id }}[current] != undefined &amp;&amp; product_options_{{ product_id }}[current][color] != undefined) {
                                      removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[current][color], current, $ul_{{ product_id }},_this);
                                  }
                                  break;
                              case 1:
                                  if (product_options_{{ product_id }}[size] != undefined &amp;&amp; product_options_{{ product_id }}[size][current] != undefined) {
                                      removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[size][current], current, $ul_{{ product_id }},_this);
                                  }
                                  break;
                          }
                      }
                  }
                  else
                  {
                      if (product_options_{{ product_id }}[current] != undefined) {
                          removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[current],current,$ul_{{ product_id }},_this);
                      }
                  }
              }
          })
      }
  
      function renderSwatches_{{ product_id }}()
      {
          showAvailableOptions_{{ product_id }}(); //2nd and 3rd
          showAvailableOptions_{{ product_id }}(true); //1st only
          $('li.active.absent-option',$ul_{{ product_id }}).each(function(){
              $(this).removeClass('active').siblings().not('.absent-option').first().addClass('active');
          });
          showAvailableOptions_{{ product_id }}(false,true); //1st only
          $('li.active.absent-option',$ul_{{ product_id }}).each(function(){
              $(this).removeClass('active').siblings().not('.absent-option').first().addClass('active');
          });
      }
  
      $(function($) {
          {% unless product_options == 'swatches' %}updateSelectOptionsDisabling_{{ product_id }}();{% endunless %}
          $select_{{ product_id }}.first().addClass('first');
          $ul_{{ product_id }}.first().addClass('first');
          $select_{{ product_id }}.change(function(){
              {% unless product_options == 'swatches' %}updateSelectOptionsDisabling_{{ product_id }}();{% endunless %}
              if($(this).hasClass('first'))
              {
                  for (var first_option_to_select in product_options_{{ product_id }}[$select_{{ product_id }}.first().val()])break;
                  $('option',$select_{{ product_id }}.not(':first')).removeAttr("selected");
                  $('option[value='+first_option_to_select+']',$select_{{ product_id }}.not(':first')).attr("selected","selected");
              }
              updateData('select',product_id,options_product_id);
              Currency.convertAll('{{ shop.currency }}', Currency.cookie.read());
          })
          {% if product_options == 'swatches' %}
  
          $('a',$ul_{{ product_id }}).click(function(e){
              _this = $(this);
              if(!_this.parent().hasClass('absent-option')){
                  if (!_this.parent('li').is('.active')){
                      _this.closest('ul').find('li').removeClass('active');
                      _this.parent('li').addClass('active');
                  }
                  renderSwatches_{{ product_id }}();
                  $this=$('ul.color-list:first &gt; li.active:first &gt; a:first',$options_{{ product_id }});
                  if($this.data('image')){
                      var $image = $('.main-image img',$ul_{{ product_id }});
                      imgSrc = $this.data('image');
                      var newImg = document.createElement("img");
                      newImg.src = imgSrc;
                      newImg.onload = function () {
                          $image.attr('src', imgSrc);
                          $image.attr('data-zoom-image', imgSrc);
                      }
                  }
                  updateData('ul &gt; li.active &gt; a',{{ product_id }},$options_{{ product_id }});
                  Currency.convertAll('{{ shop.currency }}', Currency.cookie.read());
              }
              e.preventDefault();
          })
  
          renderSwatches_{{ product_id }}();
          {% endif %}
      });
  &lt;/script&gt;
  
  
  
  
  {{ 'custom.js' | asset_url | script_tag }}
  
  </code></pre>
  
  <p>Within there I can kinda of see that this code is what displays the variants but I can't figure out how to break up each variant to be able to display them individually. </p>
  
  <pre><code>        &lt;div class="product-size  option-{{ option | handle }} {{ product_options }}"&gt;
              &lt;span class="option-label"&gt;{{ option }}:&lt;/span&gt;
              &lt;div class="select-wrapper-sm"&gt;
                  &lt;select class="form-control input-sm size-variants"&gt;
                      {% for name in option_names %}
                          &lt;option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}"&gt;{{ name }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
              &lt;/div&gt;
              {% if product_options == 'swatches' %}
                  &lt;ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}"&gt;
                      {% for name in color_image %}
                          {%- assign title = name | split:':' | first | replace:'!__!','' -%}
                          {%- assign img_src = name | split:':' | last -%}
                          &lt;li  {% if selected_value == title %}class="active"{% endif %}&gt;
                              {% if option_title contains 'color' %}&lt;a href="#" data-tooltip="{{ title }}" data-placement="top" title="{{ title }}" data-value="{{ title | handle | escape }}" data-image="{{ img_src }}"&gt;&lt;span class="value"&gt;&lt;img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""&gt;&lt;/span&gt;&lt;/a&gt;{% else %}&lt;a href="#" data-value='{{ title | handle | downcase | escape }}'&gt;&lt;span class="value"&gt;{{ title | escape }}&lt;/span&gt;&lt;/a&gt;{% endif %}
                          &lt;/li&gt;
                      {% endfor %}
                  &lt;/ul&gt;
              {% endif %}
          &lt;/div&gt;
  </code></pre>
  
  <p>Any help is appreciated. I'm looking to just brake them up so i can style them individually with tabs. I can manage all the rest by studying more. This has just stumped me.</p>
  
  <p>I was able to find this code which outputs what I need but I can't seem to make them clickable to make them an option</p>
  
  <pre><code>{% for option in product.options %}
  {% if option == 'Size' %}
  
   {% assign index = forloop.index0 %}
   {% assign sizelist = '' %}
   {% assign size = '' %}
  
   {% for variant in product.variants %}
  
      {% capture size %}
      {{ variant.options[index] }}
      {% endcapture %}
  
      {% unless sizelist contains size %}
  
         &lt;span&gt;{{ size }}&lt;/span&gt;
  
         {% capture tempList %}
            {{sizelist | append: size | append: ' '}}
         {% endcapture %}
            {% assign sizelist = tempList %}
         {% endunless %}
  
  {% endfor %}
  {% endif %}
  {% endfor %}
  </code></pre>