Products image zoom in mobile

[a5259e-00]

Hello 

When I import or add products to my Shopify store it looks zoom in mobile . How I can adjust it please help.

[Eddie_specialst · Accepted solution]

If your products appear zoomed in on mobile devices, it might be due to the image sizes or the theme settings. Here's how you can adjust this:

Check Image Sizes

1. Resize Images:
   • Ensure your product images are optimized for web use, typically around 800x800 pixels.
   • You can use image editing tools like Photoshop or online services like Canva to resize and optimize your images.

Adjust Theme Settings

1. Theme Customizer:

   • Go to your Shopify admin panel.
   • Navigate to Online Store > Themes.
   • Click Customize next to your active theme.
   • Look for settings related to product images, such as image size, aspect ratio, or zoom settings. Adjust these settings to see if it resolves the issue.

2. Check for Mobile-Specific Settings:

   • Some themes have separate settings for mobile display. Make sure to check if there are any mobile-specific settings under the customizer.

Custom CSS

If the above steps don’t solve the issue, you might need to add some custom CSS to adjust the image display on mobile devices:

1. Edit Code:

   • Go to Online Store > Themes.
   • Click on the Actions dropdown next to your active theme and select Edit code.
   • In the Assets folder, find and click on theme.scss.liquid or theme.css (depending on your theme).

2. Add CSS Code:

   • Add the following CSS code at the end of the file:
     css

     Copy code

     @media only screen and (max-width: 767px) { .product-single__photo { object-fit: contain; width: 100%; height: auto; } }
   • Save the changes and check your store on a mobile device.

Test Changes

• After making adjustments, always test your store on multiple mobile devices or use browser developer tools to emulate different mobile devices to ensure the issue is resolved.

If you still encounter issues, feel free to provide more details or screenshots so I can assist you further.

[a5259e-00]

Thank you for your help I do these steps but it doesn't help me .

[Eddie_specialst]

okay if that is the case can you share a screenshot explaining ?

[a5259e-00]

Yes sure 

 

[Eddie_specialst]

Based on my observations, it appears that you are utilizing a premium theme. If so, I would be delighted to assist you with this. Please let me know if we can collaborate on resolving this matter. I am confident that my services can provide valuable support.

[a5259e-00]

It is  trade theme sir 

[a5259e-00]

 

[Eddie_specialst]

I will like to have access to the backend to check this out 

[a5259e-00]

• https://shukriallc.myshopify.com
• This is my store link 

[Eddie_specialst]

Hello,
I have checked it now and I see that it is when we click on the products images it redirects us to zoom images however, If I get you well you don't want this to happen right ??

[a5259e-00]

Yes exactly 

[Eddie_specialst]

Hello,

Please send me your store collaborator code so I can submit a collaborator request and review the backend.

Alternatively, you can add me as a staff member using the email address samwebgraphic@gmail.com. This will allow me to assist you more effectively. Once this is set up, we can discuss pricing before proceeding further.

Thank you.

[a5259e-00]

Thank you so much my problem solved.