Jump to content

Change "Sold Out" design

Go to solution Solved by tuanphan,

Recommended Posts

I don't like how the "Sold Out"  tag is displayed.  It is shown with small caps and a brown color. I want it like I've written it (the S and the O as capitals, and the rest lowercase), in italic and white color.

I also don't like how it's on the very right of the image, making it too close to the next product's name. I'd like to have it next to the product's name, like this:

Futur solitari    Sold Out

Can I do both changes?

Captura de pantalla 2022-11-12 a les 14.18.22.png

Captura de pantalla 2022-11-12 a les 14.19.01.png

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...


I want the "sold out" to be LOWERCASE or SENTENCE CASE. I've tried your code, putting lowercase

On 11/21/2022 at 6:34 AM, tuanphan said:

#1. Add to Design > Custom CSS

.product-mark.sold-out {
    text-transform: uppercase;


but it doesn't change. And as i have shown in my previous screenshot, i've marked the lowercase option. So basically, although i have the lowercase design option and your code, it somehow still shows up in uppercase.


On 11/21/2022 at 6:34 AM, tuanphan said:

#2. Move it to after name like this?


Yes! That would be ideal!! 

Could it look like that only in desktop version? And in mobile version leave it as it is now in the right corner?

Edited by mireiamireia
Link to comment
  • Solution

#1. If lowercase, you need to use this code

.product-mark.sold-out {
    text-transform: lowercase !important;

#2. Use this CSS

@media screen and (min-width:768px) {
.product-mark.sold-out {
    display: none;
.sold-out .grid-title:after {
    content: "sold out";
    font-family: IM Fell English;
    font-weight: bold;
    font-style: italic;
    letter-spacing: .01em;
    text-transform: lowercase;
    line-height: .5em;
    color: gray;


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.