Newly created product metafields not showing up.

[Lyrad]

Hey guys, 

I've been stuck on this for awhile and I can't seem to figure out how to fix this. 

Context: Users will do the quiz, and their answers will be saved on localstorage and redirected to the recommendations page. After which, they will pull data from the quiz to show the answers or descriptions.
I am trying to fetch product metafields to display. Some of the previous product metafields that I've created are showing up fine, but I have 3 newly created metafields called Why we recommend (custom.why_we_recommend), our product(custom.our_product), and clinical studies(custom.clinical_studies). They appear fine backend on the shopify product tab which i could edit the content, but it's not fetching the data onto the recommendations page. 

// fetch data
      // Parse benefits summary as a list and clean up formatting
      const benefitsSummary = product.metafields?.['custom-benefits_summary'] || '';
      const benefitsList = benefitsSummary
        ? benefitsSummary.replace(/[\[\]"\n]/g, '').split(',').map(item => item.trim())
        : [];

      // Parse ingredients as a table
      const ingredientsText = product.metafields?.['custom-ingredients'] || '';
      const ingredientsRows = ingredientsText.split('\n').map(item => item.trim());

      const overview = product.metafields?.['custom-overview'] || 'No overview available.';
      const whyWeRecommend = product.metafields?.['custom-why_we_recommend'] || 'No recommendation reason available.';
      const suggestedUse = product.metafields?.['custom-suggested_use'] || 'No suggested use available.';
      const clinicalStudies = product.metafields?.['custom-clinical_studies'] || 'No clinical studies available.';
      const allergenInfo = product.metafields?.['custom-allergen'] || 'No allergens listed.';
      const productQuality = product.metafields?.['custom-our_product'] || 'No product quality details available.';
      console.log('Product Metafields:', product.metafields);
      console.log('Why We Recommend:', product.metafields?.['custom-why_we_recommend']);
      console.log('Clinical Studies:', product.metafields?.['custom-clinical_studies']);
      console.log('Product Quality:', product.metafields?.['custom-our_product']);
      
// display data
detailsContainer.innerHTML = `
        <div class="product-description-container">
          <h4 style="text-align: center;">Why?</h4>
          <p>${whyWeRecommend}</p>
        </div>
        <div class="product-description-container">
          <h4 style="text-align: center;">Also helps with:</h4>
          <ul class="benefits-list">${benefitsList.length ? benefitsList.map(benefit => `<li><p>${benefit}</p></li>`).join('') : '<li>No benefits listed.</li>'}</ul>
          <hr style="border: 1px solid #ccc; margin: 15px 0;">
        </div>
        <div class="product-description-container">
          <div class="icons-grid">
            <div><img src="https://cdn.shopify.com/s/files/1/0885/5257/1162/files/Circle_GMO_Free_1.png?v=1728077630" alt="GMO Free"></div>
            <div><img src="https://cdn.shopify.com/s/files/1/0885/5257/1162/files/Circle_Additive_Free_1.png?v=1728077629" alt="Additive Free"></div>
            <div><img src="https://cdn.shopify.com/s/files/1/0885/5257/1162/files/Circle_Certified_1.png?v=1728077630" alt="Certified"></div>
            <div><img src="https://cdn.shopify.com/s/files/1/0885/5257/1162/files/badge-icon-_Circle_Natural-1724481299.png?v=1724481300" alt="Natural"></div>
          </div>
          <hr style="border: 1px solid #ccc; margin: 15px 0;">
        </div>
        <div class="product-description-container">
          <h4 style="text-align: center;">Our Product Quality</h4>
          <p>${productQuality}</p>
          <hr style="border: 1px solid #ccc; margin: 15px 0;">
        </div>
        <div class="more-info-section">
          <h4 style="text-align: center;">More Info</h4>
          <div class="accordion-item">
            <button class="accordion-toggle">Overview <span class="accordion-icon">+</span></button>
            <div class="accordion-content">
              <p>${overview}</p>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-toggle">Ingredients and Allergies <span class="accordion-icon">+</span></button>
            <div class="accordion-content">
              <table class="ingredients-table">
                <tr>
                  <td>Ingredients</td>
                  <td>${ingredientsText}</td>
                </tr>
                <tr>
                  <td>Suggested Use</td>
                  <td>${suggestedUse}</td>
                </tr>
                <tr>
                  <td>Allergens</td>
                  <td>${allergenInfo}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="accordion-item">
            <button class="accordion-toggle">Clinical Studies <span class="accordion-icon">+</span></button>
            <div class="accordion-content">
              <p>${clinicalStudies}</p>
            </div>
          </div>
        </div>
        <hr style="border: 1px solid #ccc; margin: 15px 0;">
        <div style="padding-bottom: 15px;"></div>
      `;

as you can see in the images below - the data for specifically those 3 items, product quality (our product), why? (why we recommend), and clinical studies (clinical studies) aren't populating. I looked into console to check, and it doesn't seem like the product metafield for those 3 exist, which is why the result for those items are returning undefined. 

I've tried clearing cache, doing it via incognito but same results. 
How can I solve this please?

 

[Huptech-Web]

Hi @Lyrad , Could you please share the metafield structures for both the metafields being fetched and the ones not being fetched? By structure, I mean the format like "product.metafields.namespace.key". This will help me better understand the issue and assist you more effectively.

[Lyrad]

hi @Huptech-Web , i cleared the entire web's cache and it seems to appear already. What the problem is happening now is when I make any changes to the metafields content, it is updated on the product's page, but not on the custom coded recommendations page. Is there a way I can make it fetch the updated content?