[Share] Product Custom Badges

(This for 7.1. I haven't tested with 7.0 yet)

Suppose we need to create 3 custom badges: Books, Digital, Bike on Products on Store/Category Pages

First you need to create 3 tags: Books, Digital, Bike and assign them on products

Next, add this code into Design > Custom CSS

/* Badge: Books */
.tag-books:after {
    content: "Books";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #f1f2f3;
    padding-left: 10px;
    padding-right: 10px;
    color: red;
    font-weight: 600;
    font-size: 14px;
}
/* Badge: Digital */
.tag-digital:after {
    content: "Digital";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: violet;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    font-weight: 600;
    font-size: 14px;
}
/* Badge: Bike */
.tag-bike:after {
    content: "Bike";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #000;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

You can do similar for other badges.

Result

Hi @tuanphan thank you so much for this post.

I tried in my customm css but it didnt work for some reason.

This is my shop page: https://www.gastonduflos.com/shop

I've crated the tags: Sold out, New, Limited availability 

14 minutes ago, GastonDuflos said:

Hi @tuanphan thank you so much for this post.

I tried in my customm css but it didnt work for some reason.

This is my shop page: https://www.gastonduflos.com/shop

I've crated the tags: Sold out, New, Limited availability 

You haven't rename tag name in the example code yet. Use this

.tag-limited-availability:after {
    content: "LIMITED AVAILABILITY";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #f1f2f3;
    padding-left: 10px;
    padding-right: 10px;
    color: red;
    font-weight: 600;
    font-size: 14px
}

.tag-sold-out:after {
    content: "SOLD OUT";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: violet;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 14px
}

.tag-new:after {
    content: "New";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #000;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 14px
}

Note: If a product has 2 tags, the code will conflict together

thanks @tuanphan now it works perfect! I just wondering if can the position be changed like the attached image here? Problem with the code is that in phone, the badge is overlapping the image. 

On 5/13/2023 at 10:14 AM, GastonDuflos said:

thanks @tuanphan now it works perfect! I just wondering if can the position be changed like the attached image here? Problem with the code is that in phone, the badge is overlapping the image. 

DO this position on mobile only or both desktop + mobile?

I would love to see how it looks in both @tuanphan is it possible? thank you so much, you're a legend!

For example: Tag New

Change current code

.tag-new:after {
    content: "New";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #a0cc49;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

to this new code

.tag-new .grid-meta-wrapper:before {
    content: "New";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #a0cc49;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}
div.tag-new section.grid-meta-wrapper {
    position: relative;
    padding-top: 30px;
    margin: 0 !important;
}

Hi @tuanphan thank you so much, this worked perfect! 

I now would like to edit the badge once inside the product page. Its showing the badge on the right upper corner of the page. Can we move it somewhere else? Maybe on top of the image? Or under the price? Thank you so much!

Page: https://www.gastonduflos.com/shop/p/sea-of-dreams

On 7/19/2023 at 5:13 PM, GastonDuflos said:

Hi @tuanphan thank you so much, this worked perfect! 

I now would like to edit the badge once inside the product page. Its showing the badge on the right upper corner of the page. Can we move it somewhere else? Maybe on top of the image? Or under the price? Thank you so much!

 

Page: https://www.gastonduflos.com/shop/p/sea-of-dreams

 

Use this CSS code

body.view-item .tag-sold-out:after {
    display: none;
}
body.view-item .tag-sold-out .ProductItem-gallery-slides-item:before {
    content: "Sold Out";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff593c;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

On 7/21/2023 at 8:58 PM, tuanphan said:

Use this CSS code

body.view-item .tag-sold-out:after {
    display: none;
}
body.view-item .tag-sold-out .ProductItem-gallery-slides-item:before {
    content: "Sold Out";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff593c;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

Thank you so much! It looks awesome!