Help with animating announcement bar- RIDE THEME

[mdova]

Hello, I would like the announcement bar to keep moving left in a loop. How can this be done?

[BSS-Commerce]

Hi @mdova ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[mdova]

This is my website: https://atrevojewelry.com/

[BSS-Commerce]

To do this, you need to edit your CSS code file. Follow these instructions:

1. Visit your Shopify admin page, you will see the sale channel and online store sections

2. In the theme section of the online store, select Edit code

3. In the dev tools section, search for the base.css file and drag it to the end of the file:

4. Insert the following code at the end of the file and save:

  @keyframes moveLeft {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .announcement-bar {
    animation: moveLeft 10s linear infinite; /* Adjust the duration as needed */
  }

Result:

https://drive.google.com/file/d/1a-8MywjH0QCGxeHWEGh6grCsdsxwf6la/view?usp=drive_link

Hope it helps @mdova

[mdova]

Thank you for the previous solution. How can I loop the ‘Free shipping on orders over $75’ message multiple times in the announcement bar with distinct gaps between each repetition? Currently, the loop displays the message only once, but I’d like it to repeat for better visibility. How can this be done?

[BSS-Commerce]

Currently, because your banner code only has 1 element “FREE SHIPPING ON ORDERS OVER $75” and if you want to loop, you need more elements.
So currently you cannot loop multiple elements running continuously.