How to add variant metafields in Shopify: The ultimate guide

I'm back with a rather niche topic today: how to add variant metafields in Shopify. I've been down a rabbit hole learning everything there is about this and I'm eager to share it with you.

Metafields are a great feature that let you add custom data fields to various parts of your store. Adding extra details to your products using metafields is super valuable because it will help you to bring in more customers.

In this comprehensive guide to Shopify variant metafields, I will explain what metafields are, how to use them (with a particular focus on product variant metafields), and how they can help you to provide rich information to your customers.

What is a metafield and how do I use it?

A metafield in Shopify is essentially an extra field where you can store specialised information that's not captured by Shopify by default. It's basically a custom data slot that you create that can hold text, numbers, images, URLs, or a range of other data types. Metafields can be attached to many parts of your store, including products, collections, customers, orders, and product variants.

For example, a candle retailer might use a metafield to record a candle's burn time, or a grocery store might add an expiration date metafield for perishable goods. Other common uses include storing things like part numbers, size guides, ingredient lists, or any product detail not covered by Shopify's standard fields.

Clarifying why we use variant metafields instead of further product variants

Your product variants are different versions of a product available for purchase. Shopify uses these to create separate SKUs, prices and inventory tracking.

Metafields, on the other hand, store additional information about each of these variants. This information doesn't determine which variant a customer selects, but provides crucial details about that specific variant.

For example, while a customer chooses between RAM and storage options (variants), each configuration might have different processor speeds, battery life, or weight specifications (metafields) that change depending on which variant is selected. This creates a more accurate and detailed shopping experience without cluttering your main product description with every possible specification combination.

Why use variant metafields instead of additional variants?

Adding every specification as a variant would create an unmanageable "variant explosion" with potentially hundreds of combinations that exceed Shopify's limits, complicate inventory management, and overwhelm your prospective customers.

Most shoppers primarily select based on a few key attributes (like RAM/storage) and then review the specifications of that selection.

Variants should be reserved for 1-3 critical options that customers actively choose between, significantly affect pricing, and require distinct inventory tracking.

Variant metafields provide a streamlined solution for displaying important secondary details that change with each variant without forcing customers to navigate through excessive dropdown menus or invalid product combinations.

Steps involved in using metafields in Shopify:

1. Define the meta field – First, you need to create a metafield definition to specify what kind of data the field will hold (e.g. text, number, file, etc.) and give it a name/key.
2. Assign values – Next, you need to fill in the metafield value for each item (for example, each product or each variant) via the Shopify admin.
3. Display in your store – Lastly, you need to connect the metafield to your theme, either through the theme editor or by editing your theme code, so that customers can see this information on your storefront.

This comprehensive guide focuses specifically on variant metafields – metafields attached to individual product variants.

Shopify also supports metafields for whole products, collections, customers, orders, and more, but those are outside our scope here.

By the end, you'll know how to set up variant metafields, populate them with data, and use them in your theme, with examples for both beginners and developers.

Understanding Shopify variant metafields

Variant metafields are metafields that are associated with a specific product variant rather than the product as a whole. If your product comes in multiple versions (like different sizes, colours, or styles), variant metafields let you store information unique to each of those versions. This is different from a product metafield, which would apply to all variants of a product.

• A product metafield is shared across all variants. For example, if you add a product metafield "Fabric" to a t-shirt product, all variants (small, medium, large) will show the same fabric info.
• A variant metafield is specific to one variant. For example, you might have a metafield "Chest measurement" that varies for each size variant (Small: 91 cm, Medium: 96 cm, Large: 102 cm).

Extending variants beyond Shopify's standard fields

In Shopify's data model, a product variant already has some built-in fields like price, SKU, inventory quantity, image, etc. However, you may need to store additional variant-specific data that Shopify doesn't provide out of the box. Variant metafields fill this gap. They allow you to extend product variant data beyond the basics.

For instance, if you've got a t-shirt you want to sell in multiple colours. You could create a variant metafield for "Care Instructions" so that the washing instructions for the red shirt variant can be different from those for the white shirt variant. Or, if you sell a phone in different storage options, a variant metafield could store the battery life for each specific model (since perhaps the 128GB model has a slightly different battery spec than the 256GB model).

How to set up variant metafields in Shopify

Setting up variant metafields involves two main steps: creating the metafield definition (the field setup) and adding values to that field for each variant. Shopify has made this process much easier in recent versions of the admin.

Note: Shopify does have a selection of inbuilt metafields. You can use these if required but they don't always hit the mark, so I will show you how to add a custom variant metafield. The store I'm setting up is for computers, laptops, parts and accessories, so I'll be showing you this with a HP Laptop. I'll take you through what you need to do, step by step.

Step 1: Create a variant metafield definition

1. Navigate to Variant Metafields in Admin: Log in to your Shopify admin and go to Settings > Custom Data (or Metafields in older labels) > Variants. This is where you manage metafield definitions for product variants.

   

2. Add a new definition: Click the "Add definition" button. You'll be prompted to enter details for your new metafield definition.

   

   Name your metafield: Give it a clear name (e.g. "Ingredients list" or "Technical spec"). I've added Processor and Graphics card in my example. Shopify will auto-generate a Namespace and Key based on this name. You can typically leave these as-is. For example, if you name it "Processor", Shopify might set the namespace to custom and the key to processor. These identifiers are used in code when displaying the metafield on your storefront.

3. Add a description (optional): Write a short description to help your staff understand what to enter. This shows up in the admin when editing the metafield value. For example: "The processor model and speed" for a processor metafield.

4. Choose the content type: Select the type of content this metafield will store. Shopify offers many options – choose the one that best fits your data:

   • Single line text (for brief information like processor models - I chose this one)
   • Multi line text (for longer descriptions)
   • Integer (for whole numbers)
   • Decimal (for numbers with decimal points, like weight)
   • Boolean (true/false, for features that are either present or not)
   • URL (for links to additional resources)
   • File (for images or PDFs)
   • Product reference (to link to another product)

5. Select value format:

   • One value: Choose this for specifications where each variant has only one value (most common)
   • List of values: Only use this if a variant might have multiple values for this field

6. Set validations (optional):

   • Unique values only: Check if each variant must have a different value
   • Limit to preset choices: Use to create a dropdown of specific options
   • Minimum/Maximum character count: Set length limits if needed
   • Regular expression: Define a specific format pattern if required

7. Configure options:

   • Smart collections: Enable if you want to use this metafield for creating automated collections
   • Storefront API access: IMPORTANT - Make sure this is enabled (toggled ON) if you want the metafield to appear on your store

8. Save the definition: Click Save. You've now created a variant metafield definition, meaning the field exists and is ready to hold data on each variant. You can see my example in the screenshot below.

   

Step 2: Add values to your variant metafields

Now that the variant metafield is defined, you need to connect it to your variants and add values. Here's how:

1. Open a product with variants: From your Shopify admin, go to Products and select a product that has variants (or create variants if you haven't already).

2. Navigate to the Variants section: On the product detail page, scroll down to the Variants section where you can see your product options (like RAM and Storage).

3. Click the + Add variant button: Look for the +Add variant button and click on it.

4. Select the variant you want to add the metafield to:

5. Add values for each variant combination: After connecting the metafield, you'll be able to enter specific values for each variant combination. For example:

   • For a laptop with 8GB RAM + 256GB SSD: "Intel Core i3-1215U, 3.3GHz"
   • For a laptop with 16GB RAM + 512GB SSD: "Intel Core i5-1235U, 4.4GHz"
   
   

6. Save the product: After entering all the values, click Save to store the metafield values for each variant.

7. Repeat for additional metafields: If you have other metafields like "Battery Life" or "Graphics," repeat the process by clicking the "Connect metafield" button again and selecting the next metafield.

As I've shown you in this example, technical products like electronics benefit greatly from variant metafields. For a laptop that comes in different configurations, each variant might have distinct technical specifications that customers need to see. Imagine one variant has 8GB RAM and a 2.5GHz processor, while another has 16GB RAM and a 3.0GHz processor. You could use metafields like "RAM", "Processor Speed", "Battery Life", etc., to store these specs for each variant. Then, on the product page, display the specs of the currently selected variant so customers see the exact details of the model they're considering. This approach is much clearer than listing all possible specification combinations in a single product description.

I will walk you through how to display variant metafields in your Shopify store soon, but first let's have a brief look at some practical use cases for variant metafields in case you'd like to know more about how you could use them.

Jump to how to display variant metafields in your Shopify store

Practical use cases for variant metafields

To spark some ideas, here are a few practical ways store owners use variant metafields. These examples illustrate the kind of information you might store at the variant level:

Size-specific details (Size guides)

If your product variants represent different sizes, you can store size-specific information in each variant's metafields. For example, a clothing store might have a metafield for a size chart image or detailed measurements for that specific size. When a customer selects "Large", you could display that variant's exact dimensions or a link to a size chart tailored to large size. This ensures accuracy if sizing differs between variants (especially useful if, say, a unisex medium has different measurements than a women's medium).

Ingredient lists or components

If variants correspond to different flavours, colours, or materials, each one might have a unique ingredients or materials list. For example, a line of candles where each variant is a different scent can have a metafield for Ingredients. The "Vanilla" scent variant's metafield would list its ingredients (e.g. "Soy wax, Vanilla oil, Cotton wick"), whereas the "Lavender" variant would list "Soy wax, Lavender oil…", and so on. This way, when a customer switches to a different flavour/scient, they can immediately see the relevant ingredient or composition details.

Variant-specific images or files

You can also use metafields to associate media or downloadable files with a variant. For instance, a furniture store might have a PDF assembly instruction that differs for each model variant – you could upload each PDF through a File-type metafield on the variant. Or if you want a unique image (beyond the standard product images) for each variant, such as a schematic diagram or a colour swatch, you could do so via an image URL or file metafield. Then use that metafield in your theme to display the content when that variant is selected.

These are just a few ideas – the possibilities are endless. The key is: if it's unique to the variant, variant metafields can probably handle it. By tailoring information at this granular level, you improve the customer's understanding of what they're buying (which can increase trust and conversion rates).

How to show variant metafields in your Shopify store

After adding all these great custom details to your variants, you'll want to show them on your storefront so customers can benefit from the information. There are two main ways to display metafields in a Shopify store theme. I highly recommended doing this with custom liquid (don't panic, it's really straightforward). But first, a quick note on how you can do this in the theme editor.

1. Using the theme editor (no code needed)

If you're using an Online Store 2.0 theme (like Shopify's Dawn theme or any modern theme), you can connect metafields to sections or blocks in your theme through the visual editor.

Shopify's theme editor allows you to bind a dynamic data source to certain elements. For example, you might add a new text block to your product page and choose "Insert dynamic source", then pick your variant metafield from the list. The theme will then display that metafield's value for whichever variant is selected.

This can be the easiest method for simple cases: just point-and-click to get metafield content showing, no coding required. (Make sure to check that the theme section you're using supports the type of metafield you created – most standard types like text, number, image, etc., are supported in OS 2.0 themes.) I couldn't use this, so I went the code route, which (albeit I know how to code) is something even a beginner can do.

2. Using Liquid code in your theme

Implementation Method 1: Add a custom Liquid section

The easiest way to display variant metafields without editing theme files directly is by adding a Custom Liquid section in the theme editor under the Product Information:

1. Go to Shopify admin > Online Store > Themes
2. Click "Customize" on your active theme
3. On a product page, click "Add block" (under product information)
4. Select "Custom liquid"

In the Custom liquid content field, add code like this:

{% for variant in product.variants %}
  <div data-variant-id="{{ variant.id }}" {% if variant.id != product.selected_or_first_available_variant.id %}style="display:none;"{% endif %}>
    <p><strong>Processor:</strong> {{ variant.metafields.custom.processor }}</p>
    <p><strong>Graphics:</strong> {{ variant.metafields.custom.graphics_card }}</p>
  </div>
{% endfor %}

<script>
document.addEventListener('DOMContentLoaded', function() {
  const inputs = document.querySelectorAll('input[name="id"], select[name="id"]');
  inputs.forEach(input => {
    input.addEventListener('change', function() {
      const variantId = this.value;
      document.querySelectorAll('[data-variant-id]').forEach(el => {
        el.style.display = 'none';
      });
      const selected = document.querySelector(`[data-variant-id="${variantId}"]`);
      if (selected) selected.style.display = 'block';
    });
  });
});
</script>

How this works:

This code creates a dynamic display of metafields that updates when customers select different variants. Here's what's happening:

1. The code loops through all your product variants ({% for variant in product.variants %}) and creates a container for each one.
2. Only the currently selected variant's information is visible - the others are hidden with style="display:none;".
3. When a customer selects a different variant, the JavaScript detects this change and shows only the information for that variant.

What you need to change:

• Replace variant.metafields.custom.processor with your own metafield using the format variant.metafields.[your-namespace].[your-key]
• Replace variant.metafields.custom.graphics_card with your second metafield
• Change the labels (<strong>Processor:</strong> and <strong>Graphics:</strong>) to match your metafields
• Add or remove metafield lines as needed for your product

For example, if your metafields use the namespace my_fields with keys material and weight, you would change those lines to:

<p><strong>Material:</strong> {{ variant.metafields.my_fields.material }}</p>
<p><strong>Weight:</strong> {{ variant.metafields.my_fields.weight }}</p>

When the page loads, customers will see the information for the default variant. When they select a different variant, the JavaScript automatically updates the display to show the correct information without reloading the page. This provides a seamless experience as customers explore different product options.

More advanced Liquid examples

Here are a few more examples of Liquid usage (which you can mix and match in your code as needed):

Displaying text or HTML stored in a metafield

If you have a rich text or HTML snippet stored (say a warranty info in a multi-line text metafield), you can output it like this:

(where custom is the namespace and warranty_info is the key). It will render whatever content you've saved for that variant. You might wrap this in an {% if %} check as above to only show it when available.

Showing an image from a file metafield

If your metafield is an image or file, the value will typically be a URL. You can use it in an <img> tag or anchor tag. For example:

{% if current_variant.metafields.specs.schematic_image %}
  <img src="{{ current_variant.metafields.specs.schematic_image | img_url: '500x' }}" alt="Schematic for {{ current_variant.title }}">
{% endif %}

Here we assume specs.schematic_image is a File-type metafield containing an image. We use the img_url filter to resize it to 500px (you can adjust or remove that as needed). This will display the image specific to that variant.

Listing variant-specific data in a table or list

In some cases, you might want to show all variant info together – for example a comparison table of variants. You can loop over all variants and print each variant's metafield:

<table>
 <tr><th>Variant</th><th>Battery Life</th></tr>
  {% for variant in product.variants %}
   <tr>
     <td>{{ variant.title }}</td>
     <td>{{ variant.metafields.specs.battery_life }}</td>
   </tr>
 {% endfor %}
</table>

This would output a table listing each variant and the value of its "battery_life" metafield from the specs namespace. Only do this if it makes sense for your product page design (it could be useful for tech spec comparisons, for instance). Keep in mind that if you have many variants, listing them all might be overwhelming to the user, so use such an approach judiciously.

When editing theme code, always remember to preview and test the changes. Make sure that the metafield output looks correct and that nothing appears for variants where a metafield might be empty. A well-implemented variant metafield display will seamlessly show the right info for the right variant, enhancing the product page without any manual intervention from you once set up.

Tips and best practices for managing variant metafields

Now that you have the basics, here are some best practices to ensure you're getting the most out of variant metafields in Shopify:

By following these best practices, you'll maintain a clean and efficient metafield setup that enhances your store and improves the customer experience.

Conclusion

Shopify variant metafields are a powerful way to enhance your product pages with detailed, variant-specific information. When implemented correctly, they provide several key benefits:

• Improved customer experience by showing precise information for each product variant
• Increased conversion rates through more detailed product information
• Reduced returns by setting accurate expectations about each variant
• Enhanced SEO through more detailed, variant-specific content
• Better inventory management with variant-level custom data

As you implement variant metafields, always keep the customer experience in mind – present the information in a clear and helpful way that enhances understanding and drives purchase confidence. The extra effort to set up and maintain variant metafields will pay off through increased conversions and customer satisfaction.

For stores with many products and variants, consider automating your Shopify product management to save time and ensure consistency across your catalogue.