Solved: 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!

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 hello@peanutbutter.es

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 hello@peanutbutter.es

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

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 hello@peanutbutter.es

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 hello@peanutbutter.es

Adding Images to Dropdown Using an "If" Statement

How would you set this up? (Classified Ads for Used Cars)

Justify Rich Text (from Margin to margin)

How to center View order Buttons on e-mail Notifications on desktop view?

Theme section duplicating image

Inventory Tracking Problem

Re: Brooklyn theme -> password page -> not able to change the body text color

Re: Need to change email connected to my store

How would you set this up? (Classified Ads for Used Cars)

Re: Site speed very slow

Re: Need to change email connected to my store