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

Store Design
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

2

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
fixed.PNG920×771 227 KB

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
broken.PNG898×756 229 KB

I hope this helps to clarify my problem.

Thanks

3

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.

4

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

5

Hi @jlove_1
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;
}
6

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

7

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.

8

Thanks @gshift Will do that.

Cheers

9

Hi @jlove_1
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;
}
10

Thank you!!!