Solved

How To Change Marquee Announcement Bar Starting Point (Dawn Theme)

MMast
Explorer
131 0 10

Thanks in advance!

I am looking to change the starting point of my marquee announcement to the very left that works for both mobile and pc. Example shown below.

Example:

ScreenShot_20221224003938.png

 

Accepted Solution (1)
AnneLuo
Shopify Partner
426 87 80

This is an accepted solution.

Find the theme.liquid file and add the following code to the head tag

 

 

<style>
   .announcement-bar{
      justify-content: left !important;
   }
  .announcement-bar .marquee{
    padding: 0 2rem !important;
    margin: 0 !important;
  }
  .announcement-bar .enable-animation .marquee__content{
    padding: 0 !important;
  }
</style>

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Replies 11 (11)

AnneLuo
Shopify Partner
426 87 80

Hello, @MMast 

Can you share your store url?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
MMast
Explorer
131 0 10
AnneLuo
Shopify Partner
426 87 80

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

<style>
 .marquee__content{
   animation-direction: reverse;
 }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
MMast
Explorer
131 0 10

The code you provided didn't work

AnneLuo
Shopify Partner
426 87 80

Please change the code

<style>
 .marquee__content{
   animation-direction: reverse !important;
 }
</style>

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
MMast
Explorer
131 0 10

That work's for the marquee going right, is there a way to make it go left instead?

AnneLuo
Shopify Partner
426 87 80

Do you mean the text is arranged from right to left?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
MMast
Explorer
131 0 10

Screenshot 2024-04-15 211637.png

In the image above I show where the text starts on my site, I would like the text to start in the box I drew going to the left.

AnneLuo
Shopify Partner
426 87 80

This is an accepted solution.

Find the theme.liquid file and add the following code to the head tag

 

 

<style>
   .announcement-bar{
      justify-content: left !important;
   }
  .announcement-bar .marquee{
    padding: 0 2rem !important;
    margin: 0 !important;
  }
  .announcement-bar .enable-animation .marquee__content{
    padding: 0 !important;
  }
</style>

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
MMast
Explorer
131 0 10

It is already

MMast
Explorer
131 0 10

The code I'm using already has "left" at 0.