Logo changes colors on product page. Help!

Technical Q&A
1

Hello,

I have my Shopify store set up the way I want it, and the logo I am using has a transparent background. However, when you go to my product’s page, https://dogobottle.com/products/dogobottle-premium-dog-water-bottle, the background of the logo turns a gray color. Is there any way I can get this issue fixed? It doesn’t do it on any other website pages, just the product page.

Any advice/help would be highly appreciated.

Thank you in advance.

www.dogobottle.com

2

When your site loads, your image wrappers has data-image-loading-animation attribute assigned. This is to show some pulsating background animation while images are not fully loaded yet.

When your theme.js asset runs, there is a code at the bottom which removes this attribute.

On your product page, you’ve replaced your themes default code with one generated by PageFly. However, theme.js still tries to process this page and fails before the aforementioned attribute-removing code is run, leaving this background visible.

Frankly, I’d consider it a glitch in PageFly.

Here is a fix – open your theme.js asset, find this code:

theme.Product = (function() {
  function Product(container) {
    this.container = container;

and change it to:

theme.Product = (function() {
  function Product(container) {
    this.container = container;
    if( this.container.id == "__pf") 
      return;

This way the theme would not try to process the Product page if it’s replaced by PageFly and would not fail.

1 Like
3

Thank you so much tim. It worked!