Metafields allow you to customize the functionality and appearance of your Shopify store by storing specialized data that isn't normally captured in the Shopify admin. It can be used to track internal data or to display specialized information on your online store in a variety of ways.
Therefore, this was one of the most discussed topics during Shopify Unite 2022. Shopify also published a workshop to guide users to create, render, and automate tasks with Metafields.
This article will go through the Metafield guides in the Shopify workshop. However, we’ll make a few changes here and there so it'll be more beginners' friendly. Trust us, even the advanced guides are not difficult to follow!
New to Shopify Metafields? Or you want to better understand:
Check out the full Shopify Metafields Guide.
The easiest and most native way to add new Metafield definitions is from the Shopify admin. In this example, we’ll create a Products Metafield to add customers' image feedback of the product.
For full instructions, check out this Metafield guide. To make it brief, you'll need to go to Settings > Custom data > Choose Products.
Click on Add definition to begin creating a new metafield definition with the following properties:
Click on Save to store the new metafield definition. You can leave the options in the Validation section set to their default values.
The free Shopify GraphiQL app allows you to interact with your store's Admin and Storefront APIs. It features an easy-to-use editor so you can create the payload of your API calls, as well as documentation and auto-completion with ease.
As it manipulates APIs, you can set metafield definitions on thousands of products programmatically. Such a huge time-saver! Moreover, Shopify GraphiQL can utilize much more advanced applications of Shopify Metafields such as creating a basic “recommended products” section to showcase similar or related products. However, the downside is you need to learn some basic programming syntax.
In this example, we'll show you how to create new metafield definitions and product data for product recommendations in Shopify GraphiQL.
Step 1: Install the Shopify GraphiQL app
To install the app click on this link and follow the instructions.
Step 2: Create a product recommendation metafield definition
We start by using the GraphiQL app to create a new metafield definition for storing one or more product recommendations. In this example, the GraphiQL app will make a GraphQL metafieldDefinitionCreate mutation call to create a new metafield definition.
To do so, start by launching the GraphiQL app. Make sure to have the API Schema toggle switched to Admin and choose the latest version from the API version dropdown menu (1).
Add the following payload to the top left window of the editor (2):
mutation CreateMetafieldDefinition($definition: MetafieldDefinitionInput!) {
metafieldDefinitionCreate(definition: $definition) {
createdDefinition {
id
name
}
userErrors {
field
message
code
}
}
}
The $definition value is built by adding JSON into the Query variables part of the GraphiQL app. It's located at the bottom left of the screen and might be collapsed when you first load the page (3).
{
"definition": {
"name": "Recommendations",
"namespace": "custom",
"key": "recommendations",
"description": "Recommended products",
"type": "list.product_reference",
"ownerType": "PRODUCT"
}
}
After the mutation has been made, you can check the Settings > Metafields menu to see the new definition.
In this step, we'll add values for the metafields we just created. In the basic instruction to create Shopify Metafields in Shopify Admin, we have a metafield definition for “special image”. So, let’s add some images here.
When you open the product editor in the admin, you will find the metafield section at the bottom of the page. If not all metafields are visible, click on Show all.
Upload an image that you want to display additionally with the product. Click on Save to finalize your changes.
So simple, isn't it? But how about if you have several hundred or thousands of products? All this manual work will be extremely time-consuming.
Using the Shopify GraphiQL app, you can assign values for a metafield without visiting every single page. You still need to have the ID of the page (products, collections, etc) you want to add values to. An ID exporter app can help you with this. Or you can find the ID in the URL when hovering in the editor.
In this step, we will populate the product recommendation metafield for the product with ID: 6987538464955. The related items will have these IDs: 6987538858171, and 6987539153083.
The payload for this is as below (1):
mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) {
metafieldsSet(metafields: $metafields) {
metafields {
key
namespace
value
createdAt
updatedAt
}
userErrors {
field
message
code
}
}
}
In the query variables section, we will pass variables that are necessary for the mutation, such as the main product and the recommended products (2).
Replace the target product ID in the ownerId field with yours, then change the IDs in the value field with that of the recommended. Note that the type field is list.product_reference and a list of recommendations will be built using a comma-separated string of IDs.
{
"metafields": [
{
"key": "recommendations",
"namespace": "custom",
"ownerId": "gid://shopify/Product/6987538464955",
"type": "list.product_reference",
"value": "[\"gid://shopify/Product/6987538858171\", \"gid://shopify/Product/6987539153083\"]"
}]
}
Running this mutation successfully will create a new metafield definition that you can see in both the API response in GraphiQL and in the admin Metafield menu (3).
Additionally, if you open the product in the Shopify Admin, you'll also see the new product recommendations metafield.
Unfortunately, there currently isn’t a no-code way to display Shopify Metafields on your storefront. You'll need to access the code editor and use Liquid to get this done. Liquid is Shopify's templating language. Metafields are accessible as Liquid objects in Shopify themes, by wrapping the full definition in curly brackets. Below is the Liquid template to connect metafields with the Shopify storefront.
{{ product.metafields.my_fields.instructions.value }}
For example, this syntax {{%- if product.metafields.custom.special_image != blank -%}} will refer to the “special image" we’ve created (!= mean “is not").
In this section, you will add some Liquid code and HTML to your theme. This will allow us to display the metafields we've set up using Shopify Admin and Shopify GraphiQL app.
To access the code editor, navigate to the Online Store under the Sales channel section on the left-hand side. Choose Edit code in the Action dropdown menu in the main content area.
Note: To prevent any problems with your live site that can affect your sales, we highly recommend you do these steps on a duplicated theme or on a test store.
The code below was written for Dawn, the default development store theme. If you are using a different theme, you will need to make the appropriate changes.
Open the Sections/main-product.liquid file and find the snippet that displays the product description on the product detail page.
{%- if product.description != blank -%}
<div class="product__description rte">
{{ product.description }}
</div>
{%- endif -%}
{%- if product.metafields.custom.special_image != blank -%}
<div>
<img src="{{ product.metafields.custom.special_image | img_url: '250x' }}" />
</div>
{%- endif -%}
This snippet will render the additional product image. By using an if statement, the additional image will only show if the metafield is set for that product. Also, note the use of the img_url filter, in our case, they will determine the dimensions of the image.
{%- if product.metafields.custom.recommendations != blank -%}
<div>
<strong>Recommended products</strong>
<ul>
{% for product in product.metafields.custom.recommendations.value %}
<li><a href="{{ product.url }}">{{ product.title }}</li>
{% endfor %}
</ul>
</div>
{%- endif -%}
The code will check if the metafield isn't empty and then iterate over the list of recommended products.
Now, when you navigate to the product detail page of your demo store, you should see the new metafields rendered.
We've shown just some examples of how to use metafields with Shopify Admin and the Shopify GraphiQL app to modify how your store looks and feels. Some other applications to alter metafields for your needs are to showcase:
Let's expand your ideas on that and share with us how you are utilizing this Shopify weapon on our social channels including Facebook, Twitter, Linkedin, and Youtube.
.jpg)