How to add a grain effect on my website's background?

My shop is Shopgagorder.com

I’m trying to achieve a grain affect similar to this website, https://sosmula.us/pages/web-store-closed

Here is another example, https://burmamfg.com/collections/store

I’ve tried copying and pasting the code

.grain {

height: 100%;

width: 100%;

pointer-events: none;

background: url(https://cdn.shopify.com/s/files/1/0564/7617/2332/files/GrainBackround.gif?v=1667804647);

opacity: 0;

z-index:99999999999999999999999999999999999999

}

into the "Custom CSS’ section under my theme settings but it did not do anything. I also tried pasting it into the theme.scss.liquid section to no avail. I clearly have no idea what I’m doing. I’d like to imagine this should be a fairly easy request.

Thank you in advance!

Hi @GAGORDER

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the file above tag

  1. Add the following code in the file after tag

1 Like

That’s what’s up, thank you! Do you know if it is possible to push the grain effect to the background instead of the foreground so it doesn’t cover the text & product images?

Hey, I’m usinge the Ride-Theme and did exactly what you described but it does not work unfortunately.. :thinking:

How did you get this to work? did you directly copy and paste or does in need to be lined up (tabbed in) within the code?