Product Page Images Smaller

Store Design

Topic summary

A store owner using the Palo Alto theme needed to reduce oversized product images that were displaying poor quality on their product pages.

Solutions Provided:

  • CSS code modification (accepted solution): Add custom CSS to theme.aio.min.css adjusting the grid template columns from 50% to 45% width for product media on desktop screens. The percentage value can be customized based on needs.

  • Image reordering: Rearrange product images to place higher-quality photos first, moving lower-quality images to the bottom of the gallery.

  • Theme editor settings: Use the built-in theme customizer to adjust media width settings (small/medium) under the product information template without coding.

  • Alternative CSS approach: Apply custom CSS through the theme customizer’s custom CSS tab to set product media width to 85% (adjustable).

Resolution: The original poster confirmed they successfully implemented the first CSS solution, resolving the image sizing issue.

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

Hi all,

Hope everyone is well. The last stage in us redesigning our product page is to make the main product images smaller (still with equal aspect ratio). Our product images are so large that some of the image quality is just awful. Any help would be so appreciated.

Theme: Palo Alto

URL of product with bad image: Bezzera Aria R Coffee Machine + FREE GIFT – Prestige Coffee

Thank you so much in advance.

2

Hey @MollieHammond,

In order to reduce the width of the Product media you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> theme.aio.min.css

In the end of theme.aio.min.css file paste the code provided below.

@media only screen and (min-width: 768px) {
    .product-single__wrapper--standard {
        grid-template-columns: calc(45% - var(--gutter) / 2) calc(50% - var(--gutter) / 2) !important;
    }
}

Results:

results
results1919×946 201 KB

The figure 45% is the main value that is responsible for the width of the product media. I made it 45% before it was 50%. You can adjust this number based on your need.

Thanks

3

You can also rearrange your images and put the lesser quality ones at the bottom. The third image in this instance would look much better as default.

4

Hello @MollieHammond,

You can try a non coding way. Go to theme editor> on default product if you select the “product information” template then click on the product image> you can see the media option and from there you can change the width to small or medium. Then the product image will be smaller with equal aspect ratio.

Please check this screenshot for reference:

Product image smaller
Product image smaller1898×919 258 KB

This is a non coding solution. If this doesn’t work for you let me know.

5

Hello @MollieHammond ,

I hope you are well!

Basically, the height of the product image is auto, which means that you need to decrease the width. If @EFOLI-Syn 's option didn’t work, Please copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

.product-single__media{
width: 85%;
}

This will change the height. You can change the numbers as per your requirement.

image
image1919×894 198 KB

6

Hi,

Thanks for taking the time to respond. I already implemented the code above and it solved the issue. Thank you so much anyway :slight_smile: