Logo changes colors on product page. Help!

Solved
Dogobottle
New Member
2 0 0

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

0 Likes
tim
Shopify Expert
2926 143 1021

This is an accepted solution.

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.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Dogobottle
New Member
2 0 0

Thank you so much tim. It worked!

0 Likes