How to Add Product Metafields/Attributes¶
This article explains how to add product metafields/attributes to products on your quiz's results page.
Note
The app can only sync and show the string, single_line_text_field, multi_line_text_field, date, and number product metafields. Rich_text_fields metafields are not currently supported.
Metafields in Shopify are used by stores to display specific product properties that aren't shown by default on e-commerce platforms. For instance, in Germany, it's required to show the "grundpreis" or per 100ml
price for cosmetic products. Metafields make this possible.
In the ๐Built for Shopify
version of the RevenueHunt app, the process for adding and displaying metafields is streamlined. Follow the steps outlined below to import product metafields from your store into the Product Recommendation Quiz and display them on your quiz's results page:
Step 1: Enable Metafields Display
To enable the display of metafields for individual products:
- Navigate to the Results Page tab in the Quiz Builder.
- Add a Product block and open its settings.
- In the
Product components layout
, click+ block
and add theMetafield
section. - From the
Select metafield
section, select the metafield you want to display. - Alternatively, you can add a
Text
block to your product layout and add the metafield value manually as a content dynamic source to make it part of a block of text. - Save the changes with the top-right
Save
button.
From now on the selcted metafiled will be dynamically displayed in the product block as part of the recommended product.
Tip
If you're missing custom metafileds from the list of available metafields, you can force a catalog sync:
- Go to App Settings > Catalogue.
- Click the
Import catalogue
button to trigger a manual sync.
Note
The app can only sync and show the custom text product metafields.
Metafields in Shopify are used by stores to display specific product properties that aren't shown by default on e-commerce platforms. For instance, in Germany, it's required to show the "grundpreis" or per 100ml
price for cosmetic products. Metafields make this possible.
If you're looking to import product metafields from your store into the Product Recommendation Quiz to display them on your quiz's results page, follow the steps outlined below:
Step 1: Enable Metafields Display
First, enable the display of metafields for individual products:
- Navigate to your Results Page Settings > Basic.
- Open the
Individual Product Settings
section. - Activate the
show metafields
toggle.
Step 2: Open App Settings
Open App Settings > Catalogue to access the settings to manage your catalog.
Step 3: Select Metafields
Select the Metafields namespaces you want to sync with the app by clicking the toggle icon next to each.
Step 4: Sync the Catalog
Update your catalog with the new metafields by triggering a catalog sync from your dashboard.
Step 5: Implement Custom JavaScript on the Results Page
To display the metafield values on your results page, custom JavaScript is required:
- Your developer will need to write custom JavaScript code to render the metafield value in the desired location on the results page.
- This customization falls outside the support scope of our app.
Here's a sample code that replaces the product description with the descriptors-subtitle
metafield. This code should 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', '<span>' + product.metafields['descriptors-subtitle'] + '</span>');
toEdit[j].setAttribute("edited", "true");
}
}
}
}
Attributes in Woocommerce are used by stores to display specific product properties that aren't shown by default on e-commerce platforms. For instance, in Germany, it's required to show the "grundpreis" or per 100ml
price for cosmetic products. Attributes make this possible.
If you're looking to import product attributes from your store into the Product Recommendation Quiz to display them on your quiz's results page, follow the steps outlined below:
Step 1: Enable Attributes Display
First, enable the display of attributes for individual products:
- Navigate to your Results Page Settings > Basic.
- Open the
Individual Product Settings
section. - Activate the
show metafields
toggle.
Step 2: Open App Settings
Open App Settings > Catalogue to access the settings to manage your catalog.
Step 3: Select Attributes
Activate the Pass attribute information to result page
setting by clicking the toggle.
Step 4: Sync the Catalog
Update your catalog with the new attributes by triggering a catalog sync from your dashboard.
Step 5: Implement Custom JavaScript on the Results Page
To display the metafield values on your results page, custom JavaScript is required:
- Your developer will need to write custom JavaScript code to render the metafield value in the desired location on the results page.
- This customization falls outside the support scope of our app.
Here's a sample code that replaces the product description with the descriptors-subtitle
metafield. This code should 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', '<span>' + product.metafields['descriptors-subtitle'] + '</span>');
toEdit[j].setAttribute("edited", "true");
}
}
}
}
How to Use Metafields as Smart Collections¶
Shopify allows you to use product metafields as conditions when creating smart collections.
Smart collections from metafields
Check official Shopify documentation for more information: Smart collections from metafields.
This is useful if you want to organize products by custom attributes (like Skin Concern = Acne
or Subscription Eligible = True
) and then connect those collections to your RevenueHunt quiz.
Supported Metafield Types
You can use the following product metafield types in smart collections:
- Single line text
- Single line text (list)
- True or false (boolean)
- Integer
- Decimal
- Rating
Step by step guide:
-
Create Product Metafields: In Shopify Admin, go to
Settings โ Custom data โ Products
.- Click
Add definition
. - Select a supported metafield type (see above) and add a clear name (e.g.
Skin Concern
,Organic Certified
,SPF Rating
). - Save the metafield definition.
- Click
-
Add Metafield Values to Products: Open a product in Shopify Admin. Scroll down to the
Metafields
section. Enter the value for the metafield you created. Example:Skin Concern = Acne
. Repeat for all relevant products. -
Create a Smart Collection Using Metafields: Go to
Products โ Collections
.- Click
Create collection
. - Choose
Automated collection
. - Under
Conditions
, open the field dropdown and selectProduct metafields
. - Select your metafield (e.g.
Skin Concern
). - Define the condition (e.g.
equals โ Acne
). - Save the collection. Now, Shopify automatically groups products based on metafield values.
- Click
-
Use Smart Collections in RevenueHunt: Open your quiz in the RevenueHunt app. Edit a question and add a Choice. Instead of linking individual products, select the Shopify collection you created. Example: Quiz answer โAcne-prone skinโ โ Collection
Skin Concern = Acne
. Save and publish your quiz.
Shopify allows you to use product metafields as conditions when creating smart collections.
Smart collections from metafields
Check official Shopify documentation for more information: Smart collections from metafields.
This is useful if you want to organize products by custom attributes (like Skin Concern = Acne
or Subscription Eligible = True
) and then connect those collections to your RevenueHunt quiz.
Supported Metafield Types
You can use the following product metafield types in smart collections:
- Single line text
- Single line text (list)
- True or false (boolean)
- Integer
- Decimal
- Rating
Step by step guide:
-
Create Product Metafields: In Shopify Admin, go to
Settings โ Custom data โ Products
.- Click
Add definition
. - Select a supported metafield type (see above) and add a clear name (e.g.
Skin Concern
,Organic Certified
,SPF Rating
). - Save the metafield definition.
- Click
-
Add Metafield Values to Products: Open a product in Shopify Admin. Scroll down to the
Metafields
section. Enter the value for the metafield you created. Example:Skin Concern = Acne
. Repeat for all relevant products. -
Create a Smart Collection Using Metafields: Go to
Products โ Collections
.- Click
Create collection
. - Choose
Automated collection
. - Under
Conditions
, open the field dropdown and selectProduct metafields
. - Select your metafield (e.g.
Skin Concern
). - Define the condition (e.g.
equals โ Acne
). - Save the collection. Now, Shopify automatically groups products based on metafield values.
- Click
-
Sync changes: Open your quiz in the RevenueHunt app and run a quick catalog sync.
- Link Smart Collections in RevenueHunt: Go to the Link Collections tab in the Quiz Builder and link the smart collection to a choice.
- Click
Publish
to save your changes.
You can use attributes as categories in the RevenueHunt app for WooCommerce.
To do that:
- Open App Settings > Catalogue to access the settings to manage your catalog.
- Activate the
Use attributes as categories
setting by clicking the toggle.
3. Update your catalog with the new attributes by triggering a catalog sync from your dashboard.
4. Go to the Link Collections tab in the Quiz Builder and link the attributes to a choice.
5. Click
Publish
to save your changes.
Following these steps will enable you to display specific metafields on your quiz's results page, ensuring compliance with local regulations and improving your product presentations.