How can I create a transparent header for Publisher Theme?

Store Design
, ,

Topic summary

Goal: make the Shopify Publisher theme header transparent on desktop and mobile, ideally without affecting the announcement bar.

Key approach:

  • Add custom code in theme.liquid near the head (before , or after if no closing tag).
  • Use a Liquid conditional (e.g., {% if template == ‘index’ %} … {% endif %}) to limit transparency to the homepage; remove the conditional to apply sitewide.

Outcomes:

  • Original poster confirmed the homepage fix worked, then expanded to all pages after updating the code. Later noted the announcement bar text became clipped/uncentered; no posted resolution.
  • For another store (Popularitems), mobile issues were fixed by removing a conflicting mobile CSS rule in theme.scss.liquid or by applying the head-based fix, then constraining transparency to the homepage via the Liquid conditional. Resolved.

Related guidance:

  • Performance: disable lazy load on hero/banner/logo; convert hero images to .webp.
  • If layout breaks after edits (e.g., product grid sizes), revert theme.scss.liquid changes (undo) and re-save.

Open items:

  • Announcement bar clipping not addressed.
  • One user’s header shifted down after adding code; desired result shown in screenshots but unresolved.
  • Requests about grid uniformity, custom liquid widths, and a Dawn testimonial slider remain pending.

Reference: a YouTube tutorial link for Publisher transparent header was shared.

Summarized with AI on December 19. AI used: gpt-5.
20

Code updated

{% if template == 'index' %}
 
{% endif %}