Showcase Savings on Shopify Product Variants with Metafields

Introduction

Shopify store owners often want to showcase savings on product variants to encourage purchases. This can be particularly useful when offering subscription-based products or services with different durations. In this guide, we’ll explore how to use metafields to display savings for different product variants, including how to implement this feature using both Liquid and JavaScript.

Understanding Metafields for Variant Savings

What are Metafields?

Metafields in Shopify are custom fields that allow you to add extra information to various objects in your store, such as products, variants, or collections. They’re incredibly useful for storing and displaying custom data that doesn’t fit into Shopify’s standard fields.

Setting Up Metafields for Months

To implement our savings display, we’ll use a metafield to store the number of months for each variant. This metafield should be set up as an integer type, with a namespace of “my_fields” and a key of “months”.

Accessing Metafields in Liquid

Once set up, you can access the metafield in your Liquid templates using the following syntax:

{{ current_variant.metafields.my_fields.months }}

Displaying Savings with Liquid

Basic Liquid Implementation

Here’s a Liquid code snippet that calculates and displays the savings for each variant:

{%- if settings.product_save_amount -%}
  {%- capture saved_amount -%}
    {{ current_variant.compare_at_price | minus: current_variant.price | times: current_variant.metafields.my_fields.months | money }}
  {%- endcapture -%}
  <span data-save-price class="product__price-savings{% if hide_sale_price %} hide{% endif %}">
    {%- unless hide_sale_price -%}
      {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
    {%- endunless -%}
  </span>
{%- endif -%}

This code calculates the savings by subtracting the variant price from the compare-at price, multiplying by the number of months stored in the metafield, and formatting it as currency.

Limitations of Liquid-only Approach

While this Liquid code works well for initial page load, it doesn’t update dynamically when a customer selects a different variant. To achieve that, we need to implement a JavaScript solution.

Implementing Dynamic Savings Display with JavaScript

The Challenge with JavaScript

When trying to access metafields in JavaScript, you might encounter difficulties. The standard variant object in JavaScript doesn’t include metafield data by default. Here’s an example of a common attempt that doesn’t work:

var savings = (variant.compare_at_price - variant.price) * variant.metafields.my_fields.months;

Solution: Creating a JSON Object

To overcome this limitation, we can create a hidden JSON object on the product page that contains all the necessary variant and metafield data. Here’s how to implement this solution:

1. Add this Liquid code to your product template:

{% assign metafields-data = '[' %}
{%for variant in product.variants%}
  {% assign metafield-value = variant.metafields.my_fields.months.value | replace: '"', "''" %}
  {% assign metafields-data = metafields-data | append: '{"variant_id":"' | append: variant.id| append: '" , "metafield_value":"' | append: metafield-value | append: '"},' %}
{%endfor%}
{% assign metafields-data = metafields-data | append: ']'%}
{% assign metafields-data = metafields-data | replace: ",]", "]"%}
<span id="hidden-variant-metafields-container" style="display:none;">{{metafields-data}}</span>
<span id="hidden-current-variant-metafield" style="display:none;"></span>

2. In your JavaScript file (e.g., theme.js), add the following code:

var variantsMetafields = jQuery.parseJSON($("#hidden-variant-metafields-container").html());
variantsMetafields.forEach(function(variantMetafield) {
  if (variantMetafield.variant_id == variant.id) {
    $("#hidden-current-variant-metafield").html(variantMetafield.metafield_value);
    $("#hidden-current-variant-metafield").show();
  }
});

This code parses the JSON data and updates a hidden element with the current variant’s metafield value.

Calculating and Displaying Savings

With the metafield data now accessible in JavaScript, you can calculate and display the savings:

function updateSavings(variant) {
  var months = parseInt($("#hidden-current-variant-metafield").html());
  var savings = (variant.compare_at_price - variant.price) * months;
  // Format savings as currency and update the display
  $("#savings-display").html(formatMoney(savings));
}

Make sure to call this function whenever the selected variant changes.

Troubleshooting Common Issues

Mobile Browser Compatibility

Some users have reported issues with JSON.parse not working on mobile devices, particularly in Safari on iOS. If you encounter this problem, consider using a different parsing method or ensuring your JSON is correctly formatted.

Safari Phone Number Detection

Safari on iOS may automatically detect large numbers (like variant IDs) as phone numbers, causing issues with JavaScript. To prevent this, add the following meta tag to your product page:

<meta name="format-detection" content="telephone=no">

This disables automatic phone number detection and should resolve any related JavaScript errors.

Conclusion

Implementing a dynamic savings display for product variants using metafields can significantly enhance the user experience in your Shopify store. By combining Liquid for initial rendering and JavaScript for dynamic updates, you can create a seamless and informative shopping experience for your customers.

Remember to test your implementation thoroughly across different devices and browsers to ensure consistent functionality. With these techniques, you’ll be able to clearly communicate the value proposition of your product variants, potentially boosting conversions and customer satisfaction.