Filter and Content not valid on CSS

Technical Q&A
,
1

Hello,

i use the Dawn theme, i want to use the blur and content function in the custom css for only 1 collection product.

But when i add this code:

.card__media::before {
  content: "NSFW";
  position: absolute;
  top: 10px;
  left: -40px;
  width: 140px;
  padding: 5px 0;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  transform: rotate(-45deg);
  pointer-events: none;
  user-select: none;
  z-index: 10;
  border-radius: 4px;
}
.card__media {

  filter: blur(6px) !important;
}

i have an error message: “content and filter not valid”

I prefer to don’t use the source code, but only the custom css.

Thank you for your help :wink:

2

I had the same issue before — the trick is to scope the CSS so it only applies to the collection you want. Shopify adds a collection-<handle> class to the <body>, so you can target it like this:

body.collection-yourhandle .card__media::before {
  content: "NSFW";
  position: absolute;
  top: 10px;
  left: -40px;
  width: 140px;
  padding: 5px 0;
  background: rgba(255, 0, 0, 0.7);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  transform: rotate(-45deg);
  pointer-events: none;
  user-select: none;
  z-index: 10;
  border-radius: 4px;
}

body.collection-yourhandle .card__media {
  filter: blur(6px) !important;
}

Just replace yourhandle with your collection’s handle (for example, if your collection URL is /collections/nsfw, the handle is nsfw).

3

Thank you for your message!

I have try it:

Capture d’écran 2025-09-15 180040
Capture d’écran 2025-09-15 180040908×1554 139 KB

My collection is “New Arrivals”, in the url it’s like this: /collections/new-arrivals
I have replace with “new-arrivals”, i don’t know if i’m good but I have the same error message “content and filter not available”.

4

I have just try a test, the same code:

.card__media {

filter: blur(6px) !important;

}

but instead of card media I rpelace it by any texte or title and it work, the text is blur and i don’t have error of blur not valide this time

5

Sorry I don’t get this ?

6

Don’t worry, thank you for trying :wink:

7

Hi @Julianinho,

Please send the website link, I will check it for you

8

Here the link: https://anime3dshop.myshopify.com
For the moment i have just put an opacity on the new arrivals collection (4 pictures on the top of website), but it’s not as good as with blur.
It’s an adult shop.

Thank you for yout help!

9

Hi @Julianinho,

You can remove the code ‘opacity: 0.2 !important;’ and then add the following code:

#shopify-section-template--26301786652997__704e0028-6f9d-4896-bea9-6e10ff5ffe6e .card--standard .card__inner:after {
    content: "NSFW";
    background: rgba(255, 0, 0, 0.7) !important;
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
    user-select: none;
    z-index: 10;
    border-radius: 4px;
    filter: blur(6px);
    mix-blend-mode: normal !important;
}

If I helped you, then a Like would be truly appreciated.

10

Hello,

Great, I will try this now and come back soon!

Thank you

11

i have try it, i have a message error “css fix error”.
But with your code I have find an alternative, with the liquid code, if i add this one it work:

<div style="display: none;">
  <style>
  #shopify-section-template--26301786652997__704e0028-6f9d-4896-bea9-6e10ff5ffe6e .card--standard .card__inner {
    position: relative !important;
    filter: blur(4px) !important;
  }

  #shopify-section-template--26301786652997__704e0028-6f9d-4896-bea9-6e10ff5ffe6e .card--standard .card__inner::after {
    content: 'NSFW' !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    display: block !important;
    width: 60px !important;
    height: 20px !important;
    background: rgba(255, 0, 0, 0.8) !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 20px !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 10 !important;
    border-radius: 3px !important;
    transform: rotate(-45deg) !important;
  }
  </style>
</div>

Thank you for your help :wink:

12

Hi @Julianinho,

If you use the Custom Liquid section, you can remove the

Refer code:

<style>
  #shopify-section-template--26301786652997__704e0028-6f9d-4896-bea9-6e10ff5ffe6e .card--standard .card__inner {
    position: relative !important;
    filter: blur(4px) !important;
  }

  #shopify-section-template--26301786652997__704e0028-6f9d-4896-bea9-6e10ff5ffe6e .card--standard .card__inner::after {
    content: 'NSFW' !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    display: block !important;
    width: 60px !important;
    height: 20px !important;
    background: rgba(255, 0, 0, 0.8) !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 20px !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 10 !important;
    border-radius: 3px !important;
    transform: rotate(-45deg) !important;
  }
  </style>

Or you can also go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file.

13

Ok, thank you!

It work welll.

14

Hi @Julianinho,

It’s my pleasure :blush: