You can add this code to your theme.liquid file after to solve it
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.