How to change the font for "Sold"

Site URL: http://www.AntoineArt.com

I would like to change the font/size for the word "sold" on sold out products.  Example: https://www.antoineart.com/isolation-paintings/isolation-116-1

I understand how I can change the text but can't find the option to change the font/size under design styles. 
Thank you!

I'm guessing the lack of response may mean it's not possible?

@AntoineArt yes this can be done in Site Styles.  Open the page that has a sold out product.  Then go back to home.  Click on Design then Site Styles.  Then click directly on a product that is sold-out.  On the left it should then show only the styles that can be edited for that type of product specifically.  Scroll down to the bottom, you should see a section titled Products: Status Badges.  You can then customize everything for your Sold-Out tag.  Including shape, color, and font.  Hope I helped you.

I'm sorry I didn't reply. I didn't get a notification - I just changed my settings  so hopefully next time I will.

Yes, "Products: Status Badges" is exactly what I'm looking for. I followed your directions. Under design I have "Products: Layout".. "Products: Gallery"... "Products: Details"... but no "Products: Status Badges"  However now knowing what term I need to look for already puts me on the right track. I read that it is available for Brine (I'm using, Mercer part of the Brine fam). I'll contact customer support to help me figure out what I'm missing.

Thanks again!

I am trying to do the same thing, but also do not see "Products: Status Badges" in the Site Styles sheet.  I'm on the Bedford template . . . is it supposed to be there?

I haven't had any luck either.

Add to Home > Design > Custom CSS

.product-mark.sold-out {
    font-size: 20px !important;
    color: red !important;
}

4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.product-mark.sold-out {
    font-size: 20px !important;
    color: red !important;
}

 

Thank you, that was very helpful! 

11 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.product-mark.sold-out {
    font-size: 20px !important;
    color: red !important;
}

 

Thank you!!

Hi everyone

Thanks for this thread - I couldn't find the Status badge tweaks either. The key, I think, is having the product gallery open in your design editor, not just a single product page. If the product gallery page is open, the list of status badges design tweaks appears in your design menu. For me it was right at the bottom.

I think that's what solved it..!

Hope this helps someone, it was an 'a ha!' moment for me after much searching and getting frustrated!

On 5/19/2020 at 6:07 AM, tuanphan said:

Add to Home > Design > Custom CSS

.product-mark.sold-out {
    font-size: 20px !important;
    color: red !important;
}

 

I used this CSS but tweaked it! Here's my version 🙂 Thanks for giving me the blueprint. 

.product-mark.sold-out {
    font-size: 11px !important;
    color: white !important;
}