Shopify Pro Tip: Build a Dynamic Delivery & Booking Calendar Using Metafields and Regex

Tired of manually editing your Shopify theme code every time you need to block a date on your calendar? This common frustration affects any business that uses a date picker:

• Restaurants & Caterers: Managing holiday closures.
• Florists: Blocking dates after peak capacity is reached.
• Salons & Service Providers: Setting staff vacation days.
• Booking Services: Managing unique venue availability.

The traditional approach—editing JavaScript in theme.liquid—is risky, time-consuming, and difficult to manage as a non-developer.

The Better Way: Shop-Wide Metafields with Validation

This guide demonstrates how to leverage a powerhouse combination: Shopify Metafields and Regular Expressions (Regex). This method creates a single, validated list of dates in your Shopify Admin that automatically updates your theme’s calendar, no code required.

Step 1: Create the “Blackout Dates” Metafield Definition

Metafields let you store custom data that standard Shopify fields don’t cover. We will create a field on the Shop object so it’s accessible across your entire site.

1. From your Shopify admin, go to Settings > Custom Data.
2. Click on Shop.
3. Click Add definition in the top right.
4. Configure the definition:
   • Name: Blackout Dates
   • Namespace and key: custom.blackout_dates
   • Description: List of specific dates to be disabled in the delivery date picker. Format must be YYYY-MM-DD (e.g., 2026-12-25).
   • Select content type: Choose Single line text.
   • Check the box for List of values (this lets you add multiple dates).
   • Validation: Check the box for Regular expression and enter: ^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$
5. Click Save.

Why use this specific Regex?

This pattern enforces a strict format (YYYY-MM-DD). It ensures the year is 4 digits, the month is between 01-12, and the day is between 01-31. This prevents typos from breaking your website’s functionality.

Step 2: Add Your Dates to the Shopify Admin

Now that the field exists, you can populate it without touching any code.

1. From your Shopify admin, go to Content > Metafields.
2. Click Shop.
3. Locate “Blackout Dates” and click Add value.
4. Enter your date (e.g., 2026-03-03). Repeat for as many dates as needed.
5. Click Save.

Step 3: Update Your Theme’s JavaScript

The final step is to make your theme’s calendar “read” the data. This is a one-time setup. If you use a library like flatpickr, your configuration should look like this:

// 1. Expose the Shopify Metafield to JavaScript
{% if shop.metafields.custom.blackout_dates != blank %}
  const dynamicBlackoutDates = {{ shop.metafields.custom.blackout_dates.value | json }};
{% else %}
  const dynamicBlackoutDates = [];
{% endif %}

// 2. Use the list in your Flatpickr config
const flatpickrConfig = {
  disable: [
    function(date) {
      const dateString = date.getFullYear() + '-' + 
        ('0' + (date.getMonth() + 1)).slice(-2) + '-' + 
        ('0' + date.getDate()).slice(-2);

      return dynamicBlackoutDates.includes(dateString);
    }
  ]
};
  

Conclusion

By following these steps, you have transformed a manual coding task into an automated, error-proof system. You can now manage your store’s availability on-the-fly, from any device, directly inside the Shopify Admin.