A user seeks to center all product images on their Shopify store, as many appear bottom-aligned rather than centered. The issue stems from images having inconsistent canvas sizes or whitespace in the original files.
Proposed Solutions:
CSS approach: Add flexbox styling to .card__media and .card__inner .media classes via the theme’s CSS files (base.css, theme.css, or component-card.css). This can visually center images within their containers using align-items: center, justify-content: center, and object-fit: contain.
Root cause: One respondent notes the collection page template itself may not be properly centered, suggesting a broader page redesign might be needed for a permanent fix.
Image editing: If CSS alone doesn’t achieve perfect results, bulk editing tools (Photoshop, Canva, Pixlr) may still be necessary to standardize image dimensions and remove excess whitespace.
The discussion remains open, with one user offering free assistance if store collaborator access is provided.
Hey everyone,
My boss would like all the photos centered on our shopify website. They always used to manually center them in Photoshop. :0 I was wondering if there is a way to center the whole website? Here’s the website, you can see that a lot of the images are bottom centered and not in the middle:
https://destinationinteriors.co.nz/collections/rattan
Is there a CSS code I could use? I’ve tried a few different ones but they don’t seem to work.
Thank you !
Thanks for sharing the site. You’re right — many of the product images appear bottom-aligned, likely because the actual image files have whitespace or inconsistent canvas sizes. This isn’t a CSS issue alone, but you can visually center images using CSS, assuming you’re okay with scaling them inside their container.
Try adding the following CSS:
.card__media {
display: flex;
align-items: center;
justify-content: center;
}
.card__inner .media {
object-fit: contain;
height: 100%;
display: block;
margin: auto;
}
Open base.css, theme.css, or component-card.css (depending on your theme structure).
Paste the code at the very bottom.
Save and refresh your site.
Note: If your images are inconsistent in size (different dimensions or padding), Photoshop or bulk editing tools like Canva, Pixlr, or Bulk Resize Photos may still be needed for perfect results.
I’ll fix this for free and make the image grid fully centered. Just share your store URL and collaborator code.
Hi @Desti
I think this situation should be due to the pattern you use on the Collection page, as when I test to hide the images, the rest contents are not centred either.
Therefore, if you would like to eternally resolve this issue, better redesign the page pattern properly on your end. A kind reminder here!
