Jump to content

Product overlay issue!

Recommended Posts

Site URL: https://www.fidemfishers.com/all-clothing

Hello all,

I cant figure out how to match the font of "sold out" on top of products to the squarespace Acumin font of product name.

There should also be a white bar going across the middle of the product to highlight "sold out", its showing up on my css but not when I view the page by going to the site.

Thank you for any help!


/* Sold Out overlay */
.post-type-store-item.sold-out .grid-image:before {
  content: 'SOLD OUT';
  font-family: ;;;;;
  font-weight: thin;
  color: #000;
  font-size: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
.post-type-store-item.sold-out .grid-image:after {
  content: '';
  width: 100%;
  height: 10%;
  position: absolute;
  top: 45%;
  left: ;
  background: #ffff;
  opacity: 0.4

.post-type-store-item.sold-out .product-mark.sold-out {
  display: none;

Screen Shot 2022-02-24 at 6.19.54 PM.png

Screen Shot 2022-02-24 at 6.21.07 PM.png

Link to comment
  • Replies 2
  • Views 290
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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

  • 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.