Jump to content

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

Recommended Posts

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.

Link to comment

@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.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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?

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

You can try this approach.

 

Thank you so much! It looks exactly like what I need! I tried each different combination but it is not working for me. Maybe it is a solution when using 7.1 (I am still in 7.0). I need to preview 7.1 and do UAT before going live, then I will try it again.


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.

Link to comment

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!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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

Link to comment

@tmtrad You can add this code in the more general Custom CSS section:

.ProductList-grid .ProductList-item:nth-child(3) .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;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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.

Link to comment
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!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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

Link to comment
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

image.png.492e55dc50075a41af94050a74026b72.png

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;
}

image.png.7cf2295d73b3e8b88fbbcd884691f1db.png

Similar this product

image.png.4c673029238fce744c516dbf4b09905e.png

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;
}

image.png.01ed1c3bea155f36c32b96bd71702215.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

For example this product

image.png.492e55dc50075a41af94050a74026b72.png

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;
}

image.png.7cf2295d73b3e8b88fbbcd884691f1db.png

Similar this product

image.png.4c673029238fce744c516dbf4b09905e.png

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;
}

image.png.01ed1c3bea155f36c32b96bd71702215.png

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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.