Combined Listings - Additional Product Page Content - Image colour change

[Ali_parr]

We're using Metaobjects and Metafields to populate additional content sections on our product page templates.

Our Throws will be set up as individual product variants, but when a customer clicks through, they'll land on a combined listing that shows all available colourways.

The challenge I’m facing is that on these combined listing pages, the additional content blocks need to update based on the selected variant.

For example, different colourways may have slightly different content.

Is it possible to use Metaobjects or Metafields in a way that allows this content to change dynamically depending on the variant selected on 1 singular template and if so, how?

On a combined listing product, is it possible to have metaobjects and fields that adjust depending on what variant is selected?

[ProtoMan44]

@Ali_parr, hey, thanks for posting here.

Yes, this can be done with the help of JavaScript, but for that, we need to attach the metaobject to the variant and get the value based on the variant. Then we’ll need to update it using AJAX when the variant changes. This can take quite a bit of time, so it's not possible to explain everything in a single comment.

[Small_Task_Help]

Hi,

Hope this will help.

- You can use Metafields or Metaobjects to store special content for each color and with right setup, page will magically switch content when the user picks a different color (variant).

Add JavaScript to Change Content When Variant Changes

JavaScript example

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const variantSelector = document.querySelector('select[name="id"]');

    variantSelector.addEventListener("change", function () {
      const selectedVariantId = this.value;

      fetch(`/variants/${selectedVariantId}?section_id=product-template`)
        .then((response) => response.text())
        .then((html) => {
          const doc = new DOMParser().parseFromString(html, "text/html");
          const newContent = doc.querySelector("#variant-content");
          document.querySelector("#variant-content").innerHTML = newContent.innerHTML;
        });
    });
  });
</script>

[lixonic]

To properly load Metafield content based on selected variant , you need to 

 - add a dedicated variant-content.liquid section

-  metaobject references per variant

- liquid to render the content block properly

 - use js that works with selectors Integrate with variant-change handling , check @Small_Task_Help   code

 - add loading/error states for UX

[namphan]

Hi @Ali_parr,

This is possible. Is the content you want to change in a section or block of the main product?

Please send the website link, I will check it for you

[PaulNewton]

@Ali_parr You'd need a custom section that uses product.selected_variant property to get that variant and it's custom content, or map it to the relevant product level custom content. Or also have to work in tandem with frontend javascript.

A DIY workaround, or kludge,  may be to use the metaobject webpages feature then pull in the relevant metaobject-webpage url with an iframe; with a requires a template setup with no layout.

So it's an advanced theme customization any way you shake it as the combined listings app isn't built with this in mind.

If you need this customization then contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.