How to add images to Menu

Highlighted
New Member
1 0 0

I would like to know how I can add images to the main menu in the Venture Theme. 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
156 5 52

Hello, there!

To add an image beside a menu option in your navigation using the Venture theme you will need to make sure the menu item has an image associated to it by linking it to a collection. Currently the menus in your navigation that don't link any where. In order to get the images to appear beside the menu items you'll need to edit your navigation so a collection is linked, and make sure the collection has an image added. 

If you're looking to choose more freely the images you'd like to appear in your navigation then there are a couple of apps that have that functionality, such as:

Metor Mega Menus

Buddha Mega Menu

I hope this helps!

_Ash_ | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
18 0 4

Hi,

You can use both the method either you can directly add by backend following Ash reply or you can use below code to directly add :

<ul class="grid-uniform">
{% for link in linklists.links %}
  <li class="grid__item small--one-third medium--one-fifth">
    <a href="{{ link.url }}">  
    {% if link.type == "collection_link" and link.object.image %}
    {{ link.object.image | img_url: 'small' | img_tag }}
    {% endif %}
    {{ link.title }}
    </a>
  </li>
{% endfor %}
</ul>

Thanks,

0 Likes
Highlighted
New Member
1 0 0

hi

 

where do you exactly add this on back end?

 

thanks

0 Likes
Highlighted
New Member
6 0 0

i think you can search file header or theme.

or , you can use this app https://apps.shopify.com/globo-mega-menu 

 

0 Likes
Highlighted

@Advait 

There's a lot of ways to incorporate pictures into your navigation-- do you want to feature images of your products, certain collections, or perhaps one static image for the entire menu?

Meteor Mega Menus has a variety of pre-built templates to choose from so you can set up beautiful navigation in minutes.
Screen+Recording+2020-01-08+at+10.33+AM.gif

Michael | Business Development @ Helium
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
Helium builds apps that merchants depend on:
Customer Fields app (since 2015)
Meteor Mega Menu app (since 2014)
Highlighted
Tourist
4 0 2

Hi Michael, is it possible to change the fonts and position of image/font (example: can I have the text below the image/above the image) when using Meteor? Mostly interested in the Prism template you offer. Thank you!

 

0 Likes
Highlighted

Hi @sevenhillstoys -- sorry for the delay, I was out of the office last week due to a car accident! Meteor offers a 7-day free trial... perhaps you already installed it to your store to see for yourself. If not, I've included a bit more info below:

 

All of the app's menu templates have their own set of customization settings and options that you can configure, including settings for things like font colors, image sizes, menu width, etc. The Prism template, in particular, does not allow you to change the actual position of the link text at the moment (the text will stay below the image), but this is something we are considering to add as a setting into a future version of the app. There are some other great templates in the app that also support images and use different positions for the images & text, perhaps the Horizon template might be a better fit?

 

Either way, you are welcome to install the app on your store to see if it will work for your needs. Our support team is happy to assist with any questions you have, and the app even has a built-in CSS editor if you need to make more advanced changes (outside of the template-specific customization settings).

Michael | Business Development @ Helium
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
Helium builds apps that merchants depend on:
Customer Fields app (since 2015)
Meteor Mega Menu app (since 2014)
Highlighted
Tourist
4 0 2

No worries and thank you for the detailed reply!

Highlighted
New Member
1 0 0

@michael-helium 

Do you know if you are able to add pictures in place of the word on the Menu?  ex.. Instead of saying "Solar" it is a picture of the sun.  

 

Thanks,

Drew


@michael-helium wrote:

@Advait 

There's a lot of ways to incorporate pictures into your navigation-- do you want to feature images of your products, certain collections, or perhaps one static image for the entire menu?

Meteor Mega Menus has a variety of pre-built templates to choose from so you can set up beautiful navigation in minutes.
Screen+Recording+2020-01-08+at+10.33+AM.gif


 

0 Likes