> For the complete documentation index, see [llms.txt](https://docs.mydukaan.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mydukaan.io/code-snippets/adding-auto-scrolling-text-in-homepage.md).

# 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

```html
<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.

```css
.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&#x20;

<figure><img src="/files/FnROZy5YDHNCDvgzBbgc" alt=""><figcaption></figcaption></figure>