A color swatch selector for a shopify store. With poor styling. You can add this to a store then use tags and product type to make it work.

color_swatch_for_shopify_store.js

 {% for variant in product.variants %}
  <div class="">
    {% for color_option in product.options_by_name['Color'].values %}
      {% assign productColor = color_option %}
    {% endfor %}
  </div>
    {% for x in product.tags  %}
  {% if x != productColor %}
        	{% assign currentProductTags = x %}
  {% endif %}
  {% endfor %}
	{% assign productType = product.type %} 
  {% endfor %}
  <ul id="ulParent"style="padding: 0px; margin: 0px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; list-style: none; padding: 10px 15px 10px 15px;" class="">
    {% for p in collections.all.products %}
      {% if p.tags contains currentProductTags %}
        {% if p.type contains productType %}
        <li value="{{ p.url }}" style="" id="productSelectorLI" data-url="{{p.url}}" data-color="{{ p.options_by_name['Color'].values}}">
          <a href="{{ p.url }}"
            value="{{ p.url }}" id="productSelectorA" style="cursor: pointer;">
            {% for image in p.images %}
            {% assign pos = p.featured_image %}
            {% endfor %}
            {% if p.available %}
            <img src="{{ pos | product_img_url: 'medium' }}">
            {% else %}
            <img src="{{ pos | product_img_url: 'medium' }}">
            {% endif %}
          </a>
        </li>
        {% endif %}
    {% endif %}
    {% endfor %}
  </ul>
</div>
<script>
const loadBoarderOnColorSelector = () => {
  let ulParent = document.querySelector('#ulParent').children
  let windowLocation = window.location.pathname.split("/").pop()
  windowLocation = `/products/${windowLocation}`
  let holdArray = [];
  console.log(windowLocation, holdArray)
    for(let i in ulParent) {
      holdArray.push(ulParent[i].dataset.url)
   	let indexedWindowLocation = holdArray.indexOf(windowLocation)
      if(indexedWindowLocation >= 0) {
          ulParent[indexedWindowLocation].style.border = "1px solid #000";
      }
    }  
}

loadBoarderOnColorSelector()
</script>