Why isn't my Palo Alto header background transparent?

Store Design

Topic summary

A Shopify store owner using the Palo Alto theme is struggling to make their header background transparent despite using a PNG logo image.

Solutions Provided:

Multiple community members offered CSS-based fixes:

  • biznazz101 suggested adding code to Header.liquid above the /body tag with a template condition
  • PageFly-Oliver recommended inserting code at the bottom of the theme.liquid file
  • Made4uo-Ribe provided the most detailed solution:
    • Navigate to Online Store → Themes → Edit code
    • Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
    • Add CSS targeting the header element with background-color: transparent
    • Additional CSS adjustments for image lazy loading and main content margin

Outcome:

The original poster confirmed that Made4uo-Ribe’s solution successfully resolved the issue. The discussion also noted that sticky header modifications are available if needed.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
3

Hi @OTH3RS ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly