The pictures on my product page are too large, but when clicked on they are fine. I’ve tried resizing them and it doesn’t change anything for me.
I’m looking to only make the product page images smaller so they can fit in the boxes
I’ve attached a photo
Hi @harpalsingh420 ,
Would you mind to share your URL website? with password if its protected. Thanks!
password is admin
Hi, @harpalsingh420 .
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
.grid {column-gap: 30px;}
.grid--4-col-desktop .grid__item {
width: 20% !important;
padding-bottom: 20px;
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Hello @harpalsingh420
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
.card__inner {
width: 100% !important;
}
Hey this is changing the size of my products cards, however I need the images within the cards to also get smaller
Sorry, that code did nothing
According to Shopify, stores should never have images that are too small or large. While Shopify allows users to upload images up to 4472px X 4472px, image sizes of 2048px X 2048px are highly recommended. Read on for the best image sizes to compliment your store’s theme.
| Image Type | Width | Height | Aspect Ratio |
|---|---|---|---|
| Product Image | 700px | 700px | - |
| Collection Image | 550px | 550px | 1:1 |
| Slideshow Image | 1600px | 1050px | - |
| Blog Post Image | 720px | 1080px | - |
| Text Overlay Image | 1600px | 1050px | - |
Image Sizing Tips for Dawn Theme
Thanks!
Changing the image size didn’t help. It seems that the card thats holding the image is forcing it to be zoomed in
Thank you for the information. You can try this one.
.media.media--transparent.media--hover-effect img {
object-fit: contain;
}
.media.media--transparent.media--hover-effect {
background: white;
}
Result:
I hope it help.
Worked exactly as I wanted it to, you’re a life saver. Thank you so much for the help!
I needed the same thing and this worked for me too, thank you!
Hey I am needing something similar to this. My product cards are not the same size, even after containing the product images. I put this code in the base.css file but it just made mt fourth product go to the next line (before and after images below). Is it possible the width and padding sizes above just aren’t correct for my site?
