Facebook data feed; 1:1 Square image cropping problem

Our Shopify product portrait images are appearing as square images in Facebook’s Commerce Manager via the Facebook channel data feed. White borders on the left and right of each image have been added by default in the Facebook data feed to make it square. We want to crop into the portrait image using FB’s Image Cropping tool within Commerce Manager rather than have this border. How do we correct this issue?

See example of datafeed URL for one of the product images which ads the white padding:

https://cdn.shopify.com/s/files/1/0304/0464/0901/products/IMG_2524_RightSide_LongLogo_1080x1080_pad_ffffff.jpg.jpg?v=1610110125

Shopify product page for reference:

https://hitmansportswear.com/…/black-classic-gym-shorts

1 Like

Hey, @hitmansports .

Tira here to help.

Thanks for the screenshot and a link to your product page. I can see how it would be frustrating to continue to have white borders around your images when they are showing on Facebook. I want to shed some light on this for you. Facebook requires a default aspect ratio of 1:1 or 16:9 for images uploaded to Facebook’s product catalog or ads. If your images aren’t already meeting this requirement, then your image may be adjusted as it was in your example.

Are you trying to publish ads on Facebook? I did some research, and Facebook does have an image cropping feature but it is only available if you’re advertising on Facebook, and not for commerce (if you have a shop). You can check out their documentation that mentions this here: Product Image Specifications for Catalogs and for best practices with their images. We also have a blog post that outlines the best practices for different types of ads on Facebook here: Facebook Creative That Converts: How (and When) to Use Different Ad Types.

If you’re looking to crop your images to a square ratio. I recommend using an image resizing tool so that you have more control over what your final image will look like. Here is our free online image resizing tool that you can use.

Is this what you were looking to do?

We have exactly the same issue. It’s not only about creating ads via the product feed, but it’s rather about the Instagram Shopping feature. Since Shopify seems to be adding the white borders automatically, the images do not get cropped to fill the square frame of the Instagram Shop containers.

In addition to that we encounter the issue that only the first product image is included in the product catalog that is synced with Facebook. You can check the issues in our Instagram Shop: https://www.instagram.com/vibesonly_official/shop

@vibesonly
I have seen that your store has solved it, can you tell me how you did it please?

We are also curious how you solved it! We would be so appreciative to know! @vibesonly

Yes, I solved it by using the following instructions as a basis: https://bit.ly/33YzMJp

You can quite easily add additional fields to that XML feed (e.g. additional product images). Let me know if you need more info about certain details.

Hi! I tried using the instructions at this link but my images are still importing as 1080x1080px with white borders. I’m not really sure what else to do at this point. Has anyone else been able to resolve this issue?

1 Like

Hi, i know its an old post but could i get some more help on how you fixed the issue? Everytime i post a url to a product on my store it crops the image. Thanks

2 Likes

Found out a way to solve this image cropping issue completely. I used a third party app for this. Its cald Flexify & it did solve the issue not by cropping but enhancing image such that no element is dropped. This feature in app is cheap like 4-5 USD. Hope this solves your issue. Thanks