Hi,
I’m using impulse theme, I wanted to use variants image as swatches. I want variant images to automatically come instead of colors.
Thank you in advance.
2 Likes
You can refer to the following URL.
Hope this helps.
Thanks!
Thank you for your response.
But this is not what I’m looking for it’s the manual way. I want the complete variant image as a swatch image.
Here is my variant-button.liquid code.
{%- assign swatch_file_extension = ‘png’ -%}
{%- assign is_color = false -%}
{%- assign color_swatch_drop = option_drop -%}
{%- assign color_option_index = 0 -%}
{%- if settings.product_color_swatches -%}
{%- for option in product.options_with_values -%}
{%- if option == color_swatch_drop -%}
{%- assign color_option_index = forloop.index0 -%}
{%- assign downcased_option = color_swatch_drop.name | downcase -%}
{%- if downcased_option contains ‘color’ or downcased_option contains ‘colour’ -%}
{%- assign is_color = true -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{{ option.name }}
{%- if is_color -%}
—
{{ option.selected_value }}
{%- endif -%}
{%- assign option_index = forloop.index -%}
{%- for value in option.values -%}
{%- assign product_available = true -%}
{%- if product.options.size == 1 -%}
{%- assign product_available = product.variants[forloop.index0].available -%}
{%- endif -%}
{%- if is_color -%}
{%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
{%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
{{ value | escape }}
{%- else -%}
{{ value | escape }}
{%- endif -%}
{%- endfor -%}
1 Like
Did you ever find a solution for this?
@kristen9145 For any “Color” or “Colour” option make swatch image files that match the variant option name
https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches
It would be an advanced customization to do it automatically using the variant images you’ve already added to the product admin and to do with any option name besides “Color” or “Colour”.
Contact me if you need this advanced customization work, provide topic url and store url to paull.newton+shopifyforums@gmail.com