Insert rolling marquee on my Products page (Basel theme)

KatjaUK
Excursionist
14 0 5

Hi!

I am looking at inserting a rolling marquee on the top of our Products page just below the Menu bar but I can't seem to do it.

This is the code for it!

 

<!-- CSS Code -->
<style type="text/css" scoped>
.GeneratedMarquee {
font-family:sans-serif;
font-size:3em;
line-height:1.3em;
color:#23402A;
padding:0.1em;

}
</style>

<!-- HTML Code -->
<marquee class="GeneratedMarquee" direction="right" scrollamount="9" behavior="scroll">Supercharge your day. </marquee>

 

The expected text effect should be like on this page https://streamline-theme-luxe.myshopify.com in case of "Free shipping and local pick up" message a bit further down the page.

 

Could anyone help advising me where should I insert it to make it work.

Many thanks!

0 Likes
HardikDavra
Shopify Partner
2222 344 960

Hello @KatjaUK 

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.Marquee {
  background: -webkit-linear-gradient(225deg, #008ed9, #8b00db);
  background: -moz-linear-gradient(225deg, #008ed9, #8b00db);
  background: -o-linear-gradient(225deg, #008ed9, #8b00db);
  background: -ms-linear-gradient(225deg, #008ed9, #8b00db);
  background: linear-gradient(-135deg, #008ed9, #8b00db);
  width: 85vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  color: #fff;
  font-weight: 200;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
}
.Marquee-content {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-animation: marquee 10s linear infinite running;
  -moz-animation: marquee 10s linear infinite running;
  -o-animation: marquee 10s linear infinite running;
  -ms-animation: marquee 10s linear infinite running;
  animation: marquee 10s linear infinite running;
}
.Marquee-content:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  -ms-animation-play-state: paused;
  animation-play-state: paused;
}
.Marquee-tag {
  width: 200px;
  margin: 0 0.5em;
  padding: 0.5em;
  background: rgba(255,255,255,0.1);
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.Marquee-tag:hover {
  background: rgba(255,255,255,0.5);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  cursor: pointer;
}
@-moz-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@-o-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}


Please below code wherever you want to implement marquee 

<div class="Marquee">
  <div class="Marquee-content">
    <div class="Marquee-tag">1</div>
    <div class="Marquee-tag">2</div>
    <div class="Marquee-tag">3</div>
    <div class="Marquee-tag">1</div>
    <div class="Marquee-tag">2</div>
    <div class="Marquee-tag">3</div>
    <div class="Marquee-tag">1</div>
    <div class="Marquee-tag">2</div>
    <div class="Marquee-tag">3</div>
    <div class="Marquee-tag">1</div>
    <div class="Marquee-tag">2</div>
    <div class="Marquee-tag">3</div>
  </div>
</div>

 

 

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
KatjaUK
Excursionist
14 0 5

HI Thanks!

And in the codes you propose, where is the place to put the actual text content of the marquee, i.e. the text I would like to be sling on the page?

Thanks!

0 Likes
HardikDavra
Shopify Partner
2222 344 960
<div class="Marquee">
  <div class="Marquee-content">
    <div class="Marquee-tag">{{ PLACE YOUR TEXT HERE }}</div>
  </div>
</div>
PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
KatjaUK
Excursionist
14 0 5

Just tried it and it does not seem to work. The Text appeared on the webpage, however it is just static, not sliding/moving anywhere.

 

0 Likes
HardikDavra
Shopify Partner
2222 344 960

Please provide me website URL for analyzing.

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
KatjaUK
Excursionist
14 0 5

www.bewelldrinks.co.uk

pass chibeu

I attempted to place it above footer on the main page...just for testing.

0 Likes
HardikDavra
Shopify Partner
2222 344 960

Please Go to Online Store -> Themes -> Edit code -> Assets -> tab_shopify.min.css and paste this code at the end of this file.

.Marquee {
  background: -webkit-linear-gradient(225deg, #008ed9, #8b00db);
  background: -moz-linear-gradient(225deg, #008ed9, #8b00db);
  background: -o-linear-gradient(225deg, #008ed9, #8b00db);
  background: -ms-linear-gradient(225deg, #008ed9, #8b00db);
  background: linear-gradient(-135deg, #008ed9, #8b00db);
  width: 85vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  color: #fff;
  font-weight: 200;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
}
.Marquee-content {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-animation: marquee 10s linear infinite running;
  -moz-animation: marquee 10s linear infinite running;
  -o-animation: marquee 10s linear infinite running;
  -ms-animation: marquee 10s linear infinite running;
  animation: marquee 10s linear infinite running;
}
.Marquee-content:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  -ms-animation-play-state: paused;
  animation-play-state: paused;
}
.Marquee-tag {
  width: 200px;
  margin: 0 0.5em;
  padding: 0.5em;
  background: rgba(255,255,255,0.1);
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.Marquee-tag:hover {
  background: rgba(255,255,255,0.5);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  cursor: pointer;
}
@-moz-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@-o-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}
PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
KatjaUK
Excursionist
14 0 5

Great, thank you! it works now.

And could you please let me know how to make text sliding in circle indefinitely. Because at the moment it goes from left to right until the end and then the whole sentence is appearing again.

You can check the home page for better understanding of what I mean.

Thanks you!

0 Likes
KatjaUK
Excursionist
14 0 5

Actually I just solved it.

The final question though, how to decrease the space between the sentences?

Thanks!

 

0 Likes