Jump to content

Modifying SOLD OUT and SALE labels

Recommended Posts

Site URL: https://www.judithandrolfe.com/fine-art


I need some help trying to figure out some custom CSS. At the moment, the SALE and SOLD labels look identical (white font in black square). I would like to change one of the tags to have a different background color so that the difference is immediately obvious (for eg. changing the SALE background to red) Got to the .product-mark tag, but can't figure out how to change one but not the other.

Thanks in advance for the help.

Screen Shot .png

Link to comment

Hi @judith1570048218,

You can target them individually by their additional classes.


So for example, try adding this code within Design > Custom CSS:

/*This targets any elements with BOTH the .product-mark and .sold-out classes.*/

With this expected result:


Presumably, there'd be a comparable class for products on sale, likely .sale or .on-sale, but I can't find anything currently on sale within your site.

Hope this helps!

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

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.