floradouville

Wonderful! Thank you @SaranyaDesigns, it all works. I adjusted where required and it's perfect!

Hello there!

I want to add a badge on product pages for products with a specific tag.

I was able to add a 'coming soon' badge to all products on the main shop page, now it would be nice to also display a badge on the product page to make it clear.

The main shop page: https://www.kivi-jewelry.com/shop

One example of a page I want to display a 'coming soon' badge: https://www.kivi-jewelry.com/shop/p/liivarebane

And I would like the tag to like the 'sold out' tag on this page: https://www.kivi-jewelry.com/shop/p/test

And here is the CSS code I have put so far:

//GENERAL FOR BADGES
.products.collection-content-wrapper .product-mark {
    text-transform: none;
    font-weight: 500;
    font-size: 14px;
}

//COMING SOON
// Add a badge "coming soon" on products on main shop page 
.product-mark.sf-nouveau {
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 0.5);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    margin-top: 1.5rem;
    color: #443f41;
    letter-spacing: 1.5px;
  }
// Hide Add to Cart button when product is coming soon
.tag-nouveau .ProductItem-details .sqs-add-to-cart-button {
  display: none !important;
}

// Add a badge "coming soon" on products on product page???


//SOLD OUT
// Add a badge "sold out" on products on main shop page
.view-list .product-mark.sold-out {
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 0.5) !important;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    margin-top: 1.5rem;
    color: #443f41 !important;
    letter-spacing: 1.5px;
}

// Add a badge "sold out" on products on product page
.view-item .product-mark.sold-out {
    background: #fff !important;
    color: #443f41 !important;
    letter-spacing: 1.5px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: inline-block !important;
    font-size: 18px;
}

// Hide price on main shop page page when product is sold out
.sold-out .product-price {
  display: none !important;
}

// Hide price on product page when product is sold out
.sold-out .ProductItem-details .product-price, .sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

// Hide Add to Cart button when product is sold out
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

Also, 2 other minor queries:

1. how can I reduce the space under the badge here:
   
    
2. how can I reduce the space above the lower bit of text here: 
   

Can anyone help me?
By the way this community is amazing, I have found so many answers in this forum today 😍

Thank you!