A user seeks help redesigning product cards to achieve a specific layout: larger product images with realigned components matching an attached reference image. They acknowledge this is a substantial request and don’t expect a complete solution.
Two solutions offered:
JavaScript approach - Add custom code to the theme.liquid file, placed above the closing tag
CSS approach - Insert CSS code at the bottom of theme.css or theme.css.liquid file targeting lazy-loaded images with padding adjustments
Both responses include code snippets and reference images demonstrating the implementation. The discussion remains technical, focusing on theme file modifications through Shopify’s code editor. No indication of which solution the original poster chose or whether either approach fully resolved their design requirements.
Hi,
I’ve been struggling with designing my product cards. I’d like to achieve the look of the attached picture below (so, bigger product pictures, and alignment of the other components as in the attached picture).
Does anyone have input on where to start? I know I’m asking quite much so I don’t expect a full on design solution 
My storefront is (local theme): https://gryningens.myshopify.com/
Thank you so much
Hey @Ivnvu
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @Ivnvu
You can do that by adding this CSS code at the bottom of theme.css or theme.css.iquid file
.lazy-image.lazy-image--animation.lazyloaded img { padding: 0px !important; }
