Why isn't the autorotate feature working on Dawn theme?

[ben123456]

Hi am currently developing a store using the dawn theme and the autorotate feature for both desktop and mobile is not working. I am unsure as to what is causing this, I tried creating a new theme under the same store and it still was not working. Anyone know how to fix this?

[BrewBrains]

Hi @ben123456 ,

You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid

<style>
         .announcement-bar {
                height: 50px;
                overflow: hidden;
                position: relative;
                background: #fefefe;
                color: #333;
                border: 1px solid #4a4a4a;
            }
            
            .announcement-bar p {
                position: absolute;
                width: 100%;
                margin: 0;
                line-height: 28px;
                text-align: center;
                -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 20s linear infinite;
            }
            
            @-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%);
                }
            }


</style>

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

[Anshul_arora]

Hello @ben123456 ,

I understand you are facing an issue on rotating the Announcement Bar.

Please check in your Dawn Theme Customizer, as you have checked the "Auto-rotate announcements" option.

As, this can be the reason for your issue.

I hope it helps

Thank you.

[ben123456]

Autorotate is already selected, however it is not working on the mobile site or the desktop version.