I am building collections with the Ride theme. I have loaded png files onto the collections in the product section. When I look at them on the theme editor, the outlying area is filled with white. Also, when I look at them live, they are severely cropped. The files are all png files that were saved with an aspect ratio of 16 x 9. The area that is not filled with pixels is transparent.
Hey @BixFoot
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
Major586!
Hey @BixFoot
Can you please share a screenshot or a link of the transparent image because I checked most of the images on your website and was unable to locate any transparent image. Most of the images have a white background on your website.
Best Regards,
Moeed
Hey @BixFoot
I don’t need the admin URL if you can share a screenshot then that would be great.
Best Regards,
Moeed
That is the point. They are PNG files. I don’t want the white background. It’s okay for the actual products, but for the collection page banner, I want only the image I load with no white background.
And you see that the white background only shows up on the rectangular images and not on the images of bigfoot by himself. Also, they are all severely cropped.
Hey @BixFoot
Upon checking those images, they are uploaded on White background instead on a transparent background. I suggest you to change your image and make them PNG first then upload again.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
If you look at ‘designs’ ‘Bigfoot WalMart Greeter’ and ‘Bigfoot WalMart Greeter Scene’, you will be able to see the distinct design types of the files.
Hey @BixFoot
Yes, I did checked that image and as you can see the image itself has a white background so I suggest you to remove the background first.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
That white background is being generated by Shopify. Unfortunately, this platform will not allow me to send the image. The image sits in the center of the screen. There are large transparent areas on either side. It is then saved as a PNG file. It is the same as the files that have only Bigfoot with no scene, except those files do not fill with white. And there is still the issue of the extreme cropping in live mode.
It is definitely a PNG file and when I open the file back up in Photoshop, it opens with the transparent background exactly as it should.
Hey @BixFoot
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
I am attaching dropbox links to the file properties and how it looks in Photoshop before I save it as a PNG
And there is still no clue as to why they are cropping so drastically when I look at the site live.
The plot thickens. I didn’t understand why the files with Bigfoot alone did not fill in. I went to Photoshop and shrunk and rotated the file that is not working and saved it as a PNG. No background fill. The theme seems to have some issue with the rectangular shape with no gaps.
It is a collection called ‘test’. I put it on the main menu.
But is still crops the image a lot
That is better, but still a problem. There is another collection called Bigfoot Highway. The file itself is 1920x 1080, but the actual design is not that wide. There is transparency on either side, but the design is substantially wider that the WalMart Greeter Scene. When this one goes live, it crops the image severely on the side. Isn’t there a way for me to upload a file with an aspect ratio of 16x9 and have any transparency filled with the section background color?