You are currently viewing How to Add Marquee in Shopify Announcement Bar ?

How to Add Marquee in Shopify Announcement Bar ?

Add below code in your theme.html and keep inside <style>...</style> above close tag of head </head>

/**
-----------------------------
Add below scss in theme.liquid file to make announcement bar
marquee left to right

-----------------------------
*/

.announcement-bar__message {
    padding-left: 0px;
    padding-right: 0px;
    white-space: nowrap;
     -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 27s linear infinite;
  }
  .announcement-bar {
      overflow: hidden;
      height: 40px;
  }
  
  @-moz-keyframes scroll-left {
    0% {
      -moz-transform: translateX(100%);
    }
    100% {
      -moz-transform: translateX(-100%);
    }
  }

  @-webkit-keyframes scroll-left {
    0% {
      -webkit-transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-100%);
    }
  }

  @keyframes scroll-left {
    0% {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    100% {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
  @media only screen and (max-width: 800px) {
    .announcement-bar__message {
      font-size: 13px;
        animation: scroll-left 20s linear infinite;
    }
    .home-page-video video {
      width: 100%;
    }
    #shopify-section-slideshow img, .index-slideshow-section img  {
        height: unset !important;
/*         opacity: 0.8 !important; */
    }
    #shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
        height: 400px;
    }
    
    @-moz-keyframes scroll-left {
    0% {
      -moz-transform: translateX(100%);
    }
    100% {
      -moz-transform: translateX(-150%);
    }
  }

  @-webkit-keyframes scroll-left {
    0% {
      -webkit-transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-150%);
    }
  }

  @keyframes scroll-left {
    0% {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    100% {
      -moz-transform: translateX(-150%);
      -webkit-transform: translateX(-150%);
      transform: translateX(-150%);
    }
  }
  }
  @media only screen and (max-width: 600px) {
    #shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
      height: 260px;
    }
    
  }
  @media only screen and (max-width: 500px) {
    #shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
      height: 240px;
    }
    
  }
 

Try Shopify free for 14 days

This Post Has One Comment

  1. Eiman

    you are literally the best, all your codes are safe to use and they all WORK! you got yourself a subscriber and also someone that will refer back to you. thank you so much for making it easier for us to use the codes.

Leave a Reply