Jump to content

How to change the font color for "Sold Out" text on product page?

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.lisafishcreative.com/

Hello! I would like to customize the 'Sold Out' mark/badge text color style on the product page of my website, specifically for when a size variant is sold out. Color is the most important factor here, however if possible I would also like to change the font to bold.

I'm hoping there is way to edit the 'sold out' label font color to red (#EC1313) without it affecting the 'Size' and 'Quantity' variant label colors. Seems they share the same color (blocks, I believe) as the variant labels.

At the moment, my online shop has a single product listed. The product itself isn't sold out, just the size variant. The Size variant 'Unisex S' is set to '0' quantity.

I've provided 2 separate screen shots to show the product page to which I'm referring.

I am using the York template 7.0 and I've found the only solution may be to customize with custom CSS. I did see a similar question posted, but I'm not sure it is exactly the same situation.

Eventually, I will have color variants for shirts that I will want to apply the same 'Sold Out' styling. However, it may be that I have to choose one variant over the other, unless it is possible to apply to both. Unless someone straight up tells me it's not possible!

I appreciate any help, thank you!

sold-out.png

sold-out-size-quantity.png

Link to comment
10 hours ago, lisaf13 said:

I'm hoping there is way to edit the 'sold out' label font color to red (#EC1313) without it affecting the 'Size' and 'Quantity' variant label colors. The Size variant 'Unisex S' is set to '0' quantity.

When I checked the S variant, it wasn't out of stock and so I couldn't see the label.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • Solution

First remove the setting that you've used to make more than one item appear red and then, if you only want to affect the variant out of stock label, add some Custom CSS like this example: 

.ProductItem-details .variant-out-of-stock {
    font-weight: bold;
    color: red;
    font-size: 1.1em;
}

605695626_Screenshot2022-03-30at17_23_11.png.1f5d95873f52db2fb5df15615cc2227e.png

You can remove any lines that you don't require (the weight, color or size).

Did this help? Please give feedback by clicking an icon below  ⬇️

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

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.