Custom Label Badge on Product Page using product tags

[SteveNew]

Hi All,

I need help to get a custom label badge to appear on the first image of the product page using product tags on the Dawn theme.

So if I tagged my product ABC with label “Selling Fast”, I would like same label to appear on the top right corner of the first image on the product page for product ABC. All other products without this product tag wouldn’t show the label on the product page image.

I followed this example code and added to the bottom of the base.css file - Adding Badge To First Image On Product Page but it was for a image overlay and all products would have the same banner image / and if i remove the background image and enter the text testing it shows the same label on all products. Is there a way to replace the word testing with the product tags?

.product__media-item:first-child .product__modal-opener:after{
position: absolute; 
content: 'testing'; 
top: 1px;
right: 10px;
background-color: #D81B60;
color: white;
padding: 4px 12px;
font-size: 12px;
border-radius: 16px;
}

Thanks

Steve

[BSS-Commerce]

Hi @SteveNew

There is a simpler and more effective way to do all this, and that is to use our app Product Labels & Badges.

• Our has many features to support you in displaying label/badge/popup/banner…

• You can easily customize the attached conditions, display time and other notable features

In your case, you just need to display the first image on the product page

Feel free to upload your own custom labels/badges and edit positions easily

You can easily set the conditions you want so that the label can display in the best way

You will get the results you want with just a few simple steps

Hope this can help you.

Kind regards,