Skip to content
All Answers
Commerce

How do I style the product price in Squarespace?

Product prices use the .product-price selector in Squarespace 7.1. You can increase the size, change the color, and style sale prices differently from regular prices.

Sale prices typically show the original price with a strikethrough and the sale price in a contrasting color. Squarespace uses .product-price .original-price and .product-price .sale-price for these.

.product-price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Original price (strikethrough during sale) */
.product-price .original-price {
  color: #999 !important;
  font-size: 20px !important;
  text-decoration: line-through;
}

/* Sale price */
.product-price .sale-price {
  color: #e63946 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}
Style your product pages 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 hide the quantity selector on Squarespace product pages?

Commerce

How do I style the product variant dropdown in Squarespace?

Commerce

How do I change the shopping cart icon color 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 →