Jump to content

Squarespace 7.1, I changed the background color for the product scarcity that appears below each product in the grid.

Recommended Posts

I wanted my product availability to show similarly to the "sale" tag.  I have my product scarcity show when it is 5 or less in inventory.  I changed the no background to a pink background.  This required me to changed my Sale letter color from Pink to black.  I adjusted the margin and padding to make the color banner look even.  The code below shows those changes.

.white .products.collection-content-wrapper .product-mark.sale {
    color: #000;
.products.collection-content-wrapper .product-scarcity {
    margin-top: 0rem;
.tweak-products-text-alignment-middle .products.collection-content-wrapper .grid-meta-wrapper .grid-meta-status {
    background: #e64c9e;
.products.collection-content-wrapper .product-scarcity {
    padding-bottom: 5px;
    padding-top: 5px;
.products.collection-content-wrapper .product-scarcity {
    text-align: center;


Link to comment
  • Replies 1
  • Views 669
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.