I can see the images are still completely blank. The overlay is blocking the product images entirely. Let me read the current card-product.liquid file and fix this properly:
I can see the issue! The overlay is still there but the problem might be that the overlay image URL is not loading properly or the overlay is interfering with the image display. Let me fix this by removing the background image overlay and using a different approach - a subtle CSS-only overlay that won't block the images:
I've simplified the overlay approach by removing the background image that was causing the issue and replaced it with a very subtle semi-transparent white overlay (3% opacity, 5% on hover). This provides basic image protection through CSS user-select and drag prevention while ensuring your product images remain fully visible. The overlay is now purely CSS-based and won't interfere with image loading.
I can see the issue! The overlay wrapper is interfering with the image display. Let me completely remove the overlay wrapper and use a much simpler approach that won't block the images:
I've completely removed the problematic wrapper div and simplified the approach. Now the overlay uses only CSS ::after pseudo-element to add a subtle watermark in the center of images, plus basic right-click and drag protection. This should allow your product images to display normally while still providing some protection against copying.
Incorporate the same overlay functionality from the card-product component into the main-product.liquid code. Ensure that the product images are displayed correctly and that the overlay appears as intended, enhancing the user experience. The overlay should provide relevant product information and maintain a visually appealing design. Please ensure that the implementation is consistent with the existing styling and functionality of the card-product component.