Can we show the pictures of collections in the mega menu of dawn theme?

Store Design
, , ,
1

Hello! I added a picture to one of my collection and I’m wondering is it possible to show that picture in the mega menu of dawn theme automatically without using code? Thanks!

2

Hi @YukYeeLam ,

To add a collection image to the mega menu in the Dawn theme, we can implement a code-based approach. This will allow the menu to display collection images without needing an app. Here’s how you can achieve this by modifying the theme code:

  1. Go to the Theme Code Editor:

    • From your Shopify Admin, go to Online Store > Themes.
    • Find your Dawn theme and click on Actions > Edit Code.

  2. Edit the Header Section:

    • In the Sections folder, open the header.liquid file, which typically controls the menu layout.

  3. Add Code to Display Collection Images:

    • Locate where your mega menu code begins. Look for a loop that generates the menu items; it might look like{% for link in link.links %}.
    • Insert the following code inside the menu loop where you want the collection image to appear:
{% if link.type == 'collection' %}
  {% assign collection = link.object %}
  
    
      
    
  

{% endif %}
​

  • This code will pull the image associated with each collection in the mega menu. Adjust the 300x300 dimensions as needed.

  • Style the Collection Image (Optional):

    • Go to Assets and open your main CSS file (e.g., theme.css ).
    • Add some CSS to control the appearance of the collection images in the mega menu:
.mega-menu-collection-image {
  padding: 10px;
  text-align: center;
}
.mega-menu-collection-image img {
  width: 100px; /* Adjust width as needed */
  height: auto;
  border-radius: 5px; /* Optional styling */
}
​

Save and Preview:

  • Save all changes, then refresh your storefront to see the collection images in the mega menu. This approach should now automatically display each collection’s image in the mega menu.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

3

Hi Akshay, I can’t find the {% for link in link.links %} loop you mentioned…

4

@akshay_bhatt Hi there, sorry to bothered you again! But I still couldn’t find the right place to place the code. Can you help me to take a look? Thanks! My store url is https://babygalleria.com.hk/, and the password is aotwow