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

Leave a Reply