Grey line top of image after removing price and title

Store Design

Topic summary

Main issue: After hiding product price/title via CSS in the Spotlight theme, a grey line flashes on product images when tapped on mobile/tablet.

Context:

  • CSS used: .collection .product-grid .card__content { position: absolute; opacity: 0; z-index: 3; height: 100% !important; }
  • Store was password-protected; access provided. Initial desktop check didn’t show the issue.

Reproduction:

  • Occurs on the homepage, mobile/tablet only. Tapping a product image shows a brief grey line before navigating to the product page.

Diagnosis:

  • The product title element still exists in the DOM. It’s hidden with CSS, so on tap it briefly renders, causing the grey line.
  • The image was made clickable via a CSS “patch” instead of proper HTML structure.

Recommendation:

  • Remove the CSS workaround and correctly wrap the product image in an anchor tag in the theme code (product card/template). Hide/remove the title/price at the markup level rather than via opacity/positioning.

Status:

  • No code fix applied yet. Suggested approach provided; issue remains open pending implementation.
Summarized with AI on December 13. AI used: gpt-5.
1

Hi I’m using spotlight theme

I have recently used code:

.collection .product-grid .card__content {
position: absolute;
opacity: 0;
z-index: 3;
height: 100% !important;
}

to remove price and title on the product grid. Now I’m getting a grey line when Image is tapped

Any ideas?

Thanks

Screen Shot 2024-12-01 at 12.51.32 AM.png
Screen Shot 2024-12-01 at 12.51.32 AM.png903×891 257 KB

2

Hi @dannybafri

You store is password protected kindly share the password so I can help

3

Jeneve.ca

pw 123456

4

Hi @dannybafri

Can You specify where that issue occurs because I didn’t encounter nay issue

Mehran_Ali_0-1733035985294.png
Mehran_Ali_0-1733035985294.png1904×744 81.4 KB

5

I’m pretty sure this only occurs on mobile and tablet

6

Hi Ali

Any idea why this happening?

7

Hi @dannybafri

I actually can’t suggest anything until I see the error

Mehran_Ali_0-1733149042546.png
Mehran_Ali_0-1733149042546.png452×876 70.7 KB

8

Hi Ali

when you’re on the homepage ( on mobile )

tap one of the product images and you’ll see a grey line appear on the image right before you’re directed the product page.

9

Hi @dannybafri

I get the issue it is because your product tile is over there shows you a gray line on mobile the title is hidden but still there so when you click on it the title show up for a bit and shows gray line who ever hide the title and make the picture clickable Did not use the right way he use the patch way which causing the issue

the correct way to make the product image click able is to add an anchor that I is only do using code not CSS the one who did that they did using CSS so kindy remove that and add the anchor to product image properly you can reach me out I will help you in proper way