How to resize product images on my website?

Store Design
1

I want to resize the product image.

Screenshot 2022-12-29 at 19.42.58.png
Screenshot 2022-12-29 at 19.42.58.png2872×1606 326 KB

website url is: https://thesnoozy.com/products/khaki-snoozy

1 Like
2

Use Shopify’s online image resizer and optimizer tool to give your digital images the perfect size and configuration to suit a wide range of applications. Whether it’s for a social media profile, product photo for your online store, or an e-newsletter, fast and easy image resizing makes your life easier.

Link: https://www.shopify.com/tools/image-resizer

3

Hi @GeorgeRizos

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

.grid__item.product__media-wrapper {
    max-width: 30% !important;
}

Hope that my solution works for you.

Best regards,

Victor | PageFly

1 Like
4

Thanks this works, but is it possible to change it only on the desktop version?

5

you can use a media query. A media query is a CSS rule that allows you to apply styles based on certain conditions, such as the width of the viewport (the area in which the webpage is displayed).

@media (min-width: 1024px) {
  .grid__item.product__media-wrapper {
    max-width: 30% !important;
  }
}
1 Like
6

@SocialAutoPost @PageFly-Victor

Could you maybe also check out my other post?

Link: https://community.shopify.com/c/shopify-design/different-banner-size-on-mobile-portrait-and-landscape/td-p/1881246

7

I replied @GeorgeRizos

Please check. Let me know if requires assistance.

8

Thank you it works!

1 Like