Skip to content

Shopify Dude Fix

Why Doesn’t JavaScript Work in Shopify Notification Emails?

Shopify notification emails support Liquid for rendering content, not browser JavaScript. Use Liquid conditions or link customers to an interactive page.

Quick answer: Email clients strip or block JavaScript. Shopify notification templates can use Liquid to render dynamic content before the email is sent, but the resulting email should be static HTML and CSS.

The real symptom

  • A script pasted into an order confirmation never runs.
  • A button, countdown, dynamic price, or tracking widget works on the storefront but not in email.
  • Liquid renders, but browser APIs and DOM events do nothing.
  • The merchant wants customers to interact inside the email.

Likely causes

  • Most email clients block JavaScript for security.
  • Notification Liquid runs server-side before the email is delivered.
  • Email HTML support is much more limited than theme HTML.
  • Interactive behavior belongs on a storefront, account, order-status, or app page.

Fix path

  1. Replace client-side logic with Liquid conditions where possible.
  2. Move interactive behavior to a linked page.
  3. Keep notification markup simple and table-friendly when needed.
  4. Preview and send test notifications before relying on custom HTML.
  5. Use Shopify Flow or an app for post-order workflows that require logic after send time.

Simple checks

  • Test in Gmail, Apple Mail, Outlook, and mobile clients.
  • Use Liquid to render the value, not JavaScript to calculate it later.
  • Avoid external scripts, form submissions, and unsupported CSS.

Useful code or DevTools check

{% if order.total_price > 10000 %}
  <p>Thanks for your large order. We will review it shortly.</p>
{% endif %}

Do not do this

Do not paste storefront widgets or analytics scripts into notification templates and expect them to run in inboxes.

Sources