Custom Product Badge Shows Wrong on Homepage — Works Fine on Product Page

Technical Q&A
, , , ,
1

Hi, I added a custom product media badge (metafield + custom CSS). It works perfectly on the product page, but on my homepage (featured product section) the badge is outside the image and looks broken.

Picture 1 = problem (homepage)
Picture 2 = how it should look (product page)

I need help with one of these:

  1. How to hide/remove the badge only on the homepage
    or

  2. How to position it inside the image like it is on the product page

If someone has a CSS or Liquid fix, please share. Thanks a lot!

55686
556862838×1276 260 KB

43707
437072108×1288 280 KB

2

Hey @Kraftio_BG

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.product__badge-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.product__badge.top.right {
    top: 10px !important;
    right: 10px !important;
    position: absolute !important;
    padding: 1.5rem !important;
    display: flex !important;
    width: 25% !important;
}
</style>

RESULT:

image
image1168×613 80.8 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

4

@Moeed Thank you so much. Worked exactly as I imagined it. Appreciate it!

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed