How to style “sold out” and “limited availability” badges on product cards in SquareSpace

The problem

Sold Out and Limited Availability badges on product cards could have better styles. Enable them first.

The solution

We’ll add a badge that will signify the product is sold out. You can replace Sold out with e.g. Coming soon. Adjust other styles as needed.

Add the following code to Pages › Website Tools › Custom CSS:

/* code by opsqs.com */

/* Both sold out & limited */
.products-list .product-mark.sold-out,
.products-list .product-scarcity {
  
  display: inline-block;
  margin: 0 !important;
  box-sizing: border-box;	
  text-align: left;
  max-width: 80%;
  
  /* text */
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: white !important;
  font-weight: bold !important;
  text-transform: uppercase !important;

  /* position */
  position: absolute;
  top:8px;
  left: 8px;
  
  /* Extra */
  padding: 2px 4px;
  border-radius: 2px;
}

/* Sold out */
.products-list .product-mark.sold-out {
   background: darkred;
}

/* Limited */
.products-list .product-scarcity {
  background: black;
}

In the first part, we normalize the styles for both badges and move them to the top left corner. Next we can style them separately. Use !important if needed.