Question 11611 in Shopify Question posted in
The Shopify help center can be found here.

Change logo on scroll Shopify dawn theme

I would like to know how to use javascript to change the source of the logo image after scrolling a certain amount in shopify dawn theme.

Tags:

2

Answers


  1. 0

    This isn’t tested but you can do it like this

    const heightToAdjustElement = 350;
const newLogoSrc = "cdn.shopify.com/s/files/1/0551/9242/0441/files/Dawn_logo_90x.png"

window.addEventListener('scroll', (event) => {
  if (document.body.scrollTop > heightToAdjustElement || document.documentElement.scrollTop > heightToAdjustElement) {
  document.querySelector('.header__heading-logo').src = newLogoSrc;
}
});

    You should create a new section setting for the alternative logo too and link the js variable newLogoSrc with what ever that is something like {{ section.settings.alternative_logo }}

    https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event

    https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

    Login or Signup to reply.
  2. 0

    Try these CSS code

      .shopify-section-header-sticky .header__heading-link{
    background-image: url("https://cdn.shopify.com/s/files/1/0678/1567/0065/files/GrowGen-web-logo-2021_new_1_2.png?v=1668927470&width=250");
    background-size: cover;
    background-repeat: no-repeat;
    width: 250px;
    height: 90px;
 
    }

  .shopify-section-header-sticky img{
    display:none;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search