DEV Community

Cover image for Halloween effects on Shopify, WordPress, Wix and Webflow without touching a theme
Iurii Rogulia
Iurii Rogulia

Posted on

Halloween effects on Shopify, WordPress, Wix and Webflow without touching a theme

#webdev #javascript #css #halloween

Most Halloween decoration scripts assume you can edit your <body> tag. On site builders you usually can't, and a script that does document.body.classList.add(...) in the <head> throws, because the body doesn't exist yet.

I ran into this while writing the install guides for halloween.js, a small library that draws spider webs in the corners of the page, blinking eyes, a flying witch, a dropping spider and a tombstone. It is MIT licensed, has no dependencies and weighs about 9 KB gzipped.

The library is switched on by a halloween class on <body>. So the one thing every platform needs is a way to add that class after the page has loaded. This is the snippet I ended up with:

<script src="https://cdn.jsdelivr.net/npm/halloween.js@1.0.3/dist/halloween.iife.js"></script>
<script>
(function () {
  function apply() {
    document.body.classList.add("halloween", "halloween-screen-left-top", "halloween-screen-right-bottom", "halloween-eyes", "halloween-witches", "halloween-spider-drop", "halloween-tombstones");
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", apply);
  } else {
    apply();
  }
})();
</script>
Enter fullscreen mode Exit fullscreen mode

The readyState check is what makes it location-independent. In a head field the script waits for DOMContentLoaded. In a footer field, or when Google Tag Manager injects it after the page has loaded, it runs immediately. It adds classes instead of replacing the class attribute, so the classes your theme already puts on <body> stay.

Where it goes

  • WordPress and WooCommerce: a header/footer code plugin, footer field.
  • Shopify: theme.liquid, just above </body>.
  • Webflow: Site settings, Custom code, Footer code. Custom code only runs on the published site, not in the Designer.
  • Wix: Settings, Advanced, Custom Code, placed in "Body - end".
  • Squarespace: Code Injection, Footer.
  • Tilda: a T123 (Embed HTML Code) block on the page.
  • Ghost: Settings, Advanced, Code injection, Site footer.
  • Blogger: Theme, Edit HTML, above </body>.
  • Google Tag Manager: a Custom HTML tag on All Pages.
  • Framer: Site Settings, Custom Code, end of body (paid site plan).

Each platform has its own page with the exact menu path: halloween.js.org/wordpress/, /shopify/, /wix/ and so on.

The season window

The effects only run between 18 October and 2 November by default. You can leave the snippet on the site all year and it does nothing outside the window. Start and end dates are configurable, and ambient effects stop for visitors with prefers-reduced-motion turned on.

Changing what appears

The playground on the site lets you pick corners, effects, intensity, color and dates, with a live preview. Its "Paste-only" tab produces this whole snippet with your choices.

If something doesn't work on your platform, open an issue on GitHub. Platform menus change often and I can only check what I've seen.

Top comments (0)