Jump to content

How to add circle "sold out" sign as a sticker on a product photo

By shipanna, in Customize with code

Go to solution Solved by paul2009,

Recommended Posts

shipanna Level 4

shipanna

Posted
Posted

Hi there! Need help with changing SOLD OUT from being written under the product to be a square or rectangle sticker on the photo. 

Tried a few custom CSS from the forum but nothing worked.

The first photo is what I have right now. Second and third is what I want. 

 

My website - https://annashipulina.com/

Thank you!

Screen Shot 2024-02-11 at 12.50.29 PM.png

Screen Shot 2024-02-11 at 12.52.30 PM.png

Screen Shot 2024-02-11 at 12.53.00 PM.png

  • Replies 3
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009
paul2009

Hi @shipanna 👋. I'm not exactly sure what you mean when you say you'd like the "second and third" examples. Are you looking for a combination of different features? To get you started, you c

paul2009
paul2009

Yes, sure. You can change the colour of the caption by changing the "color" line. For example, black to white. You can remove the background by removing the "background-color" line. The font

Posted Images

  • Solution
paul2009 Level 18

paul2009

Posted
  • Solution
Posted (edited)
2 hours ago, shipanna said:

Need help with changing SOLD OUT from being written under the product to be a square or rectangle sticker on the photo. 

The first photo is what I have right now. Second and third is what I want. 

Hi @shipanna 👋.

I'm not exactly sure what you mean when you say you'd like the "second and third" examples. Are you looking for a combination of different features?

To get you started, you can achieve rectangular badges on the images, with something like this: 

/* Rectangular Sold Out Badge */
/* on Product Images (v7.1)   */
.grid-meta-status .product-mark.sold-out {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--tweak-product-grid-text-below-list-status-color);
    color: black !important;
    padding: 6px 7px;
}

image.thumb.png.c8521b23032c69e5eb3e7f504790b22d.png

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

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

shipanna Level 4

shipanna

Posted
  • Author
Posted

Thank you so much Paul! 

That's what I was looking for. Ss it possible to modify the way it looks?

I would like just the letters SOLD OUT in white without the rectangle. Not bold and more delicate.  

This is an example. Thank you!

IMG_2309.JPG

paul2009 Level 18

paul2009

Posted
Posted (edited)
27 minutes ago, shipanna said:

Is it possible to modify the way it looks?

Yes, sure. You can change the colour of the caption by changing the "color" line. For example, black to white.

You can remove the background by removing the "background-color" line.

The font family and style are defined in your Site Styles panel but you could override them by specifying a font-family or a font-style.

Do post back if you need more help 🙂.

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

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources