Shopify themes, liquid, logos, and UX
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
This can absolutely be done. Unfortunately, we would need to see your main-product.liquid file or if you have a swatch.liquid snippet.
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!
Maybe you can save the file to .txt document and upload it as an attachment?
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.
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.
Thank you so much!
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;
}
}
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:
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
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025