Streamline Theme - Add ICON to Announcement bar.

PeanutButter
Shopify Partner
368 67 154

@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:

Screen Shot 2021-02-06 at 11.50.50.png

On mobile they loop with a fade effect:

Screen Shot 2021-02-06 at 11.51.43.png

Announcements are controlled via a new section you will see in the customizer:

Screen Shot 2021-02-06 at 12.05.29.png

Screen Shot 2021-02-06 at 12.05.49.png

 

Screen Shot 2021-02-06 at 12.05.49.png

 

As you will see, you can add up to 4 announcements and for each of them you can add text, link and icon:

Screen Shot 2021-02-06 at 12.05.40.png

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:

- layouts/theme.liquid
- sections/header.liquid
- assets/theme.css.liquid
- theme.js

And created 2 new files:

- sections/announcements.liquid
- snippets/announcement-bar-custom.liquid

 

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.

 

Screen Shot 2021-02-06 at 12.15.29.png

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Marvist
Excursionist
17 0 3

@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. 

0 Likes
adorna
Tourist
23 0 2

Hi, Do you mind sharing the code?

0 Likes
genussnase
New Member
1 0 0

@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?

0 Likes