How can I display variant metafields for specific product variants only?

Technical Q&A
,

Topic summary

A developer working with Shopify’s Dawn 11 theme is struggling to display variant-specific metafields (variant.metafields.custom.variant_data_1) below the product price, with the metafield only appearing for variants that have data.

Attempted Solution:

  • Added code in main-product.liquid to capture variant metafield data and display it conditionally
  • Created a JavaScript function extraVariantInfo() to show/hide metafield content based on selected variant
  • Injected an updateMeta() method in the global.js file within the onVariantChange() function

Current Problem:
The implementation displays metafield data for all 4 variants instead of only the specific variant being viewed. A warning appears: “Unknown ‘meta_data_1’ object used” on the line declaring const metaData.

Status:
The issue remains unresolved. The developer has tested adding text to one variant, which displays on the product page below the price, but the variant-specific filtering is not working correctly. They express frustration and request community assistance.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

We are using Dawn 11. The issue sounds pretty simple, but it’s not. There is no easy way to display the variant metafields. Tried a lot of forum recommendations, but it didn’t work.

Please please, I need your help.

Our variant metafield definition is variant.metafields.custom.variant_data_1. We want to display it below the price, so in the main-product.liquid file below the {% when ‘price’ %} code block, I injected this:

<!-- This is for the variant metafields -->
            <div class="hideAll">
                <p><span>Extra Info 1: </span><span class="variant_data_1"></span></p>
            </div>

            {% capture 'meta_data_1' %}
                {% for variant in product.variants %}
                    {{variant.id}}:{{ variant.metafields.custom.variant_data_1 | json }}
                    {% unless forloop.last %},{% endunless %}
               {% endfor %}
            {% endcapture %}

            <script>
              const currentVariantId = {{ product.selected_or_first_available_variant.id }};
              const metaData = { {{ meta_data_1 }} };
              const extraVariantInfo = (id) => {
              let selector = document.querySelector('.variant_data_1');
              let hide = document.querySelector('.hideAll')
                if (metaData[id]) {
                 hide.style.display = 'block'
                 selector.innerHTML = metaData[id];
                }
                else
                 hide.style.display = 'none'
              }
              extraVariantInfo(currentVariantId);
            
            </script>

However, on this line const metaData = { {{ meta_data_1 }} }; I got a warning saying: 'Unknown object ‘meta_data_1’ used. I ignored that and proceeded. Inside global.js file, I injected this method this.updateMeta(); below the onVariantChange() inside the else block.

onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();
    this.updateVariantStatuses();

    if (!this.currentVariant) {
      this.toggleAddButton(true, '', true);
      this.setUnavailable();
    } else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
      **this.updateMeta();**
    }
  }

And further down, I injected this updateMeta code below the other update methods:

updateMeta() {
extraVariantInfo(this.currentVariant.id);
}

updateMasterId() {
    this.currentVariant = this.getVariantData().find((variant) => {
      return !variant.options
        .map((option, index) => {
          return this.options[index] === option;
        })
        .includes(false);
    });
  }

  <strong>updateMeta() {
	  extraVariantInfo(this.currentVariant.id);
  }</strong>

Now, I tested adding texts on one variant. It was displayed on the product page below the price, but it was displayed on all 4 variants instead of only the specific variant I tested. This is so frustrating. Please help.

Thanks and take care

2

This community is useless.