Add Collection Image to Sub-Nav Menu (Mega Nav)

Highlighted
Shopify Partner
2 0 0

Hi, I have a dropdown menu in my main site navigation containing a list of collections, and I want to show the image for each of those collections next to the link in the nav.

I managed to do the if statement to show an image, but it's not pulling in the collection image (just the Shopify standard 'no image' image.

I am using the Vermont theme and can see that the code needs to go in the meganav.liquid snippet file.

Could you please help by supplying the code I need to use and where I need to add it please?

Thank you very much.

Andrew

0 Likes
Highlighted
Shopify Expert
498 9 96

Something like this should work.

<ul>
{% for link in linklists.dropdown.links %}
  <li>
    <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>

 

Highlighted
Shopify Partner
2 0 0

Thank you so much, gina3five!  It worked.

FYI for anyone else that has a similar problem, make sure the "link" variable matches whatever is in the for bit.  For my site, because I wanted the images to appear in the sub-menu (meganav.liquid snippet) it meant I had to change all instances of "link" inside the <li> tag to "childlink".

Thanks again!

0 Likes
Highlighted
New Member
5 0 0

In my case Sub-Category Images are visible on a Page but Sub-Category Images are being displayed in List format, whiel i m looking to have it a Grid format (probabaly 3 or 5 in a Row). How can i achieve that .

 

0 Likes
Highlighted
Shopify Expert
498 9 96

Hi ViveKM. You can output the images like in the example above, but you'll have to use CSS to style them into a grid. Most themes come with a grid system built in so in that case you would just need to add the appropriate classes. Here's an example:

<ul class="grid-uniform">
{% for link in linklists.dropdown.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>

The 'small--' and 'medium--' refer to responsive breakpoints.

0 Likes
Highlighted
Shopify Partner
4 0 0

When trying to add this code to my meganav file it doesn't end let me save.  Where do I add it?  I should add that I'm currently using the venture them.  


 

{% comment %}
  Meganav has 5 columns, up to 7 links per column.
  Remaining columns are products from parent collection.

  1. Get # of links in subnav
  2. Calculate # of rows, based on 7 links per column
  3. Max 5 columns, so 5 - # of columns = # of products to display
{% endcomment %}
{% assign menu = linklists[child_list_handle] %}
{% assign display_products = show_products %}
{% assign display_title = show_title %}
{% if link.type == 'collection_link' %}
  {% if link.object.products_count == 0 %}
    {% assign display_products = true %}
  {% endif %}
{% else %}
  {% assign display_products = false %}
  {% assign display_title = false %}
{% endif %}
{% assign max_columns = 5 %}
{% assign links_per_column = 7 %}
{% assign max_links = max_columns | times: links_per_column %}
{% if display_products == false and linklists[child_list_handle].links.size > max_links %}
  {% assign links_per_column = linklists[child_list_handle].links.size | divided_by: max_columns %}
  {% assign remainder = linklists[child_list_handle].links.size | modulo: max_columns %}
  {% if remainder > 0 %}
    {% assign links_per_column = links_per_column | plus: 1 %}
  {% endif %}
{% endif %}
{% assign meganav_column_width = 'one-fifth' %}
{% assign number_of_links = menu.links.size %}
{% if display_products %}
  {% assign number_of_links = number_of_links | plus: 1 %}
{% endif %}
{% assign number_of_link_columns = number_of_links | divided_by: links_per_column %}
{% assign number_of_link_columns_remainder = number_of_links | modulo: links_per_column %}
{% unless number_of_link_columns_remainder == 0 %}
  {% assign number_of_link_columns = number_of_link_columns | plus: 1 %}
{% endunless %}
{% assign number_of_product_columns = max_columns | minus: number_of_link_columns %}

<div class="grid grid--no-gutters{% if fixed_width %} meganav__scroller{% endif %}{% if show_links %} meganav__scroller--has-list{% endif %}">
  {% if show_links %}
    <div class="grid__item meganav__list {{ meganav_column_width }}{% if display_title %} meganav__list--has-title{% endif %}">

      {% if display_title %}
        <h5 class="h1 meganav__title">{{ link.title }}</h5>
      {% endif %}

      {% if display_products %}
        <li>
          <a href="{{ link.url }}" class="meganav__link">{{ 'collections.general.all_of_collection' | t }}</a>
        </li>
      {% endif %}

      {% for childlink in menu.links %}
        {% assign link_index = forloop.index %}
        {% assign link_is_last = forloop.last %}

        {% if display_products %}
          {% comment %}
            If parent has products we add an "All ___" link, so offset index by 1
          {% endcomment %}
          {% assign link_index = link_index | plus: 1 %}
        {% endif %}

        <li>
          {% comment %}
            Since Shopify won't handleize tags for you on the Navigation page,
            if link points to a collection filtered with tags,
            we will make sure the tags are handleized in the URL.
            To avoid changing the '+' that separate tags in the URL to a '-',
            we will change the '+' characters to a string that we are betting won't be in the original URL,
            then handleize the tags bit, then change the odd string back to '+'.
            Say the original URL is /collections/handle/Tag1+Tag2, we will grab /Tag1+Tag2,
            change to /Tag1987654321Tag2, handleize, hence ending up with tag1987654321tag2,
            then replace 987654321 with +, getting tag1+tag2, then appending that back to /collections/handle/,
            getting a final URL that is /collections/handle/tag1+tag2.
          {% endcomment %}
          {% assign childlink_url = childlink.url %}
          {% assign number = 987654321 %}
          {% if childlink.type == 'collection_link' %}
            {% assign tag_handle = childlink.url | remove: childlink.object.url | replace: '+', number | handle %}
            {% unless tag_handle == empty %}
              {% capture childlink_url %}{{ childlink.object.url }}/{{ tag_handle | replace: number, '+' }}{% endcapture %}
            {% endunless %}
          {% endif %}

          <a href="{{ childlink_url }}" class="meganav__link{% if childlink.active %} meganav__link--active{% endif %}">{{ childlink.title | escape }}</a>
        </li>

        {% comment %}
          If the link index is a divisible unit of the # of columns,
          and is not the last link in the list, create a new
          column for the following links to go in.
        {% endcomment %}
        {% for column_number in (1..max_columns) %}
          {% assign index_where_we_need_to_break = column_number | times: links_per_column %}
          {% if link_index == index_where_we_need_to_break %}
            {% unless link_is_last %}
              </div>
              <div class="grid__item meganav__list {{ meganav_column_width }}{% if display_title %} meganav__list--has-title{% endif %}">
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
  {% endif %}

  {% if display_products %}
    {% for product in link.object.products limit: number_of_product_columns %}
      <div class="grid__item {{ meganav_column_width }} meganav__product">
        {% include 'product-card', product: product %}
      </div>
    {% endfor %}
  {% endif %}
</div>

 

0 Likes
Highlighted
New Member
1 0 0

Hey Gina,

Can you please send me a code so that I can add images next to or on top of my submenu options. Also if you can show me where I should place the code would be great. I am using the Venture Theme. I attached an example of what I am hoping to match with my store's sub menu. Thanks for the help!Screen Shot 2020-02-24 at 8.57.56 AM.png

 

0 Likes
Highlighted
New Member
1 0 0

<ul>
{% for childlink in link.links %}
<li class="img-n">

<a href="{{ childlink.url }}"
class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
{% if childlink.current %} aria-current="page"{% endif %}
>
{% if link.type == "collection_link" and link.object.image %}
{{ link.object.image | img_url: 'small' | img_tag }}
{% endif %}

<span class="site-nav__label">{{ childlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>

 

 

I have added this code but repeat same image in all menu please solve

0 Likes