How To Add Images To The Shopify Menu (Free themes)

[@amine-ammari]

Do you need to show links on hover? kzbin.info/www/bejne/o3q5ZJRvbLeHqbM

[@carlevans1808]

Im a top rated shopify developer and i must say you are providing a great service. You guys need to subscribe. This is VALUABLE!!!!

[@waqarsheikh07]

Bro I exactly want to code this but your video pop up and it's saves my time. Thank you

[@amine-ammari]

Nice timing 😄

[@raydiaz5851]

great job! been looking for over a week on a solution and you made it so easy thanks

[@memahmudhassan]

Thanks, brother! It was really helpful! Was searching for this proper video for a long time. ❤❤

[@79LukeF1]

You don't know how much you've helped me today! What a great channel with short, straight to the point videos. I have a few suggestions. The transparent header could have a blur setting, just like the paid theme IMPACT has. Your version is completely transparent, which in my case doesn't work with my image banner and white text of the menu. Also, one thing I would love to have in my free SENSE theme is Mega Menu opening on hover over instead of click. Could you make a tutorial, please?

[@amine-ammari]

Thanks for the suggestions Luke! I really appreciate your feedback! For the header you can change opacity of the overlay on the image banner section slideshow to make the image darker, that way the links will be easier to read.

[@faysalzulfiqar]

Finally, The promise was fulfilled🎉

[@1994irfankhalil]

Great job brother. There is a small issue in theme version 15.2 that images appear below the menu not on the side as you have shown in your video. Your help in this regarded will be appreciated. Thanks. I am using Refresh Theme.

[@amine-ammari]

I will fix it when I update the code

[@1994irfankhalil]

Thanks brother for replying. Can you please tell me the expected date? Actually I have to launch my store this week or max next week and I have to ensure images in the menu. Thanks in advance.

[@amine-ammari]

@@1994irfankhalil It won't be anytime soon Please hire a dev if this is urgent

[@1994irfankhalil]

Okay thanks brother.

[@79LukeF1]

Hi, When is the new video coming out? Your tutorials are great because they are short and straight to the point. Can I ask you to guide me on how to modify the zoom in the SENSE theme? In the customization, there are only 3 settings. The zoom on my images is too big, and I can't change that in the settings. I need the zoom to be much smaller. How can I modify the code? I would appreciate your help. Thanks!

[@amine-ammari]

Hi, thanks for watching my videos, new ones coming soon. For the zoom level you can try this link below, Dawn and Sense are the same theme community.shopify.com/c/shopify-discussions/change-zoom-level-for-products-in-dawn-theme/td-p/2271287

[@79LukeF1]

@@amine-ammari Thank you.

[@79LukeF1]

@@amine-ammari Just done that. Actually did not work. It stretches the images horizontally. I think there must a way in the code to dial down the zoom, which is just too big. Could you help please?

[@amine-ammari]

@79LukeF1 I don't offer free individual support, but if you are looking to hire a developer you can reach out and I can help amineammari.com/contact/

[@TheLiveframe]

subscribed, thank you for your videos❤

[@Litdragons]

Hello, Great work! is there a way to make images smaller so my 6 links fit in the same row? Or can it be adaptive sizing based on screen size. Thank so much for you help!!!

[@amine-ammari]

Yes it's possible but it will require some code edits to adjust it

[@Litdragons]

@@amine-ammari is this something that you would be able to do? or do we need a dev? I'm sure others would love this edit :)

[@TheWiLdFiRe770]

Would like to figure out how to add a secondary logo image next to the main logo.

[@amine-ammari]

Thanks for the suggestion You can add 2 logos in a single image

[@imanesbai665]

Hi Amine, your videos are very helpful , thank you very much ..However, i'm using the Empire theme, can you please help where to find the section to change? I do not have the section header.liquid. Thank you a lot in advance.

[@amine-ammari]

I don't have the code for the empire theme, unfortunately, you can also check if the theme already has the feature natively

[@imanesbai665]

@@amine-ammari thank you for your quick answer, i'll keep looking for it.

[@MrCurryswartz]

Is there a way to put the image under a subcategory? For example, my main menu is Men's then it breaks down into sub categories such as tops, bottoms, accessories, and ect. What I would like is for the image to be displayed above each of the menu subcategories.

[@amine-ammari]

Yes it's possible but not with this code, you'll have to use an app or hire a dev

[@MahmoudAbdallah-w5b]

why the images are going under the collection not on the right like yours?

[@amine-ammari]

Maybe it's theme version issue make sure you are using the right code

[@HoF-zw5vj]

One of the best Shopify guides out there thanks. I was wondering, is there any way to add image to menu without replacing the entire header.liquid code? Because doing so removes some edits i did. Thanks

[@amine-ammari]

Yes it's possible, but you will need to hire a dev to help you with that, you can reach out here amineammari.com/contact/

[@DelunaCreative]

Hi Amine, Another brilliant solution that I'll be implementing soon. I have two questions. 1. Can you add a CSS class/id field to your menu code, so I could style each menu item separate from the whole menu? (WordPress has this option). 2. How can I pay/donate to support you and your solutions? Cheers, Corl

[@amine-ammari]

Thanks for watching my video: 1. No unfortunately this feature will require some additional code edits 2. Thanks for asking, watching my videos is the best way to support :D

[@aravindhanaravindhan643]

Can you make how to condition the varients dropdown list? Eg. if product page has two dropdown list says (Brand and model), If Apple selected in brand , list of iPhone should display in models. The varient list should connected with inventory.

[@amine-ammari]

I think you're talking about hiding the unavailable variants, I think Shopify already does that

[@alishafqat1407]

This exactly what i need, but somehow images are not appearing in the menu. i am using dawn theme ver 15.2.

[@amine-ammari]

Please make sure the to assign the correct menu name to the image. I tested this on danw 15.2 and it was working on my side.

[@truecolourbeauty]

My old links are still there with the new ones. Do you have to make a blank collection. And they are vertical on Sense Theme.

[@amine-ammari]

You mean they are under the link?

[@IsSalty]

Hi Amine, is there a way to change the images? my menu has 6 images, and the 6th one has created a new row because of the size. I'd like to slightly reduce the size of each photo so that they fit onto a single row if possible.

[@amine-ammari]

You will have to write addtional code, I don't have it unfortunately

[@TonyAzimi]

So strange ive instaled this code and see that the add menu image is now an option in header customization but i dont see the images as i upload, it just shows as blank

[@amine-ammari]

Make sure you are using a free theme

[@pixiepawspetshop]

Is their a option to be able to do this but have the images as the menu with a dropdown/mega menu without the images in the dropdown??

[@amine-ammari]

I don't understand the request, but you want to change something you need to write more code for it

[@Mohamed.Shokkir]

The font options on Shopify are quite limited. I believe it would be fantastic if you could show us how to customize the font using code.

[@amine-ammari]

Yes indeed, I will add it to the list of videos

[@DelunaCreative]

Hi Amine, Thank you for this mega menu. I followed the instructions and I'm halfway there as I get the images in the menu, but they display inline below the nested links. What do I need to do to have the images display to the right just like in your opening examples? Thanks, Corl

[@amine-ammari]

you will need fewer links to get a similar result

[@DelunaCreative]

​@@amine-ammari At first I didn't understand, I thought this was not going to work with all the links I have. I removed enough links to allow the images to float left, then added links back in all the way to 15 links and it still works fine! Thanks so much!

[@DelunaCreative]

Hi Amine, I created a very nice-looking desktop Mega Menu, styled it just right. But the drawer mobile menu was very unattractive, and I couldn't figure out how to control its style. Kind of bummed, but thanks.

[@FestiDuck]

I see your 2nd level menu components and images on dropdown aligns center, when I tried this they are aligning left, leaving lots of space in the right. I am missing something? Thanks for your amazing videos btw.

[@amine-ammari]

If the layout doesn't work for you, you will need to write some css to adjust

[@triciamaeasuncion4758]

But when i add 4 images as submenu and check on mobile, i can’t see other images. How?

[@amine-ammari]

Make sure to save your changes, the codes doesn't execute in the editor

[@vaibhavkaushik1603]

Can you make a complete store on basis of just code

[@amine-ammari]

I don't understand what you mean

[@PSportz]

Can you do Dawn v15 color swatches?

[@amine-ammari]

Thanks for the video suggestion!

[@bhoumikmalamdi7181]

how can i adject my image in mega menu, like i want my image in the front not in the last

[@amine-ammari]

You will need to make some code edits I don't have the code for that

[@bhoumikmalamdi7181]

@@amine-ammari ok thanks

[@ErinFenton88]

This is great! However, I'm using Dawn 15.1.0, used your latest version of the updated code, and the few images I have do not scroll within the mobile/drawer. The images look great in the desktop version, but only 1.5 of the images show up on mobile and won't scroll forward to the next image. How to correct this moving forward? Thank you so much!

[@amine-ammari]

You will need to hire a developer to fix that, I don't have the code for 15.1

[@ErinFenton88]

@@amine-ammari Thanks. After looking, I feel like it could potentially be a simple fix, as far as adding a carousel scroll component to the code somehow. I'll try and figure it out. Thanks, again!

[@jonalsup4036]

what if I want the image to change based on menu item i am hovering over.... got any ideas how to do this

[@amine-ammari]

You will need to write additional code to do this

[@jonalsup4036]

@@amine-ammari Totally understand that. Any chance you can be hired to do that? Not sure if you have avaliablity.

[@amine-ammari]

@@jonalsup4036 Yes you can hire me, please reach out here amineammari.com/contact/

[@jonalsup4036]

@@amine-ammari Thanks for the follow up, we ended up getting it figured out!

[@valwashington6169]

This did work however, the menu button via mobile disappeared. well its there but you cant see it. I just randomly clicked where I know it should be and it opened the menu :( Any suggestions??

[@amine-ammari]

That's strange, it shouldn't affect the button you will need to write some code to adjust that

[@nicklashoffmann9098]

First of all, thank you! Can you help me make the picture bigger?

[@amine-ammari]

I don't have the code for it You'll need to hire a dev to adjust

[@noabellec5412]

Thanks so much !

[@AdibaChowdhuryMitu]

You're Awesome ♥♥♥

[@gkhatrigk6498]

In theme editor what is the name of file in which need to add code? because video is blurr I can not see file name, can anyone type here file name where i can update the code

[@amine-ammari]

header.liquid

[@jiesitu2597]

how can you make the menu hover

[@jiesitu2597]

also how to remove the part for mobile version. i dont want image to show on mobile

[@amine-ammari]

​@@jiesitu2597 For hover kzbin.info/www/bejne/o3q5ZJRvbLeHqbM And if you want to to remove them from mobile you need to delete them from the code

[@jiesitu2597]

@@amine-ammari when i add this image menu code .site-nav--has-dropdown:hover .site-nav__dropdown, .site-nav--has-dropdown:focus .site-nav__dropdown { display: block; } @media(max-width:767px){ __#Banner__-template--16735125045471__image_banner .banner__media.media,#Banner-template--16735125045471__image_banner .banner__media.media img{ position:static } #Banner-template--16735125045471__image_banner .banner__content{min-height:auto} } this show at the bottom of the site how to fix it

[@elmusicgenius]

Thank you for the video

[@MeowCotton-gi8kk]

I like your videos, but can i add more than 3 images in the header? (Bcs my collections is more than 5)

[@amine-ammari]

Yes

[@himanshuagarwal2180]

@@amine-ammari No, infact i can only add 3! Can you pls let me know how i may add more?

[@MeowCotton-gi8kk]

@@amine-ammari how? Bcs maximum add block images are 3

[@amine-ammari]

@@MeowCotton-gi8kk Ah yeah you are right, I fixed that now Copy and paste the code again

[@MeowCotton-gi8kk]

@@amine-ammari thank you so much for that sir, if i may would you add hover effect as well ? So customers won't have to click the "collections" first, that would be awesome

[@afterstorychannel]

This is great but there's still a few issues with the coding. The images are vertical on desktop. horizontal on mobile.

[@amine-ammari]

Can you please detail what you mean?

[@truecolourbeauty]

Yes, same here.

[@amine-ammari]

@@truecolourbeauty Please send me an email detailing the problem that you have with the code

[@healthtips246]

Sir there is any free app for COD can we take some advance money then we deliver to avoid cancel COD orders

[@amine-ammari]

I don't know any that take advances, cod apps generally make a confirmation using phone number

[@Mohamed.Shokkir]

Why have you stopped uploading these amazing videos? You speak a little and teach a lot.

[@amine-ammari]

Thank you for your compliment! More videos coming soon

[@Klee87278]

Hello, i got a request for next video. And you're probably the only one who can do it, and that's showing different page description when changing the variants

[@amine-ammari]

thanks for the suggestion it was solved by jan kzbin.info/www/bejne/gl6TomtpmtWDhtE

[@ModernDecorSpace]

Hi. I love your videos, but unfortunately, this mode doesn't work in the new Dawn 15.1.0. It totally messes up the account and cart icons. Can you update this code to work in the new version of Dawn? Thank you!

[@amine-ammari]

Thanks for reporting that I will update it

[@amine-ammari]

It's updated now

[@TheShagski]

@@amine-ammari The latest code doesn't work when you have no sub-menu items. The images only show when you have at least one sub-menu item.

[@amine-ammari]

@@TheShagski Ok thanks for pointing that out I will fix it once I have the time

[@amine-ammari]

@@TheShagski It's fixed thanks for pointing that out

[@amine-ammari]

Thanks for the video suggestion @faysalzulfiqar @cyberspider78910 @shaanalam8827 Feel free to leave video suggestions in the comment 😃

[@samvruddhiinfo8169]

how to add image to main menu

[@amine-ammari]

Watch the video maybe? 😄

[@lucklucky326]

Please help us to support this amazing features for Dawns 15.1. Thank you

[@amine-ammari]

Ok I will update it if enough people request it

[@lucklucky326]

@@amine-ammari Thanks you

[@JCEntreprises7]

Free themes version 15 and above,don't show bro

[@amine-ammari]

It works on the latest version, copy the correct code bro

[@JCEntreprises7]

@@amine-ammari I copied it correctly, for theme 15, but the blocks are added correctly, but they are not displayed, I put the link name, I put the image but they are not displayed in the mega-menu bro

[@amine-ammari]

@@JCEntreprises7 I see I apologize for the inconvenience bro

[@JCEntreprises7]

@@amine-ammari ok bro! Thanks

[@saadsnake6]

Nah man pictures are too big and not aligned against each other

[@amine-ammari]

I have just tested this on Dawn 15.2 the images appear properly Please download a new version of dawn and test this again man

[@saadsnake6]

@amine-ammari yeah it worked but the picture sizes are too big , anyway to make them small