How to give style to an specific item based in tag or category

For products with status sold out, we added this SOLD medallion at the top right side of the product image (like this one https://www.matthewrachmangallery.com/cowhides/18?rq=TRICOLOR%20GENUINE%20BRAZILIAN%20COWHIDE)

Check here --> https://prnt.sc/pbu6se

We want to add a new status called IN HOLD, however, we could not find an option to add this in the system, we were thinking if it is possible to add in IN HOLD medallion based on the tag or category of an item, for example, if we put "inhold" tag to a certain item then the SOL medallion should be displayed.

Is this possible? if yes, could you point us how to achieve this based on tag or category?

If not, what would you suggest?

@johnreyna i guess some code can. I'm not sure. Can you share site url? I can take a look.

@tuanphan this is the site https://www.matthewrachmangallery.com

Here is a sample of an item where we put the SOLD medallion https://www.matthewrachmangallery.com/cowhides/18?rq=TRICOLOR%20GENUINE%20BRAZILIAN%20COWHIDE

@johnreyna I just checked. Products in a certain category will have the same CSS Class. Can you send a product url (setup tag)? I will try to check if it is correct for the tag?

eg. .category-spotted-tricolor.tag-018.author-martha-morimoto

@tuanphan I added a tag "inhold" to this product

https://www.matthewrachmangallery.com/seating/lawrence-peabody-mid-century-modern-dining-chairs-for-richardson-nemschoff?rq=LAWRENCE%20PEABODY%20FOR%20RICHARDSON%20NEMSCHOFF%20CHAIRS

If not possible by TAG, maybe with a certain text in product description?

@johnreyna Add to Home > Design > Custom CSS. It will add an "inhold" button below Price, for all products belong Inhold tag.

.tag-inhold .sqs-money-native:after {
   content: "Inhold";
   display: block;
   margin-top: 20px;
   width: 70px;
   background: #000;
   color: #fff;
   padding: 10px 20px;
   text-align: center;
   border-radius: 50px;
}

5 minutes

Tuan Phan - Squarespace Developer

@tuanphan can you use this same code for changing the text/color for the price text in a summary block? I want only the $100 to be colored, not the "from"

something like 

.sqs-money-native:after {
text:color:#ffd700;
}

8 hours ago, Meeeee said:

@tuanphan can you use this same code for changing the text/color for the price text in a summary block? I want only the $100 to be colored, not the "from"

something like 

.sqs-money-native:after {
text:color:#ffd700;
}

 

 

.summary-price .sqs-money-native {
	color: red;
}
.summary-price .sqs-money-native:before {
	color: black;
}

thanks again @tuanphan and how do you include the $ sign as well? is that separate?

got it -- the black was the $ sign!

.summary-price .sqs-money-native {
	color: red;
}
.summary-price .sqs-money-native:before {
	color: red;
}