Change variants pill to Image instead of button

[Dee437]

Hi,

How can I replace the product variants (of the style variant only) to an image instead of a button like this website below:

• This is a product example on my site: https://mymindfulgifts.com/products/personalized-1-year-anniversary-gift-for-him-for-her-custom-couple-canvas-print-12-months-of-love-cav00013

• And I believe this is the code of that block:

{%- when 'variant_picker' -%}
              {%- unless product.has_only_default_variant -%}
                {%- if block.settings.picker_type == 'button' -%}
                  
                {%- else -%}
                  
                {%- endif -%}
              {%- endunless -%}

Please help!

[nadinethery]

Hi there!

Yes, it seems that this is the snippet regarding the variants. The format of each options is contained inside the tag. I don’t know where you enter your options in your theme, but you should be able to also upload the images you want there as well.

Once you have that solved, you need to recreate the “label” with the format you want through CSS.

[Dee437]

Hi, thank you for answering!

Can you please make it step by step. Note that I don’t want to change the product variants image, not the product image, just the variant button!