Help with Product Page Swatch Order

IsaacShearer
New Member
5 0 0

I cant figure out how to re-order my swatches and create only the color into a dropdown select list.

I want to simply move the colors choice under the size choice, and make it a drop-down select list.

Any help is greatly appreciated!

Here is my Swatch.Liquid

{% assign option_name = option.name | downcase %}

{% assign color_swatch_options = "color, colour" | split: ", " %}

{% assign current_option = "option" | append: option.position %}

{% assign other_options = "option1 option2 option3" | remove: current_option | strip | split: " " %}

<div class="swatch clearfix" data-option-index="{{ option.position }}" data-other-options='{{ other_options | json }}'>
        {% if color_swatch_options contains option_name %}
    {% for tag in product.tags %}
  {% if tag contains 'colors' %}
  <h5>Color</h5>
   {% endif %}
  {% endfor %}
     
    {% else %}
      <h5>{{ option.name }}</h5>
    {% endif %}

  

  

  
  {% for value in option.values %}
    {% assign image_url = value | handle | append: '.png' | asset_url %}

    {% assign css_color = value | split: ' ' | last | handle %}

    {% capture id %}swatch-{{ option.position }}-{{ value | handle }}{% endcapture %}

    {% assign available = false %}

    {% for variant in product.variants %}
      {% unless variant.available %}
        {% continue %}
      {% endunless %}

      {% unless variant[current_option] == value %}
        {% continue %}
      {% endunless %}

      {% unless variant[other_options[0]] == current_variant[other_options[0]] %}
        {% continue %}
      {% endunless %}

      {% unless variant[other_options[1]] == current_variant[other_options[1]] %}
        {% continue %}
      {% endunless %}

      {% assign available = true %}
    {% endfor %}

    {% assign checked = "" %}

    {% if current_variant[current_option] == value %}
      {% assign checked = 'checked="checked"' %}
    {% endif %}

    {% capture radio_button %}
      <input type="radio" id="{{ id }}" name="{{ option_name }}" value="{{ value }}" data-position="{{ option.position }}" {{ checked }} />
    {% endcapture %}

    {% capture sold_out_image %}
      <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
    {% endcapture %}
  
    {% capture regular_swatch %}
      <div class="swatch-element {% unless available %}soldout{% endunless %}">
        {{ radio_button }}

        <label for="{{ id }}">
          {{ value }}
          {{ sold_out_image }}
        </label>
      </div>
    {% endcapture %}
  

   <!---------- REGULAR SWATCH ------------->
  
    {% capture regular_swatch %}
  
  <div  class="{% unless available %}soldout{% endunless %}" style="">
    {{ radio_button }}
    
        <label for="{{ id }}" style=" max-height: 50px !important;
    height: 50px !important;">
          {{ value }}
          {% unless available %} {{ sold_out_image }}{% endunless %}
         
        </label>
  </div>

    {% endcapture %}


  <!---------- COLOR SWATCH ------------->
  {% for tag in product.tags %}
  {% if tag contains 'colors' %}
    {% capture color_swatch %}

      <div class="swatch-element color {% unless available %}soldout{% endunless %}">
        <div class="tooltip">
          {{ value }}
        </div>

        {{ radio_button }}
        
        

        <label for="{{ id }}" style="background-color: {{ css_color }}; background-image: url({{ image_url }}) ">
          {{ sold_out_image }}
        </label>
      </div>
  
  
    {% endcapture %}

  
  {% endif %}
    {% endfor %}
    {% if color_swatch_options contains option_name %}
      {{ color_swatch }}
    {% else %}
      {{ regular_swatch }}
    {% endif %}
  {% endfor %}
</div>





 

0 Likes
Dylan_Hunt
Excursionist
32 0 7

Hey, this would not actually be in the swatch.liquid. It would be in the product-template or product-form where you put the code to turn items into swatches. I presume this was the guide you worked from:

https://help.shopify.com/en/themes/customization/products/features/add-color-swatches

So you'd change the for option in product.options code to {% include swatch with 'color' %} and it would only happen for the color.

Then you'd change the order of the options in the product itself

0 Likes