How to add pictures on products variants option

[Marketing1KC]

Hi everyone, need your help, anyone knows how I can add images on the product variants option like the picture below: Hub/Drum options: pictures with text below on the options

[ProtoMan44]

@Marketing1KC thanks for posting here, can you please tell us which theme are you using for store.

bye the way it is a code sample if you understand.

<!-- Product form -->
<form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-form">
  <!-- Other product form fields -->

  <div class="product-variants">
    {% for option in product.options_with_values %}
      <div class="variant-option">
        <label>{{ option.name }}</label>
        <div class="variant-values">
          {% for value in option.values %}
            {% assign variant = product.variants | where: 'option' | first %}
            <div class="variant-value" data-variant-id="{{ variant.id }}">
              {% if variant.featured_image %}
                <img src="{{ variant.featured_image.src | img_url: 'small' }}" alt="{{ value }}">
              {% endif %}
              <span>{{ value }}</span>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>

  <!-- Add to cart button -->
  <button type="submit">Add to Cart</button>
</form>

[Marketing1KC]

Hi there, thanks for sharing the code our them is dawn

[ProtoMan44]

@Marketing1KC  If you are using dawn theme this link is for you.
if you find the solution so please mark it as solved. thanks 
https://www.youtube.com/watch?v=lacCldZ_iHU


https://websensepro.com/blog/how-to-show-selected-variant-images-dawn-13-0-0/

[Marketing1KC]

Thank you, also let me know where should this code be added, what liquid? thanks

[SealSubs-Roan]

Hi @Marketing1KC !

This is most likely due to theme coding or application. For this feature, you will need to edit out your theme code or for easier route, install an application that offers this feature. You can try these variant applications where you can customize your variants options and see what works best for you: Swatch King: Combined Listings, King Product Options & Variant, Variant Option Product Options, and Globo Product Options.

[Marketing1KC]

hi there, thank you for your message, will try checking those. 

[Easify-Mark]

Hi @Marketing1KC,

The Easify Product Options app makes it easy to create options with images and text (names) displayed below using the Image Swatch option type. If you’d like to add prices for each option, you can link them to your existing products 🤗.