How to Display All Product Images in a Square Shape with Custom Size on Shopify?

Product Development & Sourcing
1

Any one c

image.png
image.png1900×705 277 KB

an help

2

To display all product images in a square shape with a custom size on Shopify, you can follow these steps:

1. Adjust Theme Settings (if supported)- Go to your Shopify Admin.

  • Navigate to Online Store > Themes.
  • Click Customize on your active theme.
  • Check the product or collection settings to see if there’s an option for image aspect ratio. Set it to “Square” or a similar option.
  • Adjust the size settings, if available, to your desired dimensions.

2. Customize the CSS

If your theme doesn’t have built-in settings for this, you can use CSS to enforce a square shape for all product images:

  1. Open Theme Code Editor:

    • Go to Online Store > Themes.
    • Click Actions > Edit Code.

  2. Edit the CSS:

    • Open your theme’s main CSS file (often named theme.css, styles.css, or similar).
    • Add the following code at the end of the file
.product-card__image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* Ensures a square aspect ratio */
}

.product-card__image {
    width: 300px; /* Set your custom width */
    height: 300px; /* Set your custom height */
    overflow: hidden; /* Ensures the image doesn't overflow */
}
    • Replace 300px with your desired dimensions.

  2. Save and Preview:

    • Save the changes and preview your store to ensure the images display correctly.

3. Image Resizing Apps

If you’re not comfortable editing code, use a Shopify app to automatically resize product images:

  • Examples: Photo Resize by Pixc, Bulk Image Edit.
  • These apps can crop and resize images to square proportions.

4. Ensure Consistent Image Uploads

For best results, upload product images in square dimensions (e.g., 1000x1000 pixels). This reduces the need for excessive cropping or resizing.

Would you like assistance with the code or setting up an app?