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:
how can I reduce the space under the badge here:
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!
