Why are my product images appearing blurry on gempages?

kelly-agrey
Tourist
3 0 3

My product images are showing up blurry. I use gempages for the design of the product page, however I create the product in shopify. Does anyone know how to fix this? 

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
5938 1429 1759

Hi @kelly-agrey ,

Can I check? Would you mind to share your store URL website? with password if its protected. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


kelly-agrey
Tourist
3 0 3
here is a link to a product in my store:6' Rainwashed Garland – Habitation
Box <>
Made4uo-Ribe
Shopify Partner
5938 1429 1759

I need the Store URL website. So Ill be able to check what happen to the product page. You can also share the preivew. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


Dan-From-Ryviu
Shopify Partner
7690 1495 1499

Hi @kelly-agrey 

Maybe you can solve it by changing Image settings in your Online store > Themes > Customize > Products > select product template of that product Screenshot 2023-08-02 at 11.17.31.png

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

azamgill
Shopify Partner
323 47 75

Hey @kelly-agrey ,

Some time it is caused by wrong size in the code. 

 

{% assign product_image = product.featured_image | img_url: 'master' %}
{% assign custom_width = 500 %}
{% assign custom_height = custom_width | times: 1.5 %} {# Aspect ratio of 3:2 #}
<img src="{{ product_image }}" alt="{{ product.title }}" width="{{ custom_width }}" height="{{ custom_height }}">

 

In this example, the img_url filter is used to get the URL of the featured image for the product in its large size.
To address the issue, you can modify the Liquid code to use a different image size or update the image quality. For instance, if you want to display the image in its original size without any size reduction or compression you may try the master 

 

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
kelly-agrey
Tourist
3 0 3
Thank you for your response. It was something else... I have it fixed now!
Sweetswinging
Visitor
1 0 0

How did you fix it?  I am having the same issue.  Thanks.

Entaice
Pathfinder
121 7 36

The app is probably referencing a low-resolution version of your product images.  I believe when you upload a product image to Shopify, shopify automatically creates several different image sizes for different screen size layouts.  I'm not familiar with gem pages specifically, but there is probably an option to select which image size gets displayed by default in the page.  

You can increase your revenue by 5% by replacing Shopify's default sorts. Test for free. **Show me how**

flareAI
Shopify Partner
2405 223 537

Hello @kelly-agrey,


Greetings from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot! I am Gina, and I am here to help.


Here are some steps you can take to fix the blurry images.


- When uploading images to Shopify, it's crucial to avoid excessive compression that can lead to a decline in image quality. While Shopify does apply some compression automatically, you can mitigate this by using high-quality images.


- Prioritize images of high resolution and quality when uploading them. For product images, it's advisable to use images with a resolution of at least 2048 x 2048 pixels. This ensures that the images appear crisp and clear on various devices.


- Keep in mind that large image files can slow down your website and negatively impact image quality. To address this, use image editing software to optimize and reduce the file size without compromising quality. You can find online tools and plugins that can assist you in this optimization process.


- Shopify utilizes responsive design and automatically generates different image sizes for different devices. Adhere to the recommended image dimensions and allow Shopify to handle the scaling process.


- Be aware that image quality may be affected by the theme settings in your Gempages or Shopify theme. Ensure that the settings related to image display are optimized for the best quality.


- It could be also related to cached images in your browser. To troubleshoot this, clear your browser cache and refresh the page to see if the images appear clearer.


- Also, you can right-click on them and select "Inspect" or "Inspect Element" (depending on your browser) to access the developer tools. Check if the displayed image dimensions differ from the actual image size. If there's a mismatch, you may need to adjust your theme or Gempages settings accordingly.


- Verify that the Gempages design you are using is fully compatible with your Shopify theme. Incompatibilities between the two can lead to display issues, including blurry images.


If the problem persists despite trying the above steps, don't hesitate to seek assistance from Gempages support.


Refer to this guide on Saving Your Images for the Web


I hope this information proves useful.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing