Hello!
I want to make my product images smaller on both mobile and desktop verison. Is there a way to do this?
Check attached image to see before.
I am using impact theme.
Thank you!
Topic summary
A user seeks to reduce product image sizes on their Shopify store using the Impact theme, affecting both mobile and desktop views.
Solutions Proposed:
- CSS modification: Add code to theme.css file targeting
.product-list .product-card__imagewith width set to 85% and auto margins - Layout adjustment: Increase products per row (from current setting to 4 or 5 items), which automatically reduces individual image dimensions through the theme’s built-in options
- Max-width constraint: Apply
max-width: 80% !importantto.product-card__figureelements, with adjustable percentage
Follow-up Issue:
After implementing changes, hover states display images at their previous larger width. A fix for this hover behavior was requested but not yet provided in the thread.
The discussion remains open with the hover issue unresolved.
1 Like
Hi @Dogleg
You can do it by adding this code to theme.css file
.product-list .product-card__image { width: 85%; margin: 0 auto; }
Why don’t you add more products in view for this section it will work, you have the option for 3, 4, and 5. It will reduce the image size a lot by default
See the attached images its simple and straight forward
If this is not what you want tell me exactly what you have on mind to help you with
Perfect! Thank you. Now though when I hover the products the previous width is being displayed, is there a way to fix this?
If you only have 3 products you can add this code in your theme style it will reduce the size of the image
.product-card__figure {max-width: 80% !important} you can change the percentage to the way it suits you