POPUP IMAGE IS BLURRY NO MATTER WHAT I TRY?

[Focused4ever]

Hello, Hoping someone can help me out. I have a Shopify Store where I am using the 3rd party Out of the Sandbox theme called Turbo. As of right now I am still running Shopify 1.0 and have not upgraded either Shopify or my Theme as I was told that I would have to redesign my entire front end of my store. I was told by Shopify that I could use my store as is without the upgrade until I am able to afford a full rebuild. Anyway the one thing that is not acting properly for me is my initial Welcome Popup and the phot that I have there. I designed an eBook that I am giving away for free but the photo there as you will see in my screenshot is very blurry. The photo originated from a PDF which was very clear and I even exported the original book cover and contents page as a jpeg and even a .png from the original source which I designed it in which was the eBook platform Visme. Regardless how I get the photo when I upload it to my popup it gets blurry as you see in the attachment. I even ran it through an image cleaner and also a pixel one to try and make it really high res but nothin works. Can anyone help me out? And for some reason I cant upload my screenshot here. Anyone know why that would be? It says only files types allowed are mpp, xls, xlsx, ppt, pptx, csv, mp4. 

[suyash1]

@Focused4ever - can you please share the page link where you have it blurry?

[Focused4ever]

It is on my homepage. It is the Welcome Popup photo that I am having issues with. Here is the link. https://focalimagedesigns.net/?_ab=0&_fd=0&_sc=1

Password to view the store is giZ@0743 it takes 14 seconds for the popup to show. I was going to attach a copy of the image I was trying to use but for some reason I get an error saying The file type (.png) is not supported. Valid file types are: mpp, xls, xlsx, ppt, pptx, csv, mp4. I even tried a jeg and I get the same error. 

[AliReviews]

Hello @Focused4ever 

If the popup image on your website appears blurry, there are several potential causes and solutions to consider:

• Image scaling: If you're scaling the image up or down to fit the popup window, this could cause the image to appear blurry. Try using an image that's already the correct size for the popup window, or adjust the image scaling settings to maintain the image's aspect ratio.
• CSS settings: Check your website's CSS settings for the popup window and image. If the CSS settings are causing the image to be stretched or distorted, this could cause blurriness. Try adjusting the CSS settings to ensure the image is displayed at its native resolution.
• Browser compatibility: Certain browsers may handle images differently, which could cause blurriness in the popup window. Test the popup image on different browsers and devices to see if the blurriness persists. You may need to adjust your website's settings or code to ensure compatibility across different browsers.
• Plugin or theme issues: If you're using a third-party plugin or theme for your website, check the settings and documentation for the plugin or theme to see if there are any known issues with popup images. Try disabling any plugins or themes that may be causing the issue and see if the popup image appears clear without them.

Hope this can help.

Regards,

Ali Reviews team

[Focused4ever]

I am not sure if this would help you to help me better but I designed this ebook on Visme and so I exported the first 2 pages into a .jpeg and then uploaded them both into Canva. I then created a new project in Canva the exact size that Shopify asks for which is 600 x 875 px. I then added the 2 jpeg images into the project and resized them smaller so they would both fit in that space and that is right when they get really blurry and funky looking. I tried a free enhancement program on the images and that did not work. I also tried a image optimizer for web and that did nothing. I even tried screenshotting a pdf of the original file and that did not work. I should also mention that I had a similar image in that space before and it looked great. So I think I am doing something wrong when moving it around from place to place. Does that help at all?

[Focused4ever]

I have done some more testing on my issue here and everything is pointing me in the direction that it is either Shopify or my Theme that is making my photo blurry. I did try a new browser and that did not work. I also created a project in Canva using a free template with crisp photos and text and I made it from the beginning the exact size that shopify is asking for and it is still blurry. So there is something odd going on here. I was not able to find the CSS settings and even if I did I would not know what to look for or what to do with them. Do you all have any other ideas for me? Since my Theme is a 3rd party from out of the sandbox and I am still using the old version they say they cant help me and Shopify says that they think it may deal with my code in the Turbo theme and they are not coders. I am in real deep here if I cant get this fixed I cant launch my store. Please help!

[Focused4ever]

Does anyone have any more input on this situation I am having? I also just found out that the phot I am using is nice and clear on my mobile view but on my desktop view that is where it is blurry looking. Please can anyone help?

[smush1]

Hi, you can go to the uploaded files, by navigating to the Content --> File in shopify admin panel.
Copy the link that you want to show as pop-up

Paste the link here in image tag

After this it will work