Background Colour of logo changing in header when using custom product template.

Background Colour of logo changing in header when using custom product template.

gshift
Tourist
3 0 1

Hi there,

I'm having an issue when applying a custom product template to certain products - it is affecting the background colour of my logo in the header on the product pages.

Some background:
1) my logo in the header is a .png image file, with no background.
2) I'm using the debut theme.
3) For some products I want to remove the "Add to cart" and "Buy it now" buttons.
4) To do this, I created a copy of the Product.liquid file, and then also created a copy of the Section.liquid file.
5) In the Section.liquid file, I queried the parts of the code for these 2 buttons, and commented them out using {% comment %} and {% endcomment %}.
6) Now when I view these web pages, my logo has a light grey background behind it. I'm not sure why it is doing this.
7) On other product pages still using the original .liquid files, the logo displays correctly as it should, without any background (i.e the entire header is white).

Can someone please assist me with this? I'm looking to launch my store next week, but it looks rather silly that some product pages have this grey block behind the logo in the header.

Thanks

 

Replies 9 (9)

gshift
Tourist
3 0 1

See screenshots below.

 

In this first screenshot, the Add to Cart button is still visible, note how the logo in the header has a transparent background, so it overlays nicely on the white of the header:

 

fixed.PNG

 

 

Now, in this next pic, I've commented out the Add to Cart button in the code of the custom Section.Liquid form.  The button is now hidden (as expected), but now the logo has a grey background in the header:

 

broken.PNG

 

 

I hope this helps to clarify my problem.

 

Thanks

Michael_Pink
Shopify Partner
446 77 107

Hi @gshift 

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
jlove
Shopify Partner
5 0 1

Hi there, I'm having the same problem except I just created a custom About page and now I have a grey box behind my logo and other uploaded images (despite the images having a transparent background).  The url is https://beryl-bob-illustrations.myshopify.com/ page is https://beryl-bob-illustrations.myshopify.com/pages/about and password is beryl.

Would really appreciate the help.

Thanks

Michael_Pink
Shopify Partner
446 77 107

Hi @jlove 
The reason is in your theme has a style for the element use animation.

You can try follow this path:
Themes => edit code => asset => theme.css.liquid
and add this code to bottom of the file theme.css.liquid

[data-image-loading-animation] {
background-color: transparent!important;
}


 

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
jlove
Shopify Partner
5 0 1

Hi @Michael_Pink 

Thanks for the code, I gave it a try but it didn't work.  I've created other custom pages in different website but didn't have this problem.

Any other ideas?  Thanks

gshift
Tourist
3 0 1

I ended up logging a call with Shopify support. It turns out that there is a bug in the older code of the Debut theme.  They then updated some code somewhere and now my issue is resolved.

Contact them and see if they can help. You also have some free support hours as far as I know.

jlove
Shopify Partner
5 0 1

Thanks @gshift  Will do that.

Cheers

Michael_Pink
Shopify Partner
446 77 107

Hi @jlove 
so sorry for my mistake.
You can try follow this path:
Themes => edit code => asset => theme.css.liquid
and add this code to bottom of the file theme.css.liquid

.site-header__logo-image {
    background: transparent!Important;
    animation: none!important;
}
My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
tmchavez
Visitor
1 0 0

Thank you!!!!