Is it possible to add a 3 image scrolling banner on Dawn theme?

Store Design

Topic summary

Adding a 3‑image scrolling banner to Shopify’s Dawn theme using custom HTML/CSS. The poster shares a code snippet (divs with three tags and a CSS keyframes animation) and asks where to place it.

  • Suggested placement: add a “Custom Liquid” section in the Theme Editor and paste the provided code there.
  • Technical note: the snippet relies on CSS animation (@keyframes) to horizontally scroll a flex container of images.
  • Another participant reports that their similar attempt doesn’t work and expresses the need for a solution beyond two images.

Current status: Partially answered. A location to insert the code is provided, but there’s no confirmed working implementation or troubleshooting steps for cases where it doesn’t function.

Key item: The shared HTML/CSS snippet is central to understanding the intended scrolling effect.

Summarized with AI on December 31. AI used: gpt-5.
1

Hello, I am looking to add 3 scrolling images to my banner on the Dawn theme. I have the following code, but not sure where to put it.

Image 1 Image 2 Image 3
.scrolling-banner { overflow: hidden; position: relative; width: 100%; } .scrolling-images { display: flex; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }

Help is greatly appreciated! Thank you :hugs:

2

You can add the section called ‘Custom Liquid’ and save the code there @CostonLabs

1 Like
3

I think that’s a good question. A banner with only 2 scrolling images often isn’t enough, and I really wish I could find a solution. However, it doesn’t seem to work the way it is currently. would really appreciate it.