I want use variant first image as color swatch (impulse theme)

Technical Q&A
1

Hello?

I want to use the variant first image as a color swatch (impulse theme).

So I found code section in product-grid-item.liquid

I think it will be changed when that code can modify.

Please advise me.

Thank you

<a
href=“{{ variant.url | within: collection }}”
class=“color-swatch color-swatch–small color-swatch–{{ value | handle }}{% if variant.image %} color-swatch–with-image{% endif %}”
{% if variant.image %}
data-variant-id=“{{ variant.id }}”
data-variant-image=“{{ variant.image | img_url: ‘400x’ }}”

{% endif %}

aria-label=“{{ product.title }} - {{ value }}”
style=“background-color: {{ color_swatch_fallback }};{% if images[color_file_name] != blank %} background-image: url({{ color_image }});{% endif %}”>
{{ value }}

2

I honestly am not sure, as this isn’t a theme I’ve worked with, but it looks like you should be able to do something like this:

This basically assigns the color_image to be equal to the variant image, and then includes that image as a background-image if it exists.

Note, this is hard-coded, and will apply to EVERY PRODUCT WITH A VARIANT IMAGE. This is likely why the theme doesn’t have this option in the first place. But it may work well for you!


{{ value }}
3

Wow, You are great!!! It works well. Thank you so much.

4

EDIT FIXED

How to assign for other variants? Like if the variant’s name is style instead of color how to assign variant image to it? The same code is not working for variants with other names ( same theme) EDIT FIXED