Adding auto-scrolling text in homepage

We will try to add a non-stop horizontal scrolling banner containing a brand name on the top of our store.

Open the layout.html page and the following HTML code to it just inside the body tag or anywhere as per your requirement

<div class="scroll">
  <div class="m-scroll">
    <span style="rbackground: cyan;">BRAND | BRAND | BRAND </span>
    <span style="rbackground: cyan;">BRAND | BRAND | BRAND </span>
    <span style="rbackground: cyan;">BRAND | BRAND | BRAND </span>
    <span style="rbackground: cyan;">BRAND | BRAND | BRAND </span>
    </div>
</div>

After this, open the layout.css file and add the following CSS to the file.

.scroll {
  position: relative;
  width: 100vw;
  height: 15%;
  background-color: #252525;
  overflow: hidden;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.m-scroll {
  overflow: hidden;
  height: 100%;
  white-space: nowrap;
  animation: scrollText 10s infinite linear;
  margin: 0;
  font-size: 0;
  display: inline-block;
}

span {
  font-size: 50px;
  display: inline-block;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  color: white;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

Once you're done, you can deploy the changes and wait for them to reflect on your store page. This is how it would look like