How can I insert a second logo when switching from a transparent to a white header?

Shopify Discussion

Topic summary

Main issue: Add a second logo so the site can swap logos when the header changes from transparent to white in the Shopify Dawn theme.

Context: The header was made transparent on load and white on scroll using an external guide; text color switches automatically, but the logo does not. The need is for a separate logo per header state.

Proposed approach: Create a second logo field in the header settings, customize header.liquid to render two logo slots, and use JavaScript to toggle which logo shows based on header transparency/scroll state.

Actions/outcome: A contributor edited the theme and implemented the change directly; the original poster confirmed it works perfectly. No code snippets or step-by-step instructions were shared publicly in the thread.

Current status: Resolved for the original poster. Another participant later requested help, noting the accepted solution appears blank, so the thread lacks a reusable, documented solution.

Open items: Publicly share the specific header.liquid and JavaScript changes (fields added, conditions, and toggle logic) so others can replicate the fix.

Summarized with AI on February 7. AI used: gpt-5.
1

Hello,

For my site I have made my header transparant and when scrolling a white sticky header by following these instructions: https://jotting.com/shopify/how-to-make-dawn-theme-header-transparent. This has worked perfectly, the text automatically switches to black. However, there is no option to switch the logo to another one/colour when switching from the transparent to the white logo. In the comments they tell you: “you would need to create a second logo field and add a switcher so when transparency is on show the second, when it’s not, show the original, then you need to do a bit of JavaScript to switch between.” I thus need the ability to insert a second logo.

I am very unexperienced with css so I hope somebody will be able to help me provide the right codes. Thank you so much for your time in advance.

Greetings,

Mel

Store link: https://gtke6k4lllozzepm-62119084228.shopifypreview.com

2

Hi @mel999 ,

We need to customize the header.liquid file to create two logo section

3

Dear SmallTask,

I am struggling to find the right codes in this section, could you help me further with this? Store url is: https://phantommousepads.myshopify.com/?_ab=0&_fd=0&_sc=1

4

I just added code to theme, you can check and give me feedback

1 Like
5

Wow thank you so much, you helped me enormously!! It looks perfect :slightly_smiling_face: Can not thank you enough.

6

you are welcome, I glad when can help you

7

Hi PageFly, I’m having the same trouble with my website with this particular issue too. Would you mind helping me out as well? The accepted solution in this discussion seems to be blank. Thanks in advance :slightly_smiling_face: