Displaying "Tomorrow" alongside or instead of the date

Overview

The Delivery Timer for Shopify normally shows dates in the format "Friday, 04 April" even when the delivery date is tomorrow. This guide will show you how to enhance your Delivery Timer by either:

1. Prepending "Tomorrow" - Shows "Tomorrow, Friday, 04 April"
2. Replacing with Tomorrow - Shows just "Tomorrow" instead of the full date
3. Replacing with Tomorrow, Date - Shows "Tomorrow, 04 April"

Installation Steps

Step 1: Create a JavaScript File

1. Go to your Shopify admin panel
2. Navigate to Online Store > Themes
3. Find your current theme and click on Actions > Edit code
4. Scroll to the Assets folder section
5. Click on Add a new asset
6. Select Create a blank file
7. Name it dt_tomorrow.js
8. Paste one of the script options below (choose either Option 1, Option 2 or Option 3)
9. Click Save

Step 2: Add the Script to Your Product Page

1. In the same theme editor, navigate to your product template file:
   • Usually sections/product-template.liquid or templates/product.liquid (depends on your theme)
2. Scroll to the bottom of the file, just before any closing </div> or {% endschema %} tags
3. Add this line of code:

{{ 'dt_tomorrow.js' | asset_url | script_tag }}

    Finally, Click Save

Script Options

Option 1: Prepend "Tomorrow"

This script keeps the original date format and adds "Tomorrow" before it.

// Function to check if a date is tomorrow
function isTomorrow(dateStr) {
  // Extract the date from the string (e.g., "Friday, 04 April")
  const parts = dateStr.split(', ');
  if (parts.length < 2) return false;

  const datePart = parts[1];

  // Create Date objects for today and the delivery date
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() + 1);

  // Format tomorrow's date to match the format used in the delivery timer
  const tomorrowDay = tomorrow.getDate().toString().padStart(2, '0');
  const tomorrowMonth = tomorrow.toLocaleString('en-US', { month: 'long' });

  // Check if the delivery date matches tomorrow's date
  return datePart.includes(`${tomorrowDay} ${tomorrowMonth}`) || 
         datePart.includes(`${tomorrowDay} ${tomorrowMonth.substring(0, 3)}`);
}

// Function to update the delivery date text
function updateDeliveryText() {
  const deliveryDateElements = document.querySelectorAll('.delivery_date');

  deliveryDateElements.forEach(element => {
    const originalText = element.textContent;

    // Only modify if the text doesn't already start with "Tomorrow"
    if (!originalText.includes('Tomorrow') && isTomorrow(originalText)) {
      element.textContent = `Tomorrow, ${originalText}`;
    }
  });
}

// Function to initialize and set up observers
function initTomorrowDelivery() {
  // Try to update immediately in case elements are already loaded
  updateDeliveryText();

  // Set up a MutationObserver to watch for changes to the DOM
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'childList' && 
          (mutation.target.classList.contains('dltimerwrapper__0') || 
           mutation.target.querySelector('.delivery_date'))) {
        updateDeliveryText();
      }
    }
  });

  // Start observing the document with the configured parameters
  observer.observe(document.body, { 
    childList: true, 
    subtree: true 
  });

  // Also set a few timeouts to catch any delayed rendering
  setTimeout(updateDeliveryText, 500);
  setTimeout(updateDeliveryText, 1500);
  setTimeout(updateDeliveryText, 3000);
}

// Run on page load
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initTomorrowDelivery);
} else {
  initTomorrowDelivery();
}

Option 2: Replace with "Tomorrow"

This script completely replaces the date with just "Tomorrow" when applicable.

// Function to check if a date is tomorrow
function isTomorrow(dateStr) {
  // Extract the date from the string (e.g., "Friday, 04 April")
  const parts = dateStr.split(', ');
  if (parts.length < 2) return false;

  const datePart = parts[1];

  // Create Date objects for today and the delivery date
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() + 1);

  // Format tomorrow's date to match the format used in the delivery timer
  const tomorrowDay = tomorrow.getDate().toString().padStart(2, '0');
  const tomorrowMonth = tomorrow.toLocaleString('en-US', { month: 'long' });

  // Check if the delivery date matches tomorrow's date
  return datePart.includes(`${tomorrowDay} ${tomorrowMonth}`) || 
         datePart.includes(`${tomorrowDay} ${tomorrowMonth.substring(0, 3)}`);
}

// Function to update the delivery date text
function updateDeliveryText() {
  const deliveryDateElements = document.querySelectorAll('.delivery_date');

  deliveryDateElements.forEach(element => {
    const originalText = element.textContent;

    // Only modify if the text doesn't already contain "Tomorrow"
    if (!originalText.includes('Tomorrow') && isTomorrow(originalText)) {
      element.textContent = "Tomorrow";
    }
  });
}

// Function to initialize and set up observers
function initTomorrowDelivery() {
  // Try to update immediately in case elements are already loaded
  updateDeliveryText();

  // Set up a MutationObserver to watch for changes to the DOM
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'childList' && 
          (mutation.target.classList.contains('dltimerwrapper__0') || 
           mutation.target.querySelector('.delivery_date'))) {
        updateDeliveryText();
      }
    }
  });

  // Start observing the document with the configured parameters
  observer.observe(document.body, { 
    childList: true, 
    subtree: true 
  });

  // Also set a few timeouts to catch any delayed rendering
  setTimeout(updateDeliveryText, 500);
  setTimeout(updateDeliveryText, 1500);
  setTimeout(updateDeliveryText, 3000);
}

// Run on page load
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initTomorrowDelivery);
} else {
  initTomorrowDelivery();
}

Option 3: Replace with "Tomorrow, Date"

This script  replaces the date with "Tomorrow, DD Month" e.g "Tomorrow, 03 Jan" when applicable.

// Function to check if a date is tomorrow
function isTomorrow(dateStr) {
  // Extract the date from the string (e.g., "Friday, 04 April")
  const parts = dateStr.split(', ');
  if (parts.length < 2) return false;
  
  const datePart = parts[1];
  
  // Create Date objects for today and the delivery date
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() + 1);
  
  // Format tomorrow's date to match the format used in the delivery timer
  const tomorrowDay = tomorrow.getDate().toString().padStart(2, '0');
  const tomorrowMonth = tomorrow.toLocaleString('en-US', { month: 'long' });
  
  // Check if the delivery date matches tomorrow's date
  return datePart.includes(`${tomorrowDay} ${tomorrowMonth}`) || 
         datePart.includes(`${tomorrowDay} ${tomorrowMonth.substring(0, 3)}`);
}


// Function to update the delivery date text
function updateDeliveryText() {
  const deliveryDateElements = document.querySelectorAll('.delivery_date');
  
  deliveryDateElements.forEach(element => {
    const originalText = element.textContent;
    
    // Only modify if the text doesn't already contain "Tomorrow"
    if (!originalText.includes('Tomorrow') && isTomorrow(originalText)) {
      // Extract just the date part (e.g., "04 April") from the original text
      const parts = originalText.split(', ');
      if (parts.length >= 2) {
        const datePart = parts[1];
        element.textContent = `Tomorrow, ${datePart}`;
      }
    }
  });
}


// Function to initialize and set up observers
function initTomorrowDelivery() {
  // Try to update immediately in case elements are already loaded
  updateDeliveryText();
  
  // Set up a MutationObserver to watch for changes to the DOM
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'childList' && 
          (mutation.target.classList.contains('dltimerwrapper__0') || 
           mutation.target.querySelector('.delivery_date'))) {
        updateDeliveryText();
      }
    }
  });
  
  // Start observing the document with the configured parameters
  observer.observe(document.body, { 
    childList: true, 
    subtree: true 
  });
  
  // Also set a few timeouts to catch any delayed rendering
  setTimeout(updateDeliveryText, 500);
  setTimeout(updateDeliveryText, 1500);
  setTimeout(updateDeliveryText, 3000);
}


// Run on page load
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initTomorrowDelivery);
} else {
  initTomorrowDelivery();
}

Troubleshooting

If the script is not working as expected, try the following:

1. Check browser console for errors: Open your browser's developer tools (F12 or right-click > Inspect) and check the Console tab for any JavaScript errors.

2. Verify the script is loading: In the developer tools, go to the Network tab, reload the page, and confirm that dt_tomorrow.js is being loaded.

3. Test your selectors: The script targets elements with the class .delivery_date. Make sure these elements exist on your page by inspecting the DOM.

4. Cache clearing: Your browser or Shopify might be caching old versions of your files. Try clearing your browser cache or adding a version parameter to force a reload:

   {{ 'dt_tomorrow.js?v=1' | asset_url | script_tag }}
   

5. Theme compatibility: If you're using a custom theme, make sure the Delivery Timer app is using the standard class names that this script targets.

Additional Customization

To apply other customizations to the Delivery Timer text, you can modify the updateDeliveryText() function in the script. For example, to change the color of "Tomorrow" text, you could modify the script to use HTML spans with specific styling.

If you need further assistance, please contact our support team.