How to stick badge to specific card on featured product carousel

Store Design
, , , ,
1

Hi Shopify fam,

I have been struggling to figure this one out since I am a newb, and figured it was time to seek guidance from the community.

I am using the Blum theme on this website. It comes with a parallax spinning badge that you can show on certain section. I like the spinning parallax effect, so, I want to keep that but I want to tweak it so that it sticks to the top-left corner of the first product card on the featured product carousel on the home page. That way when on mobile, its showing that the first product card is the “Best Seller” and moves with the card when scrolling over in the carousel.

I messed around in inspect element and got it to look right by setting overflow-x on the parent element to visible so the badge overflows on top of the other section above, but then naturally the carousel does not work on mobile.

Screen Shot 2023-12-19 at 11.38.jpg
Screen Shot 2023-12-19 at 11.38.jpg313×716 29.7 KB

Screen Shot 2023-12-19 at 11.37.jpg
Screen Shot 2023-12-19 at 11.37.jpg1427×712 110 KB

Anyone know how to achieve this? Thank you in advance and many blessings to anyone that might have the answer.

Here’s the link to my preview shopify store:

https://63a119-3.myshopify.com/

2

CSS

.first-product-card {
  position: relative; /* Makes the badge position relative to the card */
}

.blm-spinning-badge {
  position: absolute; /* Positions the badge absolutely within the card */
  top: 0; /* Top position at 0 to stick to the top */
  left: 0; /* Left position at 0 to stick to the left corner */
  z-index: 100; /* Ensures the badge appears on top of the card */
}
3

Thanks for replying @joehustle

How do I target the first product card of the carousel? In the inspect element I see it as data-item-index=“1” but I don’t know how to target that in CSS