How to add a "sold out" badge on top of portfolio simple grid images?

I'm looking to add a "sold out" badge to a few of my portfolio grid images like I've done on my homepage by just using overlapping text and image blocks:

I need to add the same or similar looking badges to my "workshops" page portfolio grid images:

Any ideas on how I can achieve this?

My site is: https://heron-crow-84yj.squarespace.com/

Password: 7rHL331g

Have you experimented with using a Store page and a Summary block?

The nice thing about a Store page is it has the product mark (sold out) already built-in and will self-maintain when you manipulate the stock levels.

The only question is can you alter the look of the Store page and Summary blocks with custom code to get the pleasing visual result. For your use case you'd probably want to hide some of the more commercy bits. One downside I can see is that the product details page is a bit less free form that a portfolio page. But you wouldn't know if that is a problem until you give it a go.

A downside is that a Business plan is the next level up from Personal.

Down the road you may find the commerce bits useful and you'd be ready to roll by show the bits you had hidden.

If you do give it a go, just add one or two products in and work on the formatting. Then if it goes well, add the rest.

17 hours ago, tuanphan said:

If you want to add Sold Out to first - second products only, add this to Design > Custom CSS

a.grid-item[href*="/norway2023"]:before {
    content: "Sold out";
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 9999;
    background-color: white;
    font-family: chauncy-pro;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .08em;
}
a.grid-item {
    position: relative;
}

@tuanphan Amazing! Thank you! How do I go about adding it to each individual grid item for future use?

*EDIT* I figured it out

On 12/26/2022 at 7:43 PM, creedon said:

Have you experimented with using a Store page and a Summary block?

The nice thing about a Store page is it has the product mark (sold out) already built-in and will self-maintain when you manipulate the stock levels.

The only question is can you alter the look of the Store page and Summary blocks with custom code to get the pleasing visual result. For your use case you'd probably want to hide some of the more commercy bits. One downside I can see is that the product details page is a bit less free form that a portfolio page. But you wouldn't know if that is a problem until you give it a go.

A downside is that a Business plan is the next level up from Personal.

Down the road you may find the commerce bits useful and you'd be ready to roll by show the bits you had hidden.

If you do give it a go, just add one or two products in and work on the formatting. Then if it goes well, add the rest.

@creedon Yeah, I've played around with the store/products, and it just doesn't give me the design tools that I need for my workshop pages unfortunately. Thanks for the suggestion though!