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

metagals · ‎01-27-2021

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!

metagals · ‎01-29-2021

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

PeanutButter · ‎01-27-2021

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 · ‎01-27-2021

I was afraid of that hah!

Theme: Debut

Site URL: meta-gals.myshopify.com

PW: metagals

PeanutButter · ‎01-27-2021

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 · ‎01-27-2021

No I created the menu for our store.

Here is the full code:

{% 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 %}

{% if link.links != blank %}

<span class="site-nav__label">{{ link.title }}</span>

</button>

{% if three_level_nav %}

{% if link.links != blank %}

{% for childlink in link.links %}

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

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

{% endif %}

</ul>

{% else %}

<ul>

{% for childlink in link.links %}

<li>

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

<span class="site-nav__label">{{ link.title }}</span>

</a>

</li>

{% endif %}

{% endfor %}

</ul>

</div>

metagals · ‎01-28-2021

@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 · ‎01-28-2021

@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 · ‎01-28-2021

@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 · ‎01-28-2021

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

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

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 · ‎01-28-2021

@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 · ‎01-29-2021

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

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

{% endif %}

boxula · ‎01-30-2021

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 · ‎01-30-2021

@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 · ‎01-30-2021

Great! Yes this is much cleaner. Thank you!

metagals · ‎01-30-2021

@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 · ‎01-27-2021

No I created the menu for our store.

Here is the full code:

aria-controls="SiteNavLabel-{{ child_list_handle }}">
{{ link.title }}
{% if three_level_nav %}
childlink.url }}" {%endif%} class="site-nav__link site-nav__child-link
site-nav__child-link--parent">
...

{% if childlink.links != blank %}

{% endif %}

href="{{ grandchildlink.url }}" class="site-nav__link site-nav__child-link">
{{
grandchildlink.title |...

{% endfor %}
{% endif %}

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

{% endif %}

{% else %}

{{ childlink.title |
escape }}

{% endif %}

{% else %}

{% endif %}
{% endfor %}

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

Adding Images to Dropdown Using an "If" Statement

Community Blog Articles