Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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..
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..
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?
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!
Challenge accepted 🙂 thank you for this help and the start of a solution for me to keep working on!
How to apply this when you have no "theme.css" only theme.js (I have Maker theme)
I'm facing this too, I do not have a .css version. There's only .js in minimal theme.
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.
yes
@adorna Please send me your website URL.
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 Please check now.
Hey, thank you, but they appear as 3 separate lines. I was looking for a single-line, rolling bar on a continuous loop.
and its not rolling 😞
@adorna Please check in the live website. You can find that it is rolling after every 2 seconds.
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.
Please check now @adorna
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024