code scrolling announcement bar

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user requested code to replicate a grey scrolling announcement bar positioned below the main menu, referencing a specific website example.

Initial Solutions Provided:

  • One response offered HTML/CSS code for a continuous marquee-style scrolling effect using CSS animations and translateX transforms
  • Another suggested adding custom CSS to the theme’s base.css file to style an existing announcement bar section

Follow-up Clarification:
The original poster noted that the reference website’s text remains static for several seconds before scrolling, rather than scrolling continuously. They’re now seeking code to achieve this pause-then-scroll effect instead of the continuous animation initially provided.

Status: The discussion remains open, awaiting a solution for the delayed/paused scrolling behavior.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

hi guys! would someone help me give me the code for the grey (scrolling) ad bar present on this site under the black menu?

https://oliviamoreau.de/

1 Like
2

This creates a scrolling grey announcement bar (marquee-style) below the main menu:

FREE SHIPPING ON ORDERS OVER $50 — NEW COLLECTION JUST DROPPED — SIGN UP FOR 10% OFF —
@keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

Instructions:

You can place this code below your navigation bar in theme.liquid or header.liquid.

Replace the text inside the with your own ad messages.

3

Hello @matthewdropship

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.section-sections--24711802061125__ss_announcement_bar_slideshow_fXAAqw-settings {
background: gray;
}

devcoders_0-1746969077438.png
devcoders_0-1746969077438.png1341×446 262 KB

4

thanks for the help guys! If you notice in the website the words don’t scroll as in the code here but on the site the sentence stays still and then scrolls after a number of seconds, how can I get that effect?