Product swatches using metafields and metaobjects

readme.txt

## To show swatches on products (PLP and/or PDP) that do not have colour variants but link to separate products (Example: Saltrock)

1. Create a related products product metafield called 'product.metafields.custom.product_swatch_related_products' - (type: list of products). This is where you add related swatch products.

2. Create a 'swatches' metaobject, with 3 fields:

- swatch.colour
- swatch.label
- swatch.image

3. Create a 'product.metafields.custom.colour_swatches' product metafield that references the swatches metaobject above.

product-swatches-metafields.liquid

{% comment %}{% render 'product-swatches-metafields', product: product %}{% endcomment %}

{% assign current_product_handle = product.handle %}

{% for product in product.metafields.custom.product_swatch_related_products.value %}
    {% assign related_product_handle = product.handle %}
{% endfor %}

<div class="product-swatches__outer">
    {% for swatch in product.metafields.custom.colour_swatches.value %}
        {% assign colour = swatch.colour %}
        {% assign colour_name = swatch.label | handleize %}
        {% if swatch.image %}
            {% assign swatch_image = swatch.image | image_url %}
        {% else %}
            {% assign swatch_image = '' %}
        {% endif %}
        {% assign label = swatch.label %}
        {% if current_product_handle contains colour_name %}
            {% assign product_url = current_product_handle %}
            {% assign is_active = 'is-active' %}
        {% else %}
            {% assign product_url = related_product_handle %}
            {% assign is_active = '' %}
        {% endif %}

        <a href="{{ routes.root_url | append: 'products' }}/{{ product_url }}">
            <div class="product-swatches__swatch {{ is_active }}" style="background-color: {{ colour }}; {% if swatch_image != '' %}background-image: url('{{ swatch_image }}');{% endif %}" data-tooltip="{{ label | capitalize }}">
            </div>
        </a>
    {% endfor %}
</div>

styles.scss

/* swatches on PDP */

.product__info-wrapper .product-swatches__outer{
  margin: 2rem 0
}

.product__info-wrapper .product-swatches__swatch.is-active {
  border: 1px solid #000;
}

/* global swatches */

.product-swatches__outer {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0
}

.product-swatches__swatch {
  position: relative;
  border: 1px solid #efefef;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.product-swatches__swatch:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(33, 33, 33, 2.8);
  color: #fff;
  padding: 1px 5px;
  margin-bottom: 1px;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
}