Show Product Metafields / Attributes

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:

Step 1: Show Metafileds

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

Step 2. Open Settings

Open the Product Quiz app dashboard Settings:

Step 3. Choose Metafields / Attributes

(Shopify) In the Settings section, navigate to the Catalog and select the Metafields you want to sync:

(WooCommerce) In the Settings section, navigate to the Catalog and select the Pass attribute infromtion to results page if you want to show attributes as “metafileds” on the resutls page:

Step 4. Sync the catalog

It is necessary to sync the catalog to update it with the new metafields/attributes. This article explains how to run a manual sync of the app.

Step 5. Add JavaScript to the Results Page

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");
  }
  }
  }
  }