Re: Cropping product image to square on collection/ search page - Boundless theme

Store Design

Topic summary

A user seeks to display product images as uniform squares on collection and search pages in the Boundless theme while preserving the original aspect ratio (no distortion or stretching).

Proposed Solutions:

  • CSS approach: Add custom CSS using object-fit: cover with absolute positioning to create square containers that crop images while maintaining aspect ratio. Code targets .product-card__image-wrapper elements.

  • Theme editor option: Check if the theme customizer offers built-in aspect ratio or crop settings under Collection pages.

  • Performance optimization: Consider using Shopify’s CDN image parameters to actually crop images server-side, reducing page load times.

Current Status:

The discussion remains open with the original poster reaching out via email for professional implementation assistance. Multiple contributors offered both DIY CSS solutions and paid customization services.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

How can I do this but keep the original aspect ratio of the image?

2

So I’m looking for someone who can implement this reply from an earlier post.

To achieve your requirement you can use CSS to constrain the container without distorting the image. Here’s how:

  1. Edit the CSS:
  • Go to your Shopify admin panel.
  • Navigate to Online Store > Themes.
  • Click Actions > Edit Code for the Focal theme.
  • Open the theme.css or base.css file (depending on your theme’s setup).
  1. Add Custom CSS: Add the following CSS to crop the images into squares while preserving their aspect ratio:
.product-card__image-wrapper {
    position: relative;
    width: 100%; /* Adjust as needed */
    padding-top: 100%; /* Ensures a square aspect ratio */
    overflow: hidden;
}

.product-card__image-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

Copy

  1. Save and Preview:
  • Save the changes and preview your collection page to ensure the images are displayed correctly.
  • Test on various screen sizes to confirm that the images remain square and properly aligned.
3

Hi,

I understand you’re looking to display images as uniform squares on your collection and search pages — without actually cropping or stretching the original image. That’s a smart move for both aesthetics and UX consistency.

Here’s a two-part solution you can apply depending on how much control you want:

Option 1:

No-Code (If Available in Theme Editor)
Go to Online Store > Themes > Customize

Select Collection pages

Look for image layout or aspect ratio options.

If there’s an option like “Crop images to fit” or “Square ratio,” enable it.

If you have tried this and it is not giving you what you want, I can provide some lines of code that would better help you solve it.

4

If you just need that customization setup for you on a store then contact me for services.

Though to DIY try just adding it as a custom-css setting

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Even better there’s the option of actually cropping images to reduce page size and improve performance by using shopifys CDN image parameters.

See https://cdn.shopify.com/ for example syntax.

Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

5

Hello Paul I just emailed you and thank you for the reply