CODEWITHSUNDEEP
imagee-commerceshopifyliquid
Ben Thompson
Ben Thompson

Reputation: 263

Product Image in mega menu

I am build a megamenu in Shopify that will show a mix of collection image, product images and a generic image for any other link that might be in there.

Currently the collection image displays fine and the generic image, but having some trouble getting the product image to display. My code for the mega menu is show below:

 <ul class="megaMenu">
 <div class="megaMenuWrapper">
   {% for child_link in link.links %}  
   <li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}>
     <a href= "{{ child_link.url }}">

       {% if child_link.type == "collection_link" and child_link.object.image %}

          <div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>

       {% elsif child_link.type == "product_link" and child_link.object.image %}

          <div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div> 

       {% else%}

          <div class="menuImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0924/5464/files/map_macarons_paris.jpg?1158498038497005180')"></div>

       {% endif %}

       <span>{{ child_link.title }}</span>

     </a>
   </li>
   {% endfor %}
 </div> 
</ul>

Any ideas on what might be wrong are welcome.

Upvotes: 1

Views: 1173

Answers (1)

drip
drip

Reputation: 12943

Products doesn't have an image object, it has a featured_image or images.

So you should call {{ child_link.object.featured_image | img_url: '500x' }} instead.

The same applies for your if check where you check if the image is present.

Upvotes: 2

Related Questions