Display a variant image when hovering over a color swatch

Display a variant image when hovering over a color swatch

MaxCosta
Shopify Partner
268 2 62

Hello to the whole community!

 

We're redesigning our online site with the Flex theme www.denaive.com

 

The Flex theme allows you to display color swatches on the collections pages, and also on the "featured collection" sections.

 

However, we need to ensure that on the desktop, when a color swatch is hovered over, the image of the product with the associated color is displayed.

 

This would only be on desktop, and I want it to be integrated on the collections pages, but also on the "Featured collection" sections.

 

Does anyone know how this could be done?

 

Thanks in advance!
Best regards,
Max COTA

Replies 8 (8)

SomeUsernameHe
Shopify Partner
519 58 111

This can absolutely be done. Unfortunately, we would need to see your main-product.liquid file or if you have a swatch.liquid snippet. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
MaxCosta
Shopify Partner
268 2 62

Would you like me to copy and paste the contents of the file here? Or if I give you access to the theme, could you help me?

Thanks in advance!

SomeUsernameHe
Shopify Partner
519 58 111

Maybe you can save the file to .txt document and upload it as an attachment? 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
MaxCosta
Shopify Partner
268 2 62

Unfortunately, txt format is not accepted on this forum. But here is the code extract of the product-thumbnail__swatch.liquid file

 

 

 

 

{% if settings.collection_swatches %}
{% assign file_extension = 'png' %}

{% for option in product.options_with_values %}
{% assign swatch_trigger = settings.swatch_trigger | strip | downcase %}
{% assign option_name = option.name | downcase %}

{% if option_name contains "o" %}
Couleur :
{% assign option_index = forloop.index0 %}
{% assign values = '' %}
<div class="thumbnail-swatch swatch is-justify-{{ settings.thumbnail_text_alignment }} is-flex-wrap" style="padding: 5px 0;">

{% for variant in product.variants %}

{% if variant.inventory_quantity > 0 %}

{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}

 

{% assign swatch_file_url = variant.image | img_url: 'small' %}
<div class="swatch__option">

<a href="{{ variant.url | within: collection }}" style="border: none;" class="swatch-element swatch__style--{{ settings.collection_swatches_shape }}" data-swatch-name="meta-{{ option_name }}_{{ value | replace: ' ', '_' | downcase }}">
<span {% if section.settings.products_per_row == '2'%}
data-image="{{ variant.featured_image | img_url: '600x' }}"
{% elsif section.settings.products_per_row == '3' %}
data-image="{{ variant.featured_image | img_url: '500x' }}"
{% else %}
data-image="{{ variant.featured_image | img_url: '400x' }}"
{% endif %}



style="
background-image: url('https://cdn.shopify.com/s/files/1/0554/8054/9543/files/{{ value | split: ' ' | last | handle }}.png') !important;
">
{% assign image_name = value | handle | append: '.' | append: file_extension %}
{% assign swatch = images[image_name] %}

<img class="swatch__image {% if swatch == empty %}swatch__image--empty{% endif %}" src='https://cdn.shopify.com/s/files/1/0554/8054/9543/files/{{ value | split: ' ' | last | handle }}.png' alt="{{ variant.title }}">
</span>
</a>
</div>

{% endunless %}
{% endif %}
{% endfor %}

</div>
{% endif %}
{% endfor %}
{% endif %}




 

 

Do you think you can help me with that? If necessary, I also have the contents of the product__main.liquid file.

Thank you very much in advance for your help.

SomeUsernameHe
Shopify Partner
519 58 111

That I can work with! I am on my way to work and when I get in I will go ahead and see what I can do.

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
MaxCosta
Shopify Partner
268 2 62

Thank you so much!

SomeUsernameHe
Shopify Partner
519 58 111

I cannot test it, but you can try something like this:

{% if settings.collection_swatches %}
{% assign file_extension = 'png' %}

{% for option in product.options_with_values %}
{% assign swatch_trigger = settings.swatch_trigger | strip | downcase %}
{% assign option_name = option.name | downcase %}

{% if option_name contains "o" %}
Couleur :
{% assign option_index = forloop.index0 %}
{% assign values = '' %}
<div class="thumbnail-swatch swatch is-justify-{{ settings.thumbnail_text_alignment }} is-flex-wrap" style="padding: 5px 0;">

{% for variant in product.variants %}

{% if variant.inventory_quantity > 0 %}

{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}

<div class="swatch__option">
<a href="{{ variant.url | within: collection }}" style="border: none;" class="swatch-element swatch__style--{{ settings.collection_swatches_shape }}"
onmouseover="updateMainImage('{{ variant.featured_image | img_url: 'master' }}')">
<span style="background-image: url('{{ 'https://cdn.shopify.com/s/files/1/0554/8054/9543/files/' | append: value | split: ' ' | last | handle | append: '.' | append: file_extension }}') !important;"></span>
</a>
</div>

{% endunless %}
{% endif %}
{% endfor %}

</div>
{% endif %}
{% endfor %}
{% endif %}


And a little javascript to finish it off:

function updateMainImage(imageUrl) {
    var mainImage = document.getElementById('main-product-image'); // Replace with the correct ID or selector for your main image
    if (mainImage) {
        mainImage.src=imageUrl;
    }
}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
MaxCosta
Shopify Partner
268 2 62

Thank you very much for your time. However, when I edit the file with your elements, this is how it looks in the front office:

 

MaxCosta_0-1706784586470.png

 

Do you have any idea where the problem might be coming from? I put your javascript extract after the first code you sent me,

Thanks in advance