Sticky Logo on Home Page scroll

Hey everyone, I am trying to do the logo animation like on the Acne Studios website, where the logo stays fixed on the home page even when scrolling until the end of the page, and then when you go to buy an article the logo is on the header. This is what I mean: https://www.acnestudios.com/

Is there anyway to do this on shopify? Thank you in advance

Hi @Carooo

Yes! You can achieve the Acne Studios-style logo animation on Shopify by using CSS and JavaScript to keep the logo fixed on the homepage while scrolling and then transitioning it to the header when navigating to other pages.

Steps to Implement:-

Go to Shopify Admin β†’ Online Store β†’ Themes
Click Customize β†’ Edit Code
Open the header. liquid file and locate the logo.
Wrap the logo inside a div with an ID

Yes, you can achieve a similar effect on Shopify by using custom JavaScript and CSS. You would need to create a fixed-position logo on the homepage that stays in place while the user scrolls. When the user navigates to other pages or interacts with the site, you can use JavaScript to hide the logo and display it in the header. This may require some custom coding or the help of a Shopify developer if you’re not familiar with coding. Additionally, you could explore apps like PageFly or Shogun for more advanced layout customizations.

Hey! would you be able to give more details on how to achieve this? Thankyou!!