Display Variant Metafield - List of Multiple Files (Images) on Product Page

[catWT]

Hi there, I am looking to display Product Variant Images on my Product Page, I have tried various ways to do this and thought using metafields would be the best way, however I am struggling to figure out how to implement this variant image metafield.

I am using the most recent Dawn Theme (v. 11). I have set up a Variant Metafield to include a list of multiple files (images). I would like to display these on the product page and update the images whenever a different variant swatch is selected. I understand I will need to add javascript. I am comfortable updating the code myself. I have found solutions for product metafields and variant text metafields but none for variant images.

For reference my metafield is: variant.metafields.custom.variation_img

Please help :')

PS - not interested in using an app, cheers

[catWT · Accepted solution]

For anyone else who has this issue, I ended up figuring it out for myself! The code I used is just a compilation of various code snippets I found around this forum, combined through a lot of trial and error! It is still a work in progress as I can't figure how to add styles to it through CSS to centre align it, so if anyone has any suggestions let me know 🙂

I entered the below code in a custom liquid block in my theme customisation. Replace the values in " [ ] " with your own.

{% for variant in product.variants %}
{%- if product.selected_or_first_available_variant.id == variant.id and variant.metafields.[your metafield key] != blank -%}
{% assign file = variant.metafields.[your metafield key].value %}
{% for image in variant.metafields.[your metafield key].value %}

<img 
src="{{ image | img_url: '[you can enter pixel size here]' }}"
/>

{% endfor %}
{%- endif -%}
{% endfor %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    // Get the initial URL
    var current_url = window.location.href;
    
    // Check for URL changes
    setInterval(function() {
      var new_url = window.location.href;
      if (new_url != current_url) {
        // URL has changed, refresh the page
        location.reload();
      }
    }, 1000);
  });
</script>

[catWT]

Also if you have only one image you want updated when a new variation is selected, instead of multiple files, the below code works

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<img src="{{ variant.metafields.[your metafield key].value | img_url: 'master' }} " />
// 'master' will display it as the max size, you can change it to whatever pixel size you want eg '480x'
{% endif %}
{% endfor %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    // Get the initial URL
    var current_url = window.location.href;
    
    // Check for URL changes
    setInterval(function() {
      var new_url = window.location.href;
      if (new_url != current_url) {
        // URL has changed, refresh the page
        location.reload();
      }
    }, 1000);
  });
</script>

[PaulNewton]

Hi @catWT good work here thanks for sharing with the community for any future merchants struggling to DIY this feature without an app.

Here's some notes to go further to enhance the feature:

Eventing, Latest versions of dawn uses a pubsub architecture to subscribe to events: 

variantChangesubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
 console.log(event);
 console.log(event.data.variant);
});

The available events are in constants.js; cartUpdate , quantityUpdate , variantChange , cartError 

https://github.com/Shopify/dawn/blob/main/assets/constants.js#L3 

Reloads, try to avoid page reloads for just images, look into the section rendering api to pull in parts of a page https://shopify.dev/api/section-rendering . That can be used with vanilla javascript so your not loading yet another javascript library for one subfeature.

A catch for images though is if a gallery/slidehow is involved it may need to be reinitialized or have the images programmatically added to it.

Common conventional approaches, Look at the methods that use images alt-text to associate any product image to variants.

If you sanely name images and alt-text then it's also a benefit to the sites accessibility and SEO.

Same process if using metafields on variants, instead of images in the product.media ; or if instead of alt-text you use data attributes.

Look at the Impact theme even in trial mode you can go over their docs to understand such a system. Example  https://homelero.com/products/fawna ; note this is an advanced implementation that was customized to work with more than 1 option.

The general idea is just built a filter to toggle hiding images not related to the currently selected variant, and unhiding images that are related or not related to other variants (i.e. product featured image) . Either applying a css class, or using the hidden , aria-hidden attributes

Good Hunting.

[merakilivling96]

will it work on new version of dawn 15.2.0

i have two types of variants... i'm not able to put specific images for specific variants... 

can any one sort this problem?