Skip to main content

​
Overview

In V3 Template, products are fetched using GraphQL. While default product data is automatically included, accessing additional metafields requires three steps:
  1. Adding metafields to the getProductDetailsQuery function
  2. Including metafields in the transformProductData function
  3. Accessing the metafields in your template’s theme.liquid

​
Basic Implementation

​
Step 1: Modify getProductDetailsQuery

Add your metafields to the GraphQL query in the getProductDetailsQuery function: 
getProductDetailsQuery: (recommendation, glood) => {
  return `
    featuredImage {
      url
    }
    handle
    id
    title
    # Add your metafields here
    metafield(namespace: "custom", key: "product_info") {
      value
    }
    # Rest of your existing query
    variants(first: 250) {
      nodes {
        id
        # ... other variant fields
      }
    }
  `
}

​
Step 2: Update transformProductData

Modify the transformProductData function to include your metafields: 
transformProductData: (product) => {
  return {
    featuredImage: product.featuredImage.url
      ? {
          src: product.featuredImage.url,
        }
      : null,
    handle: product.handle,
    id: parseInt(product.id.replace('gid://shopify/Product/', '')),
    title: product.title,
    // Add your metafield transformation
    metafield_value: product.metafield ? product.metafield.value : "N/A",
    // Rest of your existing transformations
    variants: product.variants.nodes.map((variant) => ({
      // ... variant transformations
    }))
  }
}

​
Step 3: Access in Theme

Use the transformed metafield in your theme.liquid: 
{% raw %}
<div class="_gai-prod-dtls">
  <div class="_gai-full-width">
    <a class="_gai-prod-tit" href="{{ product_url }}">
      {{ product.title }}
    </a>
    {% if product.metafield and product.metafield.value %}
      <p>Extra Info: {{ product.metafield.value }}</p>
    {% else %}
      <p>Information unavailable.</p>
    {% endif %}
  </div>
</div>
{% endraw %}

​
Practical Example: Product Ratings with Judge.me

​
Prerequisites

  1. Install Judge.me app on your Shopify store:
    • Go to Shopify App Store and install Judge.me
    • Enable the app integration in your store settings
  2. Enable Judge.me in Glood:
    • Navigate to Glood Product Recommendations
    • Go to Settings >> Integrations >> Product Review Apps
    • Enable the Judge.me app integration
After completing the setup, the rating metafields will be available in your GraphQL queries. You can query these metafields using the reviews namespace wherever needed. To display product ratings in your template, simply use the Judge.me liquid tag: 
{% raw %}
{% product_ratings product_id: product.id %}
{% endraw %}
⌘I