Add a different css to an image when it is clicked (on custom color swatches)

[MichalNicolas]

Hi guys, I'm trying to create a custom 'color swatches' using metafields (list of products)

I already worked on the html and css code for most of it, but I want to add a different css to the image that has been clicked on while the customer is on its product page. Here's the code that I have so far, I'm doing it in a "custom liquid block" on the product page template of my Theme (Pipeline):

HTML:

<div class="color-swatches-wrapper">
{% assign color_swatches = product.metafields.custom.color_swatches.value %}

{% if color_swatches %}
<p class="color-swatches-heading">Color</p>
<div class = "color-swatches-list">
{% for color_swatch in color_swatches %}
<a href = "{{shop.url | append: "/products/" | append: color_swatch.handle }}">
<div class ="color-swatch-t8">
<div class ="color-swatch-image">
<img class="t8_product_color" src={{color_swatch.featured_image | image_url: width: 100 | image_tag }}
</div>
</div>
</a>
{% endfor %}
</div>
{% endif %}
</div>

CSS:

<style>

.color-swatches-wrapper {
}

.color-swatches-list {
display: flex;
gap: 2%;
padding-bottom: 20px;
}
.color-swatch-t8 {
display: inline-block;
cursor: pointer;
position: relative;
overflow: hidden;
width: 45px;
}

.color-swatches-heading {
color: #e9e9e9;
font-weight: bold;
padding-bottom: 10px;
}

.color-swatch-image {
border: 1px solid #e9e9e9;
}

.color-swatch-image:hover {
border: 1px solid #272727;
background: #272727;
opacity: 0.4;
}

</style>

Here's the result so far:

As I am on the "Black" option of the product, I want the black swatch to have a different border.

Hope someone can help me.

Thanks.

[EBOOST]

Hi @MichalNicolas ,

May I suggest code below:

<div class="color-swatches-wrapper">
	{% assign color_swatches = product.metafields.custom.color_swatches.value %}

	{% if color_swatches %}
		<p class="color-swatches-heading">Color</p>
		<div class = "color-swatches-list">
			{% for color_swatch in color_swatches %}
				<a class="{% if color_swatch.handle == product.handle %} active-color {% endif %}" href = "{{shop.url | append: "/products/" | append: color_swatch.handle }}">
					<div class ="color-swatch-t8">
						<div class ="color-swatch-image">
							<img class="t8_product_color" src={{color_swatch.featured_image | image_url: width: 100 | image_tag }} />
						</div>
					</div>
				</a>
			{% endfor %}
		</div>
	{% endif %}
</div>
<style>

.color-swatches-wrapper{
}

.color-swatches-list {
	display: flex;
	gap: 2%;
	padding-bottom: 20px;
}
.color-swatch-t8 {
	display: inline-block;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 45px;
}

.color-swatches-heading {
	color: #e9e9e9;
	font-weight: bold;
	padding-bottom: 10px;
}

.color-swatch-image {
	border: 1px solid #e9e9e9;
}
.color-swatches-wrapper .color-swatches-list a.active-color  .color-swatch-image,
.color-swatch-image:hover {
	border: 1px solid #272727;
	background: #272727;
	opacity: 0.4;
}

</style>