Adding a Grain Effect to Different Themes

Shopify Discussion
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 { position: fixed; height: 100%; width: 100%; pointer-events: none; background: url(/cdn/shop/files/grain_fg.gif?v=1617133611); opacity: .15; z-index: 99999999999999999999999999999999999999; }

above the tag and pasting

after the tag per the recommendation of my last post’s solution but this seems to only work on the “Simple” theme and not the other themes I’ve tried it on such as Minimal, Taste, or Ride. Please advise.

Bonus if you can let me know if it’s possible to only have the grain effect as a background color overlay instead of covering the entirety of the website including the product images, text, and menu items/logo

2

Your url isn’t working. url is not getting the gif.

3

How do I get it to recognize the gif? I tried an alternate url, (https://cdn.shopify.com/s/files/1/0564/7617/2332/files/GrainBackround.gif?v=1667804647), but that wasn’t working either.

4

almost there just add below code to .grain class

.grain {
    position: fixed;
    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: .15;
    z-index: 99999999999999999999999999999999999999;
    display: block !important;
}
5

Hey, @GAGORDER

I’m confident one of our Shopify experts would be able to help accomplish this at a reasonable price. Sharing this as an option in case you are unable to find a coding solution in this thread.

If there is anything else I can help you with, please let me know.

6

Awesome man that solved it, thank you! I’ve read before that the !important rule could cause errors down the road, is there anything I should be mindful of when using it or should using it for just this instance be okay?

7

In this case, you are completely in the safe zone. Nothing to worry but don’t use it usually.