Different JavaScript and HTML depending on Matfield tags

Shopify Plus
, ,

Topic summary

A user created a product metafield with a dropdown to select between “Next day Shipping” and “Standard shipping” and wants to display different countdown timers and shipping information based on this selection.

Solution Provided:

  • Use Liquid templating to check the metafield value on the product template
  • Employ a {% case %} statement to conditionally render different HTML/CSS/JavaScript blocks
  • Access the metafield using product.metafields.YOUR_NAMESPACE.YOUR_KEY.value

Implementation Attempt:
The original poster attempted to implement this using jQuery to toggle display styles (block/none) for elements with class names next_day and standard based on the metafield value. However, the code appears to have formatting issues and isn’t working as expected.

Key Resources:

  • Shopify’s metafield documentation was referenced for working with metafields in Liquid
  • The approach involves combining Liquid logic with JavaScript DOM manipulation to show/hide appropriate shipping countdown timers and messaging
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I created a Metafeild tag on all products with a drop-down to choose “Next day Shipping” or "Standard shipping.

alice__morton_0-1694451857631.png
alice__morton_0-1694451857631.png563×103 10.1 KB

I then have some custom Javascript, HTML and CSS where I want to display different countdowns for shipment depending on whether the products have next-day or standard.

Is it possible to do this?

alice__morton_1-1694451961191.png
alice__morton_1-1694451961191.png476×276 12.9 KB

2

Hey Alice!

Absolutely that is something you can do. As you have create the counter code, I will presume that you have dev experience.

On the product template, you can check to the products metafield value, and render the intended code.

For example:

{% assign shipping_method = product.metafields.YOUR_NAMESPACE.YOUR_KEY.value %}
{% case shipping_method %}
    {% when STANDARD_VALUE %}
        //Standard shipping code
    {% when NEXT_DAT_VALUE %}
        //Next day shipping code
    {% else %}
        //Default if no value is selected
{% endcase %}

Here is the docs for working with metafields in liquid.

Let me know how that goes!

3

Hello, Thank you so much for responding! It’s my first proper try with JS. I’ve tried something using the same format but can’t quite get it to work.


  

Next day Delivery

  

All Travel Systems, Strollers and Car seats are shipped Free Next day delivery.

  

To qualify for UK Next Day Delivery, all you need to do, is order on the Ickle Bubba website before 2pm, Monday-Thursday. 

  

Orders placed after 2pm will be shipped next day with next day shipping.

  

Any orders placed from Friday to Sunday will be shipped Monday with a delivery date of the Tuesday.

  

Standard Delivery

  

All Furniture, Spares, Accessories, and Nursery Items will be shipped as standard delivery.

  

On the Ickle Bubba website orders placed before 2pm, Monday-Thursday will be shipped same day, with 2-3 day shipment time.

  

Any orders places after 2pm will be shipped next day with 2-3 day shipment time.

  

Any orders placed from Friday to Sunday will be shipping Monday with a 2-3 days shipment time.


(function( jQuery ){
{% assign shipping_method = product.metafields.custom.shipping_method.value %}
{% case shipping_method %}
    {% when Standard Delivery %}
      document.getElementsByClassName('standard')[0].style.display = 'block';
      document.getElementsByClassName('next_day')[0].style.display = 'none';
    {% when Next Day Delivery %}
      document.getElementsByClassName('standard')[0].style.display = 'none';
      document.getElementsByClassName('next_day')[0].style.display = 'block';
    {% else %}
        //Default if no value is selected
{% endcase %}

})( window.GemQuery || jQuery );