How to set Product image width and height in percentage?

Store Design
,

Topic summary

A user seeks to set product images to specific dimensions (475px height, 355px width) using percentages for responsive design across different desktop resolutions.

Solution Provided:

  • Navigate to Online Store → Edit Code → theme.liquid file
  • Add custom CSS code at the bottom, just above the closing </body> tag
  • The code targets product images with specified dimensions
  • Dimensions can be set in either pixels or percentages depending on preference

The solution was successfully implemented and resolved the user’s issue. The approach allows for flexible sizing that adapts to different screen resolutions while maintaining consistent product image display.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi everybody,

How can I set a specific dimension for all Product pictures with Height 475px and Width 355px but in percentage (so it would be responsive in different desktop resolutions).

Pls check my url https://189ee3-2.myshopify.com/products/demin

Thanks!

Screenshot.png
Screenshot.png1203×532 258 KB

2

Hey @collins276

I’m not exactly sure if that’s what you want but according to your requirements that’s how it looks:

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1705076062290.png
Moeed_0-1705076062290.png2565×1253 276 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Can I set them in percentage?

4

Hey @collins276

Yes you can set it in percentage as well depending on however you like using the same code.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

Thank you :grinning_face:

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.