https://youtu.be/pVenuGNCkhk
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;
}
}