Solved

How can I optimize my product image size without losing quality?

thesweetbayshop
Visitor
3 0 0

Hi.  My product images are too big.  I typically size 1024x1024,  I've tried 640x640 but it's too pixelated when zoomed in.  The image gets cut off and you have to scroll down to see.  I would like a square image that lines up with the text.  Not going much lower than the Apple Pay button.

 

Screen Shot 2022-05-24 at 12.32.22 PM.png

Accepted Solution (1)
Mac
Shopify Staff
1688 177 278

This is an accepted solution.

Hi again, @thesweetbayshop

Thank you for providing that additional information.

 

After reviewing the Showcase theme documentation, there is no option to set the exact size of the image that shows on a product page, but there are two methods you can use to reduce the size of your product images. If you head over to your theme editor and click on your product page, you can uncheck the option called "Page is full width of the screen" and your image will immediately reduce in size. If you have more than one product image, you can play around with the Display style to "Two Column" or “Carousel” which will line up the images differently. 

 

Let me know if these suggestions work for you, if not, the best option would be to paste a line of code that will automatically reduce the size of each product image on your store. 

 

Kindly reply back to this thread with any questions or updates and we can continue our conversation further!

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 22 (22)

Mac
Shopify Staff
1688 177 278

Hi, @thesweetbayshop!

Thanks for reaching out in our Community forums and for sharing your concern, I’d be happy to help.

 

You mentioned that your product photos are too large when viewing your site on a desktop. Depending on the theme you are using this can be adjusted via the theme editor or by modifying the theme code. In order for me to take a closer look, feel free to share the name of the theme that you are using along with your store URL and we can continue troubleshooting. 

 

Talk soon! 

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

thesweetbayshop
Visitor
3 0 0

Hi Mac!  Thanks!  Theme is Showcase version 5.1.0 and url is:  https://www.sweetbaygifts.com/

 

 

Mac
Shopify Staff
1688 177 278

This is an accepted solution.

Hi again, @thesweetbayshop

Thank you for providing that additional information.

 

After reviewing the Showcase theme documentation, there is no option to set the exact size of the image that shows on a product page, but there are two methods you can use to reduce the size of your product images. If you head over to your theme editor and click on your product page, you can uncheck the option called "Page is full width of the screen" and your image will immediately reduce in size. If you have more than one product image, you can play around with the Display style to "Two Column" or “Carousel” which will line up the images differently. 

 

Let me know if these suggestions work for you, if not, the best option would be to paste a line of code that will automatically reduce the size of each product image on your store. 

 

Kindly reply back to this thread with any questions or updates and we can continue our conversation further!

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

thesweetbayshop
Visitor
3 0 0

All set!  thanks Mac!

Mac
Shopify Staff
1688 177 278

No worries at all, @thesweetbayshop! I'm glad I could help!

 

If you have any other questions, feel free to follow up and let me know! Additionally, I'm always looking to help out merchants with ideas or feedback related to their stores. How is business going thus far? Have you thought about what to include in your announcement bar to let your customers know about ongoing promotions or news? 

 

Talk soon! 

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

eric64418
Tourist
6 0 1

Hi Mac, I'm having a similar issue... I'm using the "Impulse" theme -- here's a product page: https://bookandmortarrecordstore.com/products/righteous-prey-john-sandford-1

 

How can I get the images to not be so huge? I tried to follow the instructions you left the sweetbayshop, but I am seemingly unable to do it that way...

Mac
Shopify Staff
1688 177 278

Hi, @eric64418

Thanks for joining this thread.

 

After reviewing your product page, I can see that your product image is quite large. Since you mentioned you are using the Impulse theme, here is something you can do directly in your theme editor to reduce the size of the image:

 

  1. From your Shopify admin, go to Online Store > Themes and then click Customize.
  2. Open the drop-down menu at the top of the page and select Products > Default Product.
  3. On the left hand side, click on the Product pages section.
  4. Then, on the right hand side you will see Size, and set this to Small.
  5. Click Save.

If you would like to make your image smaller, you will need to resize and re-upload the product photo. Impulse Support has a guide here about their Image and video size recommendations.

 

Additionally, I'm always looking to help out merchants with ideas or feedback related to their stores, so let me know if you'd like for me to review an area in particular. For instance, while browsing your store, I did notice that you included multiple sections in your footer called Homepage. Some of them lead to the home page, while others lead to your About Us section. You will want to remove and edit them accordingly to reduce redundancy. 

 

 If you have any other questions, feel free to follow up and let me know!

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

eric64418
Tourist
6 0 1

Thanks so much!! That fixed it 🙂

Mac
Shopify Staff
1688 177 278

Hi again, @eric64418!

 

My pleasure! I'm glad that you were able to reduce the image size as it definitely makes your product page more organized. Another popular modification that you can make to your product page is to include a dynamic checkout button. This allows customers to skip the cart and complete their payment with the checkout method displayed on the button. I'd be happy to talk more about this if you're interested. 

 

All the best! 

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

MMJJ
Visitor
2 0 0

Hi Mac, 

I have a similar issue on online store page. 

The image gets cut off on mobile only. (On PC, I can see the full image)

Wokiee 2.2. Design and support by p-themes

Mac
Shopify Staff
1688 177 278

Hi, @MMJJ!

Thanks for joining this thread.

 

I'd be happy to test this out from my end. Feel free to share your store URL and I can take a closer look. In the meantime, have you had a chance to review the documentation for this theme? More specifically, the suggested dimensions for your product photos as this may be causing the issue. If you are still unable to solve this, your best bet would be to reach out to the theme developers as they could investigate further. 

 

Another solution would be to speak with Shopify Experts. This is a marketplace that connects you to professionals and will allow you to outline your exact requirements to create a tailored solution. If you’d like to know more about finding the right Expert, please click here.

 

Feel free to reply back to this thread with any questions or updates and we can continue our conversation further!

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

MMJJ
Visitor
2 0 0
Mac
Shopify Staff
1688 177 278

Hi, @MMJJ!

Thank you for following up!

 

I appreciate your sharing your store link. Since your store is currently password protected, I wouldn't be able to view any content on your store unless the protection is disabled or the password is provided. You can disable this by following the steps below: 

  1. From your Shopify admin, go to Online Store > Preferences.

  2. Go to the Password protection section.

  3. Uncheck Restrict access to visitors with the password.

  4. Click Save.

If you prefer to keep your store protected, you can reach out to our Help Center through live chat, email, or callback as our team will be able to point you in the right direction here. Please do keep in mind that you are using a third party theme, so our support is limited, but we should be able to guide you to our Experts if needed! 

 

Feel free to reply back to this thread with any questions or updates and we can continue our conversation further!

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Glasshock
New Member
8 0 0

Hi,

 

I'm having this exact issue with the Dawn theme.

Can you please help as its driving me nuts!

www.thestainedglassworkshop.com

https://www.thestainedglassworkshop.com/products/traditional-stained-glass-classes 

 

Thanks in adavnce!

 

Mike.

Mac
Shopify Staff
1688 177 278

Hi there, @Glasshock!

Thanks for joining this thread and I hope you had a wonderful holiday. 

 

I reviewed the Traditional Stained Glass Classes product page and can say, that the product images look great. They are spaced out perfectly and fit in a cohesive manner. If you would like to reduce the image size further, then you will have to follow these steps: 

 

  1. From your Shopify admin, go to Online Store > Themes and then click Customize.
  2. Open the drop-down menu at the top of the page and select Products > Default Product.
  3. On the left hand side, click on the Product Information section.
  4. Then, on the right hand side you will see Theme Settings, and adjust the Maximum width.
  5. Click Save.

If you are looking for something different, please let me know and we can take a closer look together! 

 

Talk soon! 

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

decor2
Visitor
1 0 0

Hi Mac,

Hope you're doing well.

I am using Impulse theme, latest version.

Product image is too big when zoomed in. Can you help me fix this issue?

 

Thanks in advance!

Mac
Shopify Staff
1688 177 278

Hi, @decor2!

Thanks for joining this thread. 

 

I understand that you're using the Impulse theme and your product images appear too large when using the zoom feature. Generally, this seems as how the zoom feature has been developed on both mobile and desktop. An easier solution would be to disable this feature all together unless it's essential for your products.

 

You can do so by heading over to your theme editor, clicking on your product page, clicking on products on the left hand tab, and uncheck the Enable image zoom button on the right hand tab. You can now change your product image size to large so that customers will still be able to view your products. 

 

My next suggestion is to review your store's theme and consult your theme developer. It looks like you are using a third-party theme so you can contact your theme developer to learn more about your other solutions. 

 

Feel free to let me know if you have more questions!

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

FLIPSUPPLY
Visitor
1 0 0

Hi Mac, 

 

I can see you have been very helpful in this thread. I was hoping you would be able to help me as well. 

My issue is not the size of the image once you are on the product page itself. Its actually the size of the image used for the thumnail of the product before you click on them. 

I cannot get the sizing right and have played around with various settings and resizing the image manually. 

I am using theme - Impulse v5.5.0 2
https://flipsupply.co.uk/collections/summit


JSTREP
Visitor
1 0 0

Hi Mac,

I am having a similar issue.  I am using the "Berlin Theme" and my t-shirt's left arm and right gets cut out.  I tried different codes, but none seem to work on the "Berlin Theme".   On the default theme, "Dawn" two the codes worked perfectly.

 

I tried your posted solution directly above this paragraph, but I am difficulties finding "product page" and so on.

 

Can you please help, Sir.  Thank you kindly. 

AidyB
Visitor
1 0 0

Hey Mac - Can you help me out with the Craft theme.  I'm having the same problem with my blog and product images being huge.  

Thanks!

Shwe33697
Visitor
3 0 0

I have the same problem here . 

AlbertoIGaucin
Shopify Partner
6 0 5

Hello Thesweetbayshop and anyone else seeing this, an easy way to get around this issue is to resize the images and videos of your store. The best app to do that is Resizify:

 

https://apps.shopify.com/compress-files