Why are my product images still too large after resizing?

Store Design

Topic summary

Main issue: Product images appear oversized on product pages despite being resized (from 20MP originals to 1024×1024, then 800×600, which hurt quality). A separate collection URL duplication (“east-coast” vs “East Coast”) also occurred.

Key clarifications and perspectives:

  • Duplicate collection view was caused by linking both the collection and a tag; Shopify enforces lowercase slugs, so URL case can’t be changed.
  • One participant felt image size looked fine; the store owner wanted smaller display. Grid size on collection pages can be adjusted via products-per-row.

Actions taken:

  • Helper requested and received theme access; added CSS to constrain the product wrapper’s max-width (set to 1000px) in style.css.
  • Additional CSS provided to limit product image container to 50% width and cap the carousel stage width. Both snippets were added at the bottom of style.css.

Outcomes:

  • Store owner reports the product images now look better; changes should apply across all products. Future tweaks involve adjusting the pixel values (e.g., max-width).

Status and open items:

  • Primary issue effectively resolved for the original theme (Susie).
  • A new participant using Pipeline can’t find style.css and seeks help; unresolved.

Notes: Screenshots and CSS code snippets were central to understanding the fixes.

Summarized with AI on January 5. AI used: gpt-5.
12

@Nickahola

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > style.css and paste this at the bottom of the file.

@media only screen and (min-width:768px){
.product-photo-container>a {
    position: relative;
    display: block;
    width: 50% !important;
    margin: 0 auto;
}

.owl-carousel .owl-stage {
    max-width: 385px !important;
    width: 100% !important;
    margin: 0 auto;
}

}
1 Like