How to create a custom scrolling announcement bar for Debut theme?

Solved

How to create a custom scrolling announcement bar for Debut theme?

anelimk
Tourist
9 0 4

Hi - I would like to create a custom scrolling announcement bar for my site: https://foodoverdrugs.com/

I would like to add another line of text to the announcement bar and animate it scrolling on a loop.

Can someone help me out with the code? Where would I place the code?

 

Thank you!

Accepted Solution (1)

KetanKumar
Shopify Partner
37094 3645 12053

This is an accepted solution.

@anelimk 

sorry for that issue yes you can try  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 scrolling announcement
or let me know if are don't able to this 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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 13 (13)

KetanKumar
Shopify Partner
37094 3645 12053

This is an accepted solution.

@anelimk 

sorry for that issue yes you can try  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 scrolling announcement
or let me know if are don't able to this 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
ITQG
Excursionist
25 1 5

  Hi! How do you make the text bold and the bar a little thicker in width? 

KetanKumar
Shopify Partner
37094 3645 12053

@ITQG 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
ITQG
Excursionist
25 1 5

https://itsthequestiongame.com

I figured it out luckily! But do you know how to add spacing between the black background gallery images? 

KetanKumar
Shopify Partner
37094 3645 12053

@ITQG 

yes, please share screenshot where did you add spacing

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
ITQG
Excursionist
25 1 5

I’d like spacing between these three images 

ITQG
Excursionist
25 1 5

1844DDBE-9435-4B97-A88C-BA7FF0A10CF3.png

KetanKumar
Shopify Partner
37094 3645 12053

@ITQG 

thanks for more details can you try code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.image-bar__item {margin: 5px 0px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
ITQG
Excursionist
25 1 5

For some reason that didn't work. Do you have another suggestion? Thanks

Chabax
Tourist
6 0 2

Hello,

Code is working fine, thanks ! however is it possible to change the font and its size ?

 

KetanKumar
Shopify Partner
37094 3645 12053

@Chabax 

yes, please share your store url so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
HighburyDave
Visitor
3 0 0

Hello I was able to add this to my theme however I cannot get more than one message to appear and I cannot get it to scroll across the screen. Please can you help? 

Pedronunesly
Visitor
2 0 0

How can I put an image to it and make it like an logo slider banner with link that can be attached to each logo?