Solved

Product bar image BG

  • 4 March 2022
  • 7 replies
  • 78 views
C
Rank
Badge +2

Hey everyone happy Friday. I’m building out a product bar in the new template (had this issue with the old template as well). Our product info/image populates from Woo Commerce through our website. The product images are .png files originally so should have a transparent BG. The email preview has a regular colored BG of my choice, but when the test goes out it has a black square around the image (see screenshot) both on mobile and on desktop. Any ideas on how to correct this?

 

icon

Best answer by David To 8 March 2022, 23:09

View original

7 replies

David To
Rank
Userlevel 7
Badge +60

Hello @Carla,

Great question!

I would suggest double checking to make sure the product image that is being stored and shared by WooCommerce actually has a transparent image. Often times an image with a transparent background will actually have a default composition background of black unless it has truly been removed/omitted. Certain inbox providers will still recognize this background and render it despite having a transparent background set. 

On small occasions, I’ve also seen this occur from users utilizing third-party image optimizing tools where the tool will apply a default composition background during the optimization process. 

If you were still having troubles, you may want to consider finding and working alongside an email designer or reaching out to WooCommerce for further assistance as Klaviyo doesn’t perform any edits on the images shared to it. Rather, Klaviyo will only relay the image. 

I hope this helps!

David

C
Rank
Badge +2

I’m the one supplying the .png photos so Im sure they are transparent in background. Spoke with my IT guy who says its a consequence of “dark mode” feature on phone or computer. But my coworker sees the black boxes without dark mode selected. So its still a mystery...

C
Rank
Badge +2

Also, it’s showing up transparent on my IT persons browser, so it’s not an inherent problem with the image file. 

David To
Rank
Userlevel 7
Badge +60

Hey @Carla, 

Thanks for those additional insights! When testing are both yourself, your coworker, and your IT person using different inbox providers or different email applications? If so, then this leads me to believe it is on the inbox provider’s side of things. Different inbox providers, in combination with whatever email application you are using would render emails differently. 

For this reason we typically recommend utilizing tools such as a Litmus or Email on Acid to preview how your emails will appear on different browsers, email applications, and inbox providers. 

In addition, Klaviyo makes no changes or adjustments to images shared to it. In this case, if you’ve ruled out there isn’t an inherent issue with the image’s transparency, then this leads back to the inbox provider’s methods of rendering the image. 

David

C
Rank
Badge +2

In the case that it is the interpretation of each inbox provider, then there would be nothing to do regarding this? 

David To
Rank
Userlevel 7
Badge +60

Hey @Carla,

I wouldn’t entirely say there is nothing you can do about this. This would be something you want to keep in mind as you design your emails. This is also why preview tools such as Litmus and Email on Acid are so handy. 

One potential solution would be instead of using a transparent background to set a background for your images such as a white. If your image has a set background color, inbox providers will simply see that as part of the image and would typically not override or make any changes to the image. 

David

C
Rank
Badge +2

If Litmus or Email on Acid would only let me view that the boxes are showing but not have the capabilities to change it, I’m trying to minimize my plug ins so probably won’t go that route.

We would have to redesign the website in order for them to have a solid background, as they live on pages with white background and other times blue. I’m curious if other users have had this same issue and have found work-arounds.

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.