How do I style the sale badge on Squarespace products?

The sale badge on Squarespace 7.1 product items uses the .product-mark.sale class. You can restyle it from the default red label into any shape, color, or position you want.

This works on both the product detail page and the product grid summary items. Target .ProductList-filter-list-item .product-mark.sale for grid-level badges specifically.

.product-mark.sale {
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 20px;
}