Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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



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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...