Streamline Theme - Add ICON to Announcement bar.

Marvist
Excursionist
20 0 3

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. 

Replies 14 (14)

PeanutButter
Shopify Partner
385 67 181

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?

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
PeanutButter
Shopify Partner
385 67 181

Is this what you wanted?

Screen Shot 2021-01-25 at 22.54.34.png

I left changes in Streamline By Peanuts v0.2

Let me know what you think

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
20 0 3

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

 

Announcement bar.PNG

Do you think that would be possible?

Again; thanks so much for your help with this! 

PeanutButter
Shopify Partner
385 67 181

hi @Marvist sorry, I have been really busy the last days.  Do you still need this done?

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
20 0 3

Hi @PeanutButter 

Yes please! 

PeanutButter
Shopify Partner
385 67 181

ok! will try to get this done tomorrow!

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
PeanutButter
Shopify Partner
385 67 181

@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

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
20 0 3

@PeanutButter That is a very good question. 

I think there may be two solutions.

1. (best solution, but maybe difficult to code?) announcement bar as in attached photos, where the text and the icons are switching every 2 seconds. 

2. remove/hide the announcement bar in the mobile version. 

What do you think?

 111.PNG112.PNG113.PNG

PeanutButter
Shopify Partner
385 67 181

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

 

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
PeanutButter
Shopify Partner
385 67 181

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

adorna
Excursionist
37 0 5

Hi, Do you mind sharing the code?

genussnase
Visitor
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?

Otayfer
Excursionist
40 0 10

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.