This guide will give you a quick introduction to what Shopify metafields are and show you how to display your product metafields in your quiz results.

In simple terms, Shopify metafields are extra pieces of information you can add to a product in your store. Think of them like custom notes or tags that are not part of the standard product details (like title, price, or description). You use them when you want to store special data that Shopify doesn’t include by default.

For example, let's say you're selling a jacket, and you want to add what type of fabric it uses. Shopify does not have a built-in field for that, so you can create a metafield for it.

Please refer to this Shopify help article for more complete information on metafields.

There are two different types of Shopify metafields you can use in Octane AI: product and variant metafields.

These are extra details attached to individual products. Using a sports jacket as an example again, these might be the metafields added to it:

Another item of clothing can have a different seam type. The value itself is not shared between products, only the product metafield name.

These are extra details attached to product categories. All products in that category will share the same metafield values:

Other jackets in the "Activewear Vests & Jackets" category can have those same category metafields. These metafields can be used to sort products in the category. You can filter for jackets with the canvas fabric, for instance.

First, we need to make sure the metafields are being displayed in the quiz. By default, they are turned off. To enable them, go to your product block -> Display settings -> Desktop or Mobile settings -> check Metafields:

Now, scroll down and click on Add metafields directly from Shopify:

You will now be able to use both Product metafields:

As well as Variant metafields from your products:

Once you have added your metafields, they will look like this:

You can see the product metafields being displayed below the product title:

And the variant metafields when you select a variant:

If you click on the metafields on the bottom right, you will also be able to adjust whether or not they display their label, and if they should be displayed on desktop and/or mobile:

Here is how the product looks with the label turned on for the variant metafields:

You can now have beautiful color swatches as selectors for your product variant colors in your quiz:

To do so, first, you need to add the colors in the Category metafields section of your product settings in Shopify:

You can then add the color variants for your product in the Variants section:

Once you select the Color option, it should automatically connect to your Category metafields, like so:

Now, once you save your product settings, you can open your quiz in the editor. Click on your product block on the left inside the results page to open its settings -> go to the right -> go to Display Settings -> Desktop or Mobile settings -> Variant Picker -> select the Pills option in the dropdown:

Your results should now display the color swatches:

You can also display the swatches as squares through the Variant Swatch setting:

You do not need to do anything in the Shopify Metafields settings in the quiz editor to display the color swatches, they are pulled from your variants settings and displayed automatically.