Change logo when a user scrolls down Dawn theme

Store Design
, ,

Topic summary

A user running Dawn Theme 10.0.0 wants to implement a logo change when visitors scroll down the page, similar to functionality seen on blurong.com.

Proposed Solution:
One responder provided a detailed technical approach:

  • Access theme code via Shopify admin (Online Store > Themes > Edit code)
  • Locate and modify the header.liquid file
  • Add JavaScript scroll event listener to apply a “scrolled” CSS class to the header element
  • Define CSS styles to display different logos based on whether the “scrolled” class is present
  • Test and save changes in the theme editor

Implementation Questions:
The original poster requested clarification on:

  • Exact placement of the JavaScript code within their existing header code
  • Identification of the correct CSS selector for their header element

Alternative Approach:
Another contributor suggested using GSAP library combined with Liquid code as a simpler solution, offering direct assistance via Instagram.

Status: The discussion remains open with implementation details being worked out.

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

We are using Dawn Theme 10.0.0 and the store link is https://vogueorgy.myshopify.com/

We would like to use a different logo when as soon as a user scrolls down on the webpage. Something like on this website: https://bluorng.com/.

Thank you!

2

@anirudh_singh
Hello,

To change the logo when a user scrolls down in a Shopify theme (such as the Dawn theme), you’ll need to modify the theme’s Liquid files. Here’s a general approach to achieve this:

  1. Access your Shopify theme: Log in to your Shopify admin panel and navigate to the “Online Store” > “Themes” section. Locate the Dawn theme and click on the “Actions” button, then choose “Edit code” from the dropdown menu.

  2. Find the theme’s header file: In the theme editor, locate the header file that controls the logo display. This file is usually named “header.liquid” or similar. Open this file in the code editor provided by the theme editor.

  3. Add a scroll event listener: Inside the header file, find the section or the code responsible for rendering the logo. You’ll need to add a scroll event listener to the JavaScript code to handle the logo change. Here’s an example of how you can do this:

    liquid

In this example, the code adds a CSS class “scrolled” to the header element when the user scrolls down. You’ll need to define the appropriate CSS rules to change the logo when this class is present.

  • Define CSS styles: In the same header file or in a separate CSS file linked to the theme, add the necessary CSS styles to change the logo based on the “scrolled” class. Here’s an example:

    css

/* Replace '.site-header' with the CSS selector for your header element */
.site-header {
  /* Styles for the default logo */
}

/* Replace '.site-header.scrolled' with the CSS selector for your header element with the 'scrolled' class */
.site-header.scrolled {
  /* Styles for the scrolled logo */
}

Customize the styles within the “.site-header.scrolled” block to display the desired logo when the user has scrolled down. You can adjust properties like background image, width, height, or any other relevant styles to achieve the desired effect.

  • Save and test: Save your changes in the theme editor and preview your website. As you scroll down, the logo in the header should change according to the applied styles.

Note: The exact file locations and code structure may vary depending on your specific theme. It’s important to take backups and exercise caution when modifying theme files to avoid any unintended issues.

3

@oscprofessional

This is the code related to header. Where do i place the script within this?

Also, what is the css selector for the header element according to the above code?

4

Hi Anirudh,

I just saw your question and here my suggestion / simple steps for you to execute it, Use GSAP lib and Liquid code and all set.
And Yes I’m the one who developed your reference website bluorng.com & many more..

If you need more help, feel free to ping me on my IG @Dev .nileshrao

Happy to help,
Nilesh Thorath