Dawn theme transparent header

Store Design
, , , , , , , , , ,

Topic summary

Goal: make the Shopify Dawn header semi‑transparent (~80%) and overlay the banner; the store preview link and password were shared.

Proposed approaches:

  • Edit Online Store > Themes > Edit code > theme.liquid and add custom code near the tag; a result image was shown, but the actual code snippet is missing in the post.
  • Add code after in theme.liquid, wrapped in a Liquid condition {% if template == ‘index’ %} … {% endif %} to apply only on the home page; a screenshot was provided, but the code content is empty.

Context/resources:

  • A participant cautioned against excessive tagging (“label spam”) and linked to forum search results for Dawn transparent headers.

Technical notes:

  • theme.liquid is the main layout file; “index” refers to the homepage template. Achieving 80% transparency typically requires CSS (e.g., rgba() background or opacity) and positioning to overlay the banner.
  • Images are referenced to show the intended result, but no concrete code is included.

Status:

  • No confirmed solution in the thread; key missing detail is the actual CSS/Liquid to implement the transparency. Discussion remains open.
Summarized with AI on December 16. AI used: gpt-5.
1

Hi,

I’m looking for help making the header transparent so it overlays on the banner. I’d like it to be 80% transparent/ semi transparent.
Any assistance would be greatly appreciated!

Link: https://testingstoresandthemes.myshopify.com/
storefront password: lock

2

Hey @technase

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1729016342981.png
Moeed_0-1729016342981.png1893×906 368 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

@technase try to correct your post to avoid label spam, it doesn’t help and makes it harder for everyone to find relavant info.

And if you keep doing it when you have a deeper issue that really matters you’ll just get ignored.

transparent headers is a common topic found in search https://community.shopify.com/c/forums/searchpage/tab/message?advanced=false&allow_punctuation=false&filter=location&location=forum-board:ecommerce-design&q=dawn%20theme%20transparent

4

Hi @technase

You can do that by adding this code to theme.liquid file, after in Online Store > Themes > Edit code

{% if template == 'index' %}

{% endif %}

Screenshot 2024-10-16 at 09.46.45.png
Screenshot 2024-10-16 at 09.46.45.png2612×1370 598 KB