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

Store Design
, ,
1

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!

2

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
3

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?

4

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

5

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?