How do I achieve this banner (home page only) for Dawn Theme?

Store Design
, , ,

Topic summary

A user seeks to implement a transparent header banner that appears only on the homepage of their Dawn theme Shopify store. The banner should:

Key Requirements:

  • Display transparent overlay on homepage only
  • Turn white/solid when scrolled down
  • Be mobile responsive
  • Maintain proper contrast for accessibility

Solutions Provided:

  • One contributor shared a YouTube tutorial video with source code
  • Another provided specific implementation steps: navigate to Online Store → Edit Code → theme.liquid file, then add custom code above the </body> tag

Current Issues:

  • Logo visibility concerns: the logo washes out against certain backgrounds (particularly orangish-pink sections)
  • Technical error detected: missing custom-badge-product-card snippet causing a Liquid error (line 245 in card-product snippet)

Accessibility Warning:
A contributor emphasized ensuring sufficient contrast between menu/text and background images, especially on hover states, to avoid undermining website accessibility.

The implementation appears partially successful but requires refinement for logo visibility and error resolution.

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

How do we achieve this? for home page only

Website: https://leletny.com/

Screenshot 2024-10-04 025604.jpg
Screenshot 2024-10-04 025604.jpg1898×866 134 KB

My store: https://ec0594-06.myshopify.com/ - pw awsteu

2

@AliceInLaLaLand Hello this need some customization. You can follow this video you will get source code too https://www.youtube.com/watch?v=J2Kaj4TlHt8

3

Hey @AliceInLaLaLand

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-1727982718569.png
Moeed_0-1727982718569.png1906×914 264 KB

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

Best Regards,
Moeed

4

Hi @AliceInLaLaLand :waving_hand: :bomb: Note well: When doing transparent overlays specifically ensure there is a background or other contrasting behavior for the menu/text to stand out from image-content when hovered otherwise you are fundamentally undermining the contrast(accessibility) or your website.

Good Luck.

5

Should turn white when scrolled down and only applies on the home page

6

yes, should be mobile responsive and on the home page and should turn white when scrolled down

7

Thanks! Is there any way this can only be applied on the index or home page?

8

@AliceInLaLaLand looking good so far though the logo gets washed out in some backgrounds like the first with orangish-pink.

And check the collection sections lower on the page there an error for missing custom-badge-product-card snippet.

Liquid error (snippets/card-product line 245): Could not find asset snippets/custom-badge-product-card.liquid