What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: HOW TO ADD A ANNOUNCEMENT BAR WITH MARQUE (CARROUSEL) STYLE WITH MULTIPLE DIFFERENT ANNOUNCEMENT

Solved

HOW TO ADD A ANNOUNCEMENT BAR WITH MARQUE (CARROUSEL) STYLE WITH MULTIPLE DIFFERENT ANNOUNCEMENTS?

Rose121994
Explorer
50 1 7

Hi ,

I'm looking to have an announcement bar with marque carrousel style in which it displays different announcements. However, I'm not looking for a sliding style rather I'm looking for a style which the announcements keep moving from right to left non stop displaying different announcements with proper spacing to distinct one announcement from the other. 

 

Thank you in advanced. 

Accepted Solutions (2)

UmairA
Shopify Partner
1106 101 226

This is an accepted solution.

Hi there @Rose121994 ,

 

There are many ways to do this. With the app, with JQuery/JS, and with plan HTML CSS. If you are not willing to go with code, then look for an app.

 

If you are interested in coding solution here is the tutorial to do so in plan HTML, CSS

https://www.html.am/html-codes/marquees/html-scrolling-text.cfm

View solution in original post

KetanKumar
Shopify Partner
37433 3664 12119

This is an accepted solution.

@Rose121994 

yes, please If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by

https://codepen.io/rafaelcastrocouto/pen/nPOEqE

https://codepen.io/JKudla/pen/vyXBpO 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)

UmairA
Shopify Partner
1106 101 226

This is an accepted solution.

Hi there @Rose121994 ,

 

There are many ways to do this. With the app, with JQuery/JS, and with plan HTML CSS. If you are not willing to go with code, then look for an app.

 

If you are interested in coding solution here is the tutorial to do so in plan HTML, CSS

https://www.html.am/html-codes/marquees/html-scrolling-text.cfm

KetanKumar
Shopify Partner
37433 3664 12119

This is an accepted solution.

@Rose121994 

yes, please If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by

https://codepen.io/rafaelcastrocouto/pen/nPOEqE

https://codepen.io/JKudla/pen/vyXBpO 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Rose121994
Explorer
50 1 7

How do I add spacing between each announcements its looking very clutter.Please see attached pictureScreen Shot 2022-08-20 at 10.11.09 AM.png

KetanKumar
Shopify Partner
37433 3664 12119

@Rose121994 

oh sorry to trouble that issue, can you please share store url so i will check and let you know 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Rose121994
Explorer
50 1 7
KetanKumar
Shopify Partner
37433 3664 12119

@Rose121994 

you have add more spacing current code try this 

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_ent_nbsp

KetanKumar_0-1661006061428.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Rose121994
Explorer
50 1 7

do I have to change this code just for the announcement bar?