Solved

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

catWT
Tourist
5 2 2

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

Accepted Solution (1)

catWT
Tourist
5 2 2

This is an 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>

 

View solution in original post

Replies 3 (3)

catWT
Tourist
5 2 2

This is an 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
Tourist
5 2 2

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
Shopify Partner
6339 578 1343

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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org