How can I display product variants as images in Craft or Dawn themes?

[Waremart]

Hi, using the craft or dawn themes, the variants show as text, not as images as they appear on the supplier's website. I want them to show as images. I found a solution on the help center, with a code that needs to be added, however it did not work for either Dawn or Craft Shopify themes. 

Below images to further explain the issue.

Please help, thank you.

[PageFly-Victor]

Hi @Waremart

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

you can follow the instructions below. in main-product.liquid file, press ctrl+ f then type "fieldset"

you will see the line lable. then you copy my code to enter

 <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" style="padding:0;border-radius:0">

        {% for variant in product.variants %}

              {% if variant.title == value %}

                     {% if variant.image.src %}

                           <img src="{{ variant.image.src | image_url:width:60 }}"/>

                      {% else %}

                     {{value  }}

                {% endif %}

           {% else %}

    {% endif %}  

 {% endfor %}

</label>

result: 

Hope my solution works perfectly for you!

Best Regards;

PageFly

[Waremart]

Thank you so much, I tried entering the code, however I have no coding background at all, I kept getting errors.

Attached is the existing code, can you please insert it here so I can replace it all into my code file. 

Would really appreciate your help and time

[Waremart]

Hi, using the craft or dawn themes, the variants show as text, not as images as they appear on the supplier's website. I want them to show as images. I found a solution on the help center, with a code that needs to be added, however it did not work for either Dawn or Craft Shopify themes. 

Below images to further explain the issue.

Please help, thank you.

[PageFly-Victor]

Sorry, reply late. you can add a file 

[Waremart]

Hello, after copying the code, here's how the variants show, color isn't showing, and I need the size and length variants to stay as texts.

Although, in the product page, every variant is linked to a picture

[PageFly-Victor]

if you can give me access I will fix it quickly for you

[Waremart]

How can I give you access privately?