Hey Shopify Community
I am trying to add a shipping icon to my announcement bar. I have tried to find anything helpful but wasn’t successful.
https://barberry-fitness-apparel.myshopify.com/
PW: aoniye
The announcement bar says “Free shipping and returns” and I would like to add a couple of icons there.
What are the steps to take?
Thanks for your attention.
Can you describe in a little more detail what you want?
do you want the icon just next to the FREE SHIPPING AND RETURNS text?
do you have an specific icon you want to use?
Thank you for your quick response.
The font style, font size, spacing between the letters etc. in the announcement bar looks great in Streamline By Peanuts v.02
So to illustrate in detail what the text should say and the icons I would like, I have coded it in the debut theme (I cannot seem to figure out how to do this in Streamline theme).
Do you think that would be possible?
Again; thanks so much for your help with this!
hi @Marvist sorry, I have been really busy the last days. Do you still need this done?
Yes please!
ok! will try to get this done tomorrow!
@Marvist I have a question about the image you sent with what you want. How would that show in mobile? The 3 texts with 3 icons are not gonna fit in 1 line in mobile
@PeanutButter That is a very good question.
I think there may be two solutions.
(best solution, but maybe difficult to code?) announcement bar as in attached photos, where the text and the icons are switching every 2 seconds.
remove/hide the announcement bar in the mobile version.
What do you think?
hi @Marvist ,
your themes uses Slick Carousel for the slideshow, which can be used for looping the the Announcement bar messages in mobile.
I will try implement this for you over the weekend
@Marvist I coded this solution for you on copy of your theme named Streamline by Peanuts - Announcement Bar
On desktop the 3 announcements appear in one row:
On mobile they loop with a fade effect:
Announcements are controlled via a new section you will see in the customizer:
As you will see, you can add up to 4 announcements and for each of them you can add text, link and icon:
For the icon, you have to write the filename of an icon that you upload to your assets folder. Currently I only uploaded 1 icon for testing and add it to the 3 messages
I had to edit a bunch of files:
And created 2 new files:
Let me know if you want me to apply the changes to your live theme or to another theme
Also, I don’t know if you are aware, but you have a debugger that stops javascript execution in your theme when developer tools open. Seems it is added in jquery-ui.js which aparently is added by some app you have installed. Just to give you a heads up if you did not know.
@PeanutButter
Wow amazing, thank you so much for time and your help. It looks great!
I was not aware of the debugger, do you know it is causes any issues to the website, or if there is any other reason that it should be removed?
Again; thank you so much for your help.
Hi, Do you mind sharing the code?
@PeanutButter Hi there … great work! Thumbs up!
Just stumbled across this thread as I was looking for exactly that kind of solution for the Archetype Expanse theme. Already purchased the theme and working on some theme tweaks right now. So, haven’t yet published it.
Assuming your solution could easily get adopted to the Expanse theme, right? Would really appreciate, if you could let me know terms and conditions to get it for our shop?
Hello PeanutButter, How much is this implementation? For me I would like to have 1:1 the exact same solution for my refreshed store.
Thanks a lot.
