How to change colour and size of sold out tag

[AntiqueStore]

Hello,

I'm using Testament theme.  I was wondering if there is a way to change the colour of the circle that says "Sold Out" on products to red and maybe make it a bit bigger?  If I can only change the colour I guess that would be better than nothing.  I just don't think it shows up very well.  Thank you to anyone who can take the time to help.

My store is  https://www.yvonnesandersantiques.com

[BSSCommerce-HDL]

Hi @AntiqueStore, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

.so.icn.circle_icon {
    background-color: red !important;
    width: 60px !important;
    height: 60px !important;
    font-size: 15px !important;
    line-height: 1;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[AntiqueStore]

Hi,  thank you for trying to help me.  I like the way your result picture looks.  However, I can't find any of those things to search for in your second point.  I can find theme.liquid  ,  would that be the right place?  

[BSSCommerce-HDL · Accepted solution]

Hi @AntiqueStore, You can try again with these steps:
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Find file theme.liquid
Step 3: Insert this code above </head> tag: 

<style>
   .so.icn.circle_icon {
    background-color: red !important;
    width: 60px !important;
    height: 60px !important;
    font-size: 15px !important;
    line-height: 1;
   }
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[AntiqueStore]

Thank you so much.  Your solution worked for me!  I appreciate your time helping with this. 

[BSSCommerce-HDL]

 @AntiqueStore, No problem, Have a good day 😍

[PageFly-Richard]

Hi @AntiqueStore 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.so.icn.circle_icon {
    background-color: red !important;
    width: 60px !important;
    height: 60px !important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly