Re: Adding Images to Dropdown Using an "If" Statement

Solved

Adding Images to Dropdown Using an "If" Statement

metagals
Shopify Partner
29 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!

Accepted Solution (1)
metagals
Shopify Partner
29 1 0

This is an accepted solution.

Well - I found a solution if anyone else is looking. The if statement was as follows:

{% if link.title == "Bikes and Frames"%}

{% endif %}

View solution in original post

Replies 15 (15)

PeanutButter
Shopify Partner
387 68 184

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 [email protected]
metagals
Shopify Partner
29 1 0

I was afraid of that hah! 

Theme: Debut

Site URL: meta-gals.myshopify.com

PW: metagals 

PeanutButter
Shopify Partner
387 68 184

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 [email protected]
metagals
Shopify Partner
29 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>
metagals
Shopify Partner
29 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>

 

PeanutButter
Shopify Partner
387 68 184

@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 [email protected]
metagals
Shopify Partner
29 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>

 

PeanutButter
Shopify Partner
387 68 184

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 [email protected]
metagals
Shopify Partner
29 1 0

@PeanutButter exactly! Three in the Bikes and Frames drop down as well. I would like them to sit to the right of the menu items. I got an image to appear in the position that I wanted by adding it to the nav theme file but then of course it appeared on all of the dropdown menus which is what led me to think of using an if statement to switch them out. 

metagals
Shopify Partner
29 1 0

This is an accepted solution.

Well - I found a solution if anyone else is looking. The if statement was as follows:

{% if link.title == "Bikes and Frames"%}

{% endif %}

boxula
Tourist
4 0 2

Hi

I was looking for the same solution. I edited the site-nav.liquid snippet but it affected only desktop view and not mobile one.

 

Have you tried it on mobile too?

 

Thank you

 

Lior

PeanutButter
Shopify Partner
387 68 184

@metagals sorry for the late reply and nice that you figured out a solution.

Let me suggest you some tweaks:

- I find it safer to use the link.handle instead of the link.title.
- You can use IF and ELSIF.  However the CASE statement is cleaner if you are going to have more than 2 possibilities.

If would be something like this:

{% case link.handle %}
    {% when 'bikes-and-frames' %}
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
    {% when 'components' %}
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
    {% when 'accesories' %}
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
        <img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
{% endcase %}

 

The full code for you menu would be like this:

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

                  	{% case link.handle %}
  						{% when 'bikes-and-frames' %}
     						<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
                  			<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
                  			<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
  						{% when 'components' %}
    						<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
                  			<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
                  			<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
  						{% when 'accesories' %}
    						<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
                  			<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
                  			<img src="https://cdn.shopify.com/s/files/1/0443/7986/5255/files/kevin-erdvig-R3MFOKxgmIs-unsplash.jpg?v=16112...">
					{% endcase %}
                </div>

            {% 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>    
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 [email protected]
metagals
Shopify Partner
29 1 0

Great! Yes this is much cleaner. Thank you!

metagals
Shopify Partner
29 1 0

@boxula I did not want the images on mobile. I would suggest adding it to your header.liquid file somewhere in the  <nav class="mobile-nav-wrapper medium-up--hide" role="navigation"> div.

Let me know if you have any luck with that!

 

metagals
Shopify Partner
29 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 %}