(Squarespace) Add an message when Product Page is empty

[tuanphan]

To add a custom message when there are no products in the Product Page. Like this.

You can use this code to Custom CSS
If code doesn’t work, you can comment below, message or send me an email.

div.list-grid:not(:has(.grid-item)) {
    position: relative;
}
 div.list-grid:not(:has(.grid-item)):before {
    content: "Coming Soon";
    font-size: 30px;
    display: block;
    text-align: center;
    color: #000;
  }

Change text, text style here.

If you want to apply it on a specific Product page only. First find Product Page ID.

In my example, it is: #collection-67b562fedf9c422667881c3c

Next, use this new CSS code.

#collection-67b562fedf9c422667881c3c {
div.list-grid:not(:has(.grid-item)) {
    position: relative;
}
 div.list-grid:not(:has(.grid-item)):before {
    content: "Coming Soon";
    font-size: 30px;
    display: block;
    text-align: center;
    color: #000;
  }}

[romano97002 (Romano LAPINCE)]

@tuanphan;