Solved

How do I get a sliding announcement bar? (without app)

jesperahlbomUK
Shopify Partner
53 4 25

Hi,

Is there someone that can point me in the right direction in what code/scrupt I should look into in order to get a 'rolling/slider' function on the text in the announcement bar instead of a static message/bar?

Similar to the announcement bar in this store: https://uk.missoma.com/

I want to learn how to code it without an additional app, please.

Thank you!

Jesper

Accepted Solution (1)

maulikp
Explorer
42 9 25

This is an accepted solution.

Hello @jesperahlbomUK ,

I have done similar effect for the Debut theme. By adding below CSS in your theme.css file you can get rollover effect.

 

 

.announcement-bar {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.announcement-bar p{

 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 25s linear infinite;
 -webkit-animation: example1 25s linear infinite;
 animation: example1 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

 

 

Note: You can set text speed accordingly as per your need (25 s) change it if you need.

Fyi: It will called marquee effect..

Thanks!
If helpful then please Like and Accept Solution.

View solution in original post

Replies 19 (19)

maulikp
Explorer
42 9 25

This is an accepted solution.

Hello @jesperahlbomUK ,

I have done similar effect for the Debut theme. By adding below CSS in your theme.css file you can get rollover effect.

 

 

.announcement-bar {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.announcement-bar p{

 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 25s linear infinite;
 -webkit-animation: example1 25s linear infinite;
 animation: example1 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

 

 

Note: You can set text speed accordingly as per your need (25 s) change it if you need.

Fyi: It will called marquee effect..

Thanks!
If helpful then please Like and Accept Solution.
jesperahlbomUK
Shopify Partner
53 4 25

That works fine and thanks for the FYI so I can read up on it and understand the code behind better.

Do you know if it's possible to repeat/loop the message as well?

 

Screenshot 2021-02-12 at 11.44.33.png

maulikp
Explorer
42 9 25

Hi @jesperahlbomUK ,

 

By using custom section blocks (Adding blocks to a dynamic section). You need to first create a custom section with dynamic blocks & then add CSS accordingly. so multiple texts will be repeated like a slider.

For understanding example URL: https://lssrvn.com/advanced-shopify-building-dynamic-sections-on-custom-pages

Note: You need to do custom coding for that..

 

Thanks!

If helpful then please Like and Accept Solution.
jesperahlbomUK
Shopify Partner
53 4 25

Challenge accepted 🙂 thank you for this help and the start of a solution for me to keep working on!

Chant0704
Visitor
1 0 0

How to apply this when you have no "theme.css" only theme.js (I have Maker theme)

adorna
Excursionist
37 0 5

I'm facing this too, I do not have a .css version. There's only .js in minimal theme.

Hardik29418
Shopify Partner
2858 407 1073

@adorna 

Hello,

Welcome to the shopify Community.

It seems that I need to enter into your store to do coding.
Would you please add me as a staff member so that I can enter into your store and can solve your problem.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
adorna
Excursionist
37 0 5
Sure, but would it be possible to make the announcement bar as a rolling
one on a continuos loop?
Hardik29418
Shopify Partner
2858 407 1073

yes

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
adorna
Excursionist
37 0 5
great, that is so assuring. Kindly send me a request, ill accept it right
away.

Hardik29418
Shopify Partner
2858 407 1073

@adorna Please send me your website URL.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Shao
Excursionist
13 0 5

Hi @Hardik29418 Could you please help me add the code too? I would like to have the text within the announcement bar rolling. This is my website url: https://fairysuperfoods.com/

Please let me know if you can help me, so that I can send you an invite.

adorna
Excursionist
37 0 5
Sent via message, please check
Hardik29418
Shopify Partner
2858 407 1073

@adorna Please check now.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
adorna
Excursionist
37 0 5

Hey, thank you, but they appear as 3 separate lines. I was looking for a single-line, rolling bar on a continuous loop.

adorna_0-1619700580959.png

 

adorna
Excursionist
37 0 5

and its not rolling 😞

Hardik29418
Shopify Partner
2858 407 1073

@adorna Please check in the live website. You can find that it is rolling after every 2 seconds.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
adorna
Excursionist
37 0 5

Hi, it's working. I'm getting the marquee effect.

However, if the sentence is long its breaking into 2 lines.

Is there a way to prevent that? Or can we make this a separate announcement bar above the header?

Like rn its a part of Search, Login and Cart banner right? Instead can we

push this as separate bar above this? Then the page will start with the announcement bar, then the Search-Login-Cart bar.

adorna_1-1619762699782.png

 

Hardik29418
Shopify Partner
2858 407 1073

Please check now @adorna 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email