Integrate Grained.JS into Shopify (Whole page)

Technical Q&A

Topic summary

A developer is attempting to integrate Grained.js (a JavaScript library that adds grain/noise texture effects) across an entire Shopify site.

Technical Challenge:

  • Grained.js typically targets specific div IDs, but applying it to the whole page requires targeting the body tag
  • Uncertainty about how to properly add an ID to the body tag in Shopify’s structure

Issues Encountered:

  • When applied to MainContent, the grain effect appears behind the content rather than overlaying it
  • Grained uses a ::before pseudo-element which may be causing layering problems
  • The implementation disables all clickable links on the page

Seeking Solutions:

  • Looking for alternative CSS-based approaches to achieve the same grain/noise effect
  • Reference example provided: https://godaytrip.com

The thread remains unresolved, with one follow-up asking if the original poster found a solution.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hello,

We’re looking at adding grained.js into our site. We want it to add noise over the whole page.

This runs on an ID of a div etc - But I’m guessing for the whole site we’d have to use the Body tag? But how do we add an ID to the Body to act like a div does with this?

Example of noise - https://godaytrip.com

Or if anyone knows of any other ways to do this using CSS etc.

Believe ‘Grained’ uses a ::before tag but when adding this to the MainContent it goes behind the content and when adding above, it disables all links etc.

Thanks for any help!

2

Did you ever figure this out?