Adding Images to Dropdown Using an "If" Statement

Solved
metagals
Excursionist
17 1 0

Hello! 

I am trying to add a different image under each dropdown item on our store's navigation.

I added the image in the site.nav.liquid file and now I want to create an if statement that will show it only on a specific dropdown menu item.

I'm looking for something like: 

{% if div.id contains "SiteNavLabel-bikes-and-frames" %}

<div class="menu-one vertical-align">
<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
</div>

{% endif %}

 Any help would be appreciated!

0 Likes
PeanutButter
Shopify Partner
330 65 136

hi @metagals 

I don't think div.id in your if statement is really a liquid variable.  You have to place a liquid variable there.

What theme are you using? and can you share your site url?

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
0 Likes
metagals
Excursionist
17 1 0

I was afraid of that hah! 

Theme: Debut

Site URL: meta-gals.myshopify.com

PW: metagals 

0 Likes
PeanutButter
Shopify Partner
330 65 136

i believe you are using an app for the megamenu, is this correct?

Can you paste the full code where you are adding that image?

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
0 Likes
metagals
Excursionist
17 1 0

No I created the menu for our store.

Here is the full code: 

 

<div class="nav-container sticky">
<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
  {% for link in linklists[section.settings.main_linklist].links %}
    {%- assign child_list_handle = link.title | handleize -%}
 
    {% comment %}
      Check if third-level nav exists on each parent link.
    {% endcomment %}
    {%- assign three_level_nav = false -%}
    {% if link.links != blank %}
      {% if link.levels == 2 %}
        {%- assign three_level_nav = true -%}
      {% endif %}
    {% endif %}
 
    {% if link.links != blank %}
      <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}">
        
        <button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
          <span class="site-nav__label">{{ link.title }}</span>
        </button>
        
        
       <div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
          {% if three_level_nav %}
 
         <div class="site-nav__childlist">
             
              <ul class="site-nav__childlist-grid">
                    
                {% if link.links != blank %}
                  {% for childlink in link.links %}
                
                
                
               
                
                <div class="vertical-align">
                 
                
                    <li class="site-nav__childlist-item">
                      <a {% if childlink.links == blank %}href="{{ childlink.url }}" {%endif%} class="site-nav__link site-nav__child-link site-nav__child-link--parent">
                        <span class="site-nav__label">{{ childlink.title | escape }}</span>{% if childlink.links != blank %}{% endif %}
                      </a>
 
                      {% if childlink.links != blank %}
                        
                      {% endif %}
 
                    </li>
                
                 <ul>
                        {% for grandchildlink in childlink.links %}
                       
                    <li>
                            <a style="color:grey; font-size: 1.1em;" href="{{ grandchildlink.url }}" class="site-nav__link site-nav__child-link">
                              <span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                  
                   
                   
                        {% endfor %}
                        </ul>
                  
                </div>
                
                
                
          
                
                
                  {% endfor %}
                {% endif %}
                
              
              {% if div.id contains "SiteNavLabel-bikes-and-frames" %}
 
<div class="menu-one vertical-align">
</div>
 
{% endif %}
                
              </ul>
           
           
                
             
           
            
 
          {% else %}
            <ul>
              {% for childlink in link.links %}
                <li>
                  <a href="{{ childlink.url }}" class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}">
                    <span class="site-nav__label">{{ childlink.title | escape }}</span>
                  </a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
        
      </li>
    {% else %}
      <li{% if link.active %} class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}" class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}">
          <span class="site-nav__label">{{ link.title }}</span>
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ul>
</div>
0 Likes
metagals
Excursionist
17 1 0
No I created the menu for our store.

Here is the full code:









{% endfor %}
{% endif %}


{% if div.id contains "SiteNavLabel-bikes-and-frames" %}



{% endif %}









{% else %}

{% endif %}



{% else %}


  • {{ link.title }}


  • {% endif %}
    {% endfor %}


    0 Likes
    metagals
    Excursionist
    17 1 0

    @PeanutButter sorry I realized that was a mess to  read. Here you are:

     

    <div class="nav-container sticky">
    <ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
      {% for link in linklists[section.settings.main_linklist].links %}
        {%- assign child_list_handle = link.title | handleize -%}
    
        {% comment %}
          Check if third-level nav exists on each parent link.
        {% endcomment %}
        {%- assign three_level_nav = false -%}
        {% if link.links != blank %}
          {% if link.levels == 2 %}
            {%- assign three_level_nav = true -%}
          {% endif %}
        {% endif %}
    
        {% if link.links != blank %}
          <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}">
            
            <button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
              <span class="site-nav__label">{{ link.title }}</span>
            </button>
            
            
           <div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
              {% if three_level_nav %}
    
             <div class="site-nav__childlist">
                 
                  <ul class="site-nav__childlist-grid">
                        
                    {% if link.links != blank %}
                      {% for childlink in link.links %}
                    
                    
                    
                   
                    
                    <div class="vertical-align">
                     
                    
                        <li class="site-nav__childlist-item">
                          <a {% if childlink.links == blank %}href="{{ childlink.url }}" {%endif%} class="site-nav__link site-nav__child-link site-nav__child-link--parent">
                            <span class="site-nav__label">{{ childlink.title | escape }}</span>{% if childlink.links != blank %}{% endif %}
                          </a>
    
                          {% if childlink.links != blank %}
                            
                          {% endif %}
    
                        </li>
                    
                     <ul>
                            {% for grandchildlink in childlink.links %}
                           
                       		<li>
                                <a style="color:grey; font-size: 1.1em;" href="{{ grandchildlink.url }}" class="site-nav__link site-nav__child-link">
                                  <span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
                                </a>
                              </li>
                      
                       
                       
                            {% endfor %}
                            </ul>
                      
                    </div>
                    
                    
                    
              
                    
                    
                      {% endfor %}
                    {% endif %}
                    
                  
                  
                    
                  </ul>
               
               
                    
                 
               
                
    
              {% else %}
                <ul>
                  {% for childlink in link.links %}
                    <li>
                      <a href="{{ childlink.url }}" class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}">
                        <span class="site-nav__label">{{ childlink.title | escape }}</span>
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>
            
          </li>
        {% else %}
          <li{% if link.active %} class="site-nav--active"{% endif %}>
            <a href="{{ link.url }}" class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}">
              <span class="site-nav__label">{{ link.title }}</span>
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    </div>

     

    0 Likes
    PeanutButter
    Shopify Partner
    330 65 136

    @metagals that is much easier to read

    Could you paste this same code but with the image in the position your want it? Then I will add try to add the IF statement for you.

    About the IF statement, I understand you want to show different images depending on the collection, is this right? How many different images are you gonna add? 

    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
    0 Likes
    metagals
    Excursionist
    17 1 0

    @PeanutButter  I added the image link where I would like to see it. I want to add three images for each dropdown menu. So nine images total. I was thinking I could use the if statement to hide/show different images depending on which dropdown menu was clicked on. Thank you so much for your help!!

    <div class="nav-container sticky">
    <ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
      {% for link in linklists[section.settings.main_linklist].links %}
        {%- assign child_list_handle = link.title | handleize -%}
    
        {% comment %}
          Check if third-level nav exists on each parent link.
        {% endcomment %}
        {%- assign three_level_nav = false -%}
        {% if link.links != blank %}
          {% if link.levels == 2 %}
            {%- assign three_level_nav = true -%}
          {% endif %}
        {% endif %}
    
        {% if link.links != blank %}
          <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}">
            
            <button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
              <span class="site-nav__label">{{ link.title }}</span>
            </button>
            
            
           <div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
              {% if three_level_nav %}
    
             <div class="site-nav__childlist">
                 
                  <ul class="site-nav__childlist-grid">
                        
                    {% if link.links != blank %}
                      {% for childlink in link.links %}
                    
                    
                    
                   
                    
                    <div class="vertical-align">
                     
                    
                        <li class="site-nav__childlist-item">
                          <a {% if childlink.links == blank %}href="{{ childlink.url }}" {%endif%} class="site-nav__link site-nav__child-link site-nav__child-link--parent">
                            <span class="site-nav__label">{{ childlink.title | escape }}</span>{% if childlink.links != blank %}{% endif %}
                          </a>
    
                          {% if childlink.links != blank %}
                            
                          {% endif %}
    
                        </li>
                    
                     <ul>
                            {% for grandchildlink in childlink.links %}
                           
                       		<li>
                                <a style="color:grey; font-size: 1.1em;" href="{{ grandchildlink.url }}" class="site-nav__link site-nav__child-link">
                                  <span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
                                </a>
                              </li>
                      
                       
                       
                            {% endfor %}
                            </ul>
                      
                    </div>
                    
                    
                    
              
                    
                    
                      {% endfor %}
                    {% endif %}
                    
                  {% if div.id contains "SiteNavLabel-bikes-and-frames" %}
    <div class="menu-one vertical-align">
<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
</div>

{% endif %}
    
                  
                    
                  </ul>
               
               
                    
                 
               
                
    
              {% else %}
                <ul>
                  {% for childlink in link.links %}
                    <li>
                      <a href="{{ childlink.url }}" class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}">
                        <span class="site-nav__label">{{ childlink.title | escape }}</span>
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>
            
          </li>
        {% else %}
          <li{% if link.active %} class="site-nav--active"{% endif %}>
            <a href="{{ link.url }}" class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}">
              <span class="site-nav__label">{{ link.title }}</span>
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    </div>

     

    0 Likes
    PeanutButter
    Shopify Partner
    330 65 136

    So if I understand correctly, you want for example 3 images in the components megamenu

    Screen Shot 2021-01-28 at 20.17.00.png

    and another 3 images (different) in the accessories megamenu:

    Screen Shot 2021-01-28 at 20.17.14.png

     

    Is this correct? Also, where in the menu do you want them?

    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
    0 Likes