Displaying the current day and time on your Shopify store can enhance the user experience by providing visitors with real-time information. This can be particularly useful for showing your store’s operating hours or countdowns for promotions. Below is a step-by-step guide on how to display the current day and time using Liquid and JavaScript.

Step 1: Edit Your Theme Code

  1. Log in to Your Shopify Admin:
    • Go to your Shopify admin dashboard by logging in at https://yourstore.myshopify.com/admin.
  2. Navigate to Online Store:
    • In the left-hand sidebar, click on "Online Store" to expand the menu.
  3. Select Themes:
    • Under "Online Store," click on "Themes."
  4. Edit Code:
    • In the Themes section, you will see your current theme. Click on "Actions" next to your theme and select "Edit code" from the dropdown menu.

Step 2: Add a Container for the Date and Time

  1. Locate the Section or Template File:
    • Find the section or template file where you want to display the current day and time. For example, to add it to the homepage, look for index.liquid or a relevant section file in the "Sections" folder.
  2. Insert the HTML Container:
    • Add a container (e.g., a div element) with an ID where the current date and time will be displayed. For example: <div id="current-date-time"></div>

Step 3: Add JavaScript for Displaying Date and Time

  1. Locate the JavaScript File:
    • You can add JavaScript directly in the theme file or in a separate JavaScript file. For simplicity, we'll add it directly in the theme file. Scroll down to the bottom of the same file where you added the container.
  2. Insert the JavaScript Code:
    • Add the following JavaScript code to get the current date and time and display it in the container:
<script>
  function updateDateTime() {
    var now = new Date();
    var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    var day = days[now.getDay()];
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0' + minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    var dateTimeString = day + ', ' + strTime;
    
    document.getElementById('current-date-time').innerText = dateTimeString;
  }
  
  updateDateTime();
  setInterval(updateDateTime, 60000); // Update the time every minute
</script>

Step 4: Save Your Changes

  1. Save the File:
    • Click the "Save" button at the top right corner of the code editor to save your changes.

Step 5: Verify the Implementation

  1. Preview Your Store:
    • Go back to your Shopify admin dashboard, click on "Online Store," and then click "Preview" to see your store.
  2. Check the Date and Time:
    • Ensure that the current day and time are displayed correctly in the specified location.

Optional: Styling the Date and Time

You can add CSS to style the date and time display to match your store’s design.

  1. Add CSS in the Theme File:
    • Locate the theme’s CSS file, typically found in the "Assets" folder.
    • Add your CSS styles. For example:
#current-date-time {
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}
  1. Save the CSS File:
    • Click "Save" to apply your styles.

Final Thoughts

By following these steps, you can display the current day and time on your Shopify store, enhancing the user experience with real-time information. This simple yet effective feature can be customized further to fit your store's specific needs and design aesthetics.

Share this article