Customize 'SOLD OUT' label for NEW product pages with inventory

I like what I see with the SOLD OUT labels showing for items no longer in stock. However, I would like to create other labels, such as highlighting NEW items in my inventory. I do not care for the low inventory labels that only show up on mouse over. How 'custom' would this have to be? Thanks in advance.

@tmtradYou need to add custom code to create labels, and this custom code has to be modified for each product. For example, if you want to add new labels to two different products, you will need to modify the custom code for each of those two products.

On 7/3/2024 at 5:02 PM, Lesum said:

@tmtradYou need to add custom code to create labels, and this custom code has to be modified for each product. For example, if you want to add new labels to two different products, you will need to modify the custom code for each of those two products.

Great! Can you share that custom code with me?

You can try this approach.

On 7/6/2024 at 2:35 AM, tuanphan said:

You can try this approach.

 

Question:  Would this Custom CSS go on my shop's Advanced "Page Header Code Injection" section or the more general Custom CSS section? Thanks, again.

You can add it either in the shop's Advanced "Page Header Code Injection" section or in the more general Custom CSS section. If you add it in the Advanced "Page Header Code Injection" section, you need to place the code inside <style></style>

If you need help with the code for Squarespace 7.0, please feel free to share your site URL and let me know which products you would like to add the badges to. Thanks!

16 minutes ago, Lesum said:

You can add it either in the shop's Advanced "Page Header Code Injection" section or in the more general Custom CSS section. If you add it in the Advanced "Page Header Code Injection" section, you need to place the code inside <style></style>

If you need help with the code for Squarespace 7.0, please feel free to share your site URL and let me know which products you would like to add the badges to. Thanks!

Here is the link to the gallery - https://www.focusrelief.com/gallery For the third item (Galapagos Saddle-Backed Giant Tortoise - 002), I would like to add a badge titled NEW

Thank you so much! That worked nicely! I appreciate the timely responses.

Is this CSS solution only for this specific product? Is there a way I can just add the code once and add a "new" tag for each new product?

@tmtrad You just have to change the number of the product in the code. For instance, if you would like to add the badge to the sixth product, add this code followed by a comma in your existing code:

.ProductList-grid .ProductList-item:nth-child(6) .ProductList-outerImageWrapper::before

It should look like this:

.ProductList-grid .ProductList-item:nth-child(3) .ProductList-outerImageWrapper::before, .ProductList-grid .ProductList-item:nth-child(6) .ProductList-outerImageWrapper::before {
    content: 'NEW';
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #737e72;
    color: #fff;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    min-width: 3em;
    min-height: 3em;
    padding: .5em;
    line-height: 1em;
    text-align: center;
    text-indent: .08em;
    letter-spacing: .08em;
}

Oh, I get it. So, it's just one block of CSS code (.ProductList-grid), but if I want the badge on a different product, I need to add that product's position as shown above. Also, if I move that product higher or lower on the page, then the number changes in the CSS. 

Let me know if I got that right.

Thanks, again, for everything.

1 minute ago, tmtrad said:

Oh, I get it. So, it's just one block of CSS code (.ProductList-grid), but if I want the badge on a different product, I need to add that product's position as shown above. Also, if I move that product higher or lower on the page, then the number changes in the CSS. 

Let me know if I got that right.

Thanks, again, for everything.

Yes you got it!

Sam, thanks for all your help. I have a large gallery and like to move things around depending on a number of factors. Is there a different way to assign a badge to a product other than the position number in the grid? LMK

On 7/13/2024 at 10:08 AM, tmtrad said:

Sam, thanks for all your help. I have a large gallery and like to move things around depending on a number of factors. Is there a different way to assign a badge to a product other than the position number in the grid? LMK

For example this product

it has url: https://www.focusrelief.com/gallery/gift-card

so you can use code with this ID: div#thumb-gift-card

div#thumb-gift-card .ProductList-outerImageWrapper::before{
    content: 'Test some';
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #737e72;
    color: #fff;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    min-width: 3em;
    min-height: 3em;
    padding: .5em;
    line-height: 1em;
    text-align: center;
    text-indent: .08em;
    letter-spacing: .08em;
}

Similar this product

it has url: https://www.focusrelief.com/gallery/galapagos-saddle-backed-giant-tortoise-002

so id is: div#thumb-galapagos-saddle-backed-giant-tortoise-002

and the code will be

div#thumb-galapagos-saddle-backed-giant-tortoise-002 .ProductList-outerImageWrapper::before{
    content: 'Test 02';
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #737e72;
    color: #fff;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    min-width: 3em;
    min-height: 3em;
    padding: .5em;
    line-height: 1em;
    text-align: center;
    text-indent: .08em;
    letter-spacing: .08em;
}

5 hours ago, tuanphan said:

For example this product

it has url: https://www.focusrelief.com/gallery/gift-card

so you can use code with this ID: div#thumb-gift-card

div#thumb-gift-card .ProductList-outerImageWrapper::before{
    content: 'Test some';
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #737e72;
    color: #fff;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    min-width: 3em;
    min-height: 3em;
    padding: .5em;
    line-height: 1em;
    text-align: center;
    text-indent: .08em;
    letter-spacing: .08em;
}

Similar this product

it has url: https://www.focusrelief.com/gallery/galapagos-saddle-backed-giant-tortoise-002

so id is: div#thumb-galapagos-saddle-backed-giant-tortoise-002

and the code will be

div#thumb-galapagos-saddle-backed-giant-tortoise-002 .ProductList-outerImageWrapper::before{
    content: 'Test 02';
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #737e72;
    color: #fff;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    min-width: 3em;
    min-height: 3em;
    padding: .5em;
    line-height: 1em;
    text-align: center;
    text-indent: .08em;
    letter-spacing: .08em;
}

Hi, tuanphan. This is very helpful. If I had a series of products with the same badge (new, low stock, etc.), can each product per badge be stacked into the same CSS entry or does each product have to entered separately? If you see the solutions provided by Sam (above), we did this when addressing the position # of the product in the grid. LMK.

On 7/15/2024 at 10:05 PM, tmtrad said:

Hi, tuanphan. This is very helpful. If I had a series of products with the same badge (new, low stock, etc.), can each product per badge be stacked into the same CSS entry or does each product have to entered separately? If you see the solutions provided by Sam (above), we did this when addressing the position # of the product in the grid. LMK.

Yes. You can combine them, like this

div#thumb-galapagos-saddle-backed-giant-tortoise-002 .ProductList-outerImageWrapper::before, div#thumb-gift-card .ProductList-outerImageWrapper::before{
    content: 'Test 02';
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #737e72;
    color: #fff;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    min-width: 3em;
    min-height: 3em;
    padding: .5em;
    line-height: 1em;
    text-align: center;
    text-indent: .08em;
    letter-spacing: .08em;
}

Or you can use Tag

If you have a series of product with same label, you can create a tag, then assign tag for these products then use CSS code like this.

For example, you can create tag: digital then to add digital label, you will use this code

div.tag-digital .ProductList-outerImageWrapper::before{
    content: 'Digital';
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #737e72;
    color: #fff;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    min-width: 3em;
    min-height: 3em;
    padding: .5em;
    line-height: 1em;
    text-align: center;
    text-indent: .08em;
    letter-spacing: .08em;
}