Update variant metafields on variant change in Shopify's Dawn Theme

In Shopify Liquid themes, metafields are a great way to display custom product variant data. However, if you add variant metafields, they don’t automatically update. This post will demonstrate an easy way to update the variant metafields in Shopify’s Dawn theme whenever a customer changes the variant.

Assumptions

This post assumes that you have a basic understanding of HTML and JavaScript.

Getting Started

To get started, add some custom variant metafields with data to one of Shopify’s sample data products. For this example, I've added length, width, and flex keys with a namespace of specs.

Next, add the HTML and Liquid that we need to render our variant specs. For simplicity, this post adds the variant specs as a Custom Liquid section block. Because it’s tedious to type out all of the Liquid and HTML in the settings, type the code out in a text editor and then copy and paste it over to the Theme Editor. Use an unless statement to only render the section if any of the variant metafields aren’t blank.

{% unless product.selected_or_first_available_variant.metafields.specs.length.value == blank
  and product.selected_or_first_available_variant.metafields.specs.width.value == blank
  and product.selected_or_first_available_variant.metafields.specs.flex.value == blank
%}
  <div id="VariantSpecs-{{ section.id }}">
    <h2>Specs</h2>
    <ul>
      {% if product.selected_or_first_available_variant.metafields.specs.length.value != blank %}
        <li>Length: {{ product.selected_or_first_available_variant.metafields.specs.length.value }}"</li>
      {% endif %}
      {% if product.selected_or_first_available_variant.metafields.specs.width.value != blank %}
        <li>Width: {{ product.selected_or_first_available_variant.metafields.specs.width.value }}"</li>
      {% endif %}
      {% if product.selected_or_first_available_variant.metafields.specs.flex.value != blank %}
        <li>Flex: {{ product.selected_or_first_available_variant.metafields.specs.flex.value }}</li>
      {% endif %}
    </ul>
  </div>
{% endunless %}

Copy and paste this code into a custom Liquid block in the product information.

Updating the Metafields

When a customer changes a variant, the Dawn theme automatically updates the variant price, variant SKU, and variant inventory status. To make the metafields update correctly, make some minor changes to the theme’s JavaScript.

Global.js in the theme’s assets directory contains the main JavaScript for the theme. First, find the VariantSelects custom element. Then, find the renderProductInfo() method within the component. This method handles updating the variant information whenever the user changes the variant.

Add a variantSpecsSource variable and a variantSpecsDestination variable modeled after the theme’s other source and destination variables. It’s important to make sure that the ID used to select the element matches the ID added to the Custom Liquid section.

const variantSpecsSource = html.getElementById(`VariantSpecs-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);

const variantSpecsDestination = document.getElementById(`VariantSpecs-${this.dataset.section}`);

Finally, add an expression that sets the destination inner HTML to the source’s inner HTML, just as the theme already does for the price, SKU, and inventory status.

if (variantSpecsSource && variantSpecsDestination) variantSpecsDestination.innerHTML = variantSpecsSource.innerHTML;

That should do it. Your variant metafields will now update whenever a customer changes the variant.

Conclusion

Metafields are a powerful tool to display custom product variant data. By following these steps, you can easily update variant metafields in Shopify’s Dawn theme whenever a customer changes the variant. If you have any tips or suggestions, feel free to leave a message in the YouTube comments.

If you need help with consulting or theme customizations, you can send me a message via my contact page!