Skip to content
All Answers
Commerce

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;
}
Generate this with our Products V2 StylerTry it free →

Related Questions

Commerce

How do I change the Add to Cart button style in Squarespace?

Commerce

How do I style the product price in Squarespace?

Commerce

How do I hide the quantity selector on Squarespace product pages?

Commerce

How do I style the product variant dropdown in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →