Show Product Metafields / Attributes

You are here:
< All Topics

Some stores use Metafields (Shopify) or Attributes (Woocommerce) to display certain product properties.

For example, in Germany, it is mandatory to display the grundpreis or “per 100ml price” for cosmetic products. Ecommerce platforms don’t show this by default, but metafields /attributes let you display it.

If you wish to import product metafields / attributes from your store into the Product Recommendation Quiz in order to display them on your quiz’s results page, you have to take the following steps:

1. Navigate to your Quiz > Results Page > Results Page Settings > Individual Product Settings and activate the “show metafields” toggle. (Shopify)

show product metafields

2. Get in touch with us so we can import the product metafields / attributes from your store.

3. You’ll need to use custom JavaScript code to render the metafield /attribute value in the corresponding position in the results page. This has to be custom built by your developer, since it’s out of our app’s support scope.

Here’s a code sample which replaces the product description with the descriptors-subtitle metafield. It has to be added in the Custom JavaScript input, under Results Page Settings > Advanced Settings:


  window.recommendedProducts = prq.recommendedProducts();

  var products = document.querySelectorAll('.lq-product');

  for (let i = 0; i < products.length; i++) {
    let id = products[i].id;
    let oneId = id.match(/^\d/) ? ("#\\3" + id.charAt(0) + " " + id.substring(1)) : "#" + id;
    let product = window.recommendedProducts.find(product => product.id === id);


  if (product.metafields['descriptors-subtitle']) {
    let toEdit = document.querySelectorAll( oneId + ' .lq-hcont');

  for (let j = 0; j < toEdit.length; j++) {

  if (!toEdit[j].hasAttribute("edited")) {
    toEdit[j].insertAdjacentHTML('beforeend', product.metafields['descriptors-subtitle']);
  toEdit[j].setAttribute("edited", "true");
  }
  }
  }
  }

custom javascript advanced settings

 

Table of Contents

Install the app and get started today

Add a Product Recommendation Quiz to your store and start offering a personalized shopping experience