How to add pictures on products variants option

How to add pictures on products variants option

Marketing1KC
Excursionist
27 0 2

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

 

Marketing1KC_0-1718288744895.png

 

Replies 6 (6)

ProtoMan44
Shopify Partner
489 42 79

@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>
- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
Marketing1KC
Excursionist
27 0 2

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

ProtoMan44
Shopify Partner
489 42 79

@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/

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
Marketing1KC
Excursionist
27 0 2

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

SealSubs-Roan
Explorer
484 32 41

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 ListingsKing Product Options & VariantVariant Option Product Options, and Globo Product Options.

Roan
Please let me know if it works by marking it as a solution!
Seal Subscriptions App, a subscription app for Shopify, with glowing user testimonials and a free plan.
Marketing1KC
Excursionist
27 0 2

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