Skip to content
Adding Images To Your Shopify Mega Menu and Drawer Menu - Free Tutorial
Browse other ways to boost conversion rate & profit

Adding Images To Your Shopify Mega Menu and Drawer Menu - Free Tutorial

Want personalized guidance adding this to your store?

Check out our Insiders community: https://www.skool.com/the-prompted

Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.

---

Your navigation menu is the map to your store. From simple to advanced, there are many different ways to approach them. 

In this tutorial, we’re going to set up our menus in 5 different ways, at 5 different difficulty levels.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

Links:

 

 

Create collection list theme section

Create collection metafield

  • Name: Subcollection List
  • Namespace and key: custom.subcollection_list
  • Type: List of collections

Create new section collection-list-custom.liquid (this is a direct replacement for main-list-collections-custom.liquid in the video)

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
  padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
}
{%- endstyle -%}

{%- liquid
  assign subcollections_info = collection.metafields.custom.subcollection_list.value | parse_json
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and subcollections_info.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
    <slider-component class="slider-mobile-gutter">
      <ul class="collection-list contains-card contains-card--collection grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %}">
        {%- for subcollection in subcollections_info -%}
          {%- assign current_collection = collections[subcollection.handle] -%}
          {%- if current_collection -%}
            <li class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}">
              {% render 'card-collection',
                card_collection: current_collection,
                media_aspect_ratio: section.settings.image_ratio,
                columns: section.settings.columns_desktop
              %}
            </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>	 
    </slider-component>
  </div>
</div>

{% schema %}
{
  "name": "Collection List Custom",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "t:sections.collection-list.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.collection-list.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.collection-list.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "t:sections.collection-list.blocks.featured_collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collections List Custom"
    }
  ]
}
{% endschema %}

Add code in main-collection-product-grid.liquid

Only show product grid if there are products in the collection

{% if collection.all_products_count > 0 %}

... rest of code...

{% endif %}

Create image file metafields

Create new metafields

For any object (ex: product, collection, page, etc) that you want to assign a menu image, create a new metafield with the following properties:

  • Name: Header Menu Image
  • Namespace and key: custom.header_menu_image
  • Type: File

Add images to the mega menu

Add code in header-mega-menu.liquid

Add a new check if mega menu images has been toggled on and logic to display images

{% if section.settings.menu_type_desktop == 'mega' and section.settings.mega_menu_images_toggle != 'none' %}
  <ul class="mega-menu__list megamenu-with-image page-width">
    {%- for childlink in link.links -%}
      {% assign image_url = '' %}

      {% if section.settings.mega_menu_images_toggle == 'featured' %}
        {% if childlink.object.featured_image %}
          {% assign image_url = childlink.object.featured_image | img_url: 'master' %}
        {% endif %}
      {% elsif section.settings.mega_menu_images_toggle == 'metafield' %}
        {% assign image_url = childlink.object.metafields.custom.header_menu_image | img_url: 'master' %}
      {% endif %}
      
      <li>
        <div class="mega-menu__column">
          {% if image_url != blank %}
            <a href="{{ childlink.url }}">
              <img src="{{ image_url }}" alt="{{ childlink.title | escape }}" class="mega-menu__image">
            </a>
          {% endif %}
          <a id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}" href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %} {% if section.settings.mega_menu_images_title %}hide-title{% endif %}" {% if childlink.current %} aria-current="page" {% endif %}>
            {{ childlink.title | escape }}
          </a>
        </div>
      </li>
    {%- endfor -%}
  </ul>

{% else %}

.... existing code.....

{% endif %}

Add image styles to end of file

<style>

  .mega-menu__image {
    max-width: 100%; /* Full width of the column */
    height: auto;
    border-radius: 10px; /* Adjust the radius value as needed (ex: 10px for rounded corners, 50% makes the image a circle) */
    /* Additional styles if needed */
  }

  .mega-menu__column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    text-align: center;
    /* Additional styles if needed */
  }

.mega-menu__list.megamenu-with-image {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(calc((100% - (5 * 4rem)) / 6), calc((100% - (5 * 4rem)) / 6)));
}

.mega-menu__link.hide-title {
  display: none; 
}

</style>

Modify the schema in header.liquid

{
  "type": "select",
  "id": "mega_menu_images_toggle",
  "options": [
    {
      "value": "none",
      "label": "None"
    },
    {
      "value": "featured",
      "label": "Featured"
    },
    {
      "value": "metafield",
      "label": "Metafield"
    }
  ],
  "default": "none",
  "label": "Mega menu collection image type",
  "info": "Only applies to mega menu"
},
{
  "type": "checkbox",
  "id": "mega_menu_images_title",
  "label": "Hide the collection title (when mega menu images is active)",
  "default": false
},

Add images to the drawer menu

Add code in header-drawer.liquid

Add a new check if drawer menu images has been toggled on and logic to display images

{% if section.settings.drawer_menu_images_toggle != 'none' %}
  {% assign image_url = '' %}

  {% if section.settings.drawer_menu_images_toggle == 'featured' %}
    {% if link.object.featured_image %}
      {% assign image_url = link.object.featured_image | img_url: 'master' %}
    {% endif %}
  {% elsif section.settings.drawer_menu_images_toggle == 'metafield' %}
    {% if link.object.metafields.custom.header_menu_image %}
      {% assign image_url = link.object.metafields.custom.header_menu_image | img_url: 'master' %}
    {% endif %}
  {% endif %}

  <div class="menu-drawer__menu-item-container{% if link.current %} menu-drawer__menu-item--active{% endif %}">
    <a
      id="HeaderDrawer-{{ link.handle }}"
      href="{{ link.url }}"
      class="menu-drawer__menu-item menu-drawer__menu-item-w-image link link--text focus-inset"
      {% if link.current %}
        aria-current="page"
      {% endif %}
    >
      {{ link.title | escape }}
    </a>

    {% if image_url != blank %}
      <a href="{{ link.url }}" class="menu-drawer__menu-item-link">
        <img src="{{ image_url }}" alt="{{ link.title | escape }}" class="menu-drawer__image">
      </a>
    {% endif %}
  </div>

{%- else -%}

.... existing code.....

{% endif %}

Add css styling to the bottom

<style>

{% if section.settings.drawer_menu_images_toggle and section.settings.drawer_menu_images_border_toggle %}
  
.menu-drawer__menu {
  list-style: none;
  padding-left: 0; /* Remove default padding */
}

.menu-drawer__menu li .menu-drawer__menu-item-container {
  border-top: 1px solid {{ section.settings.drawer_menu_images_border_color }};
}

.menu-drawer__menu li:last-child .menu-drawer__menu-item-container {
  border-bottom: 1px solid {{ section.settings.drawer_menu_images_border_color }};
}  
{% endif %}
  

.menu-drawer__menu-item-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* This will push the image to the far right */
  padding: 1.1rem 3rem;
  /*border-bottom: 1px solid #eaeaea;  Add a border to the bottom of each list item */
}
  
.menu-drawer__menu-item-link {
  margin-left: auto; /* This ensures that the link (image) is pushed to the far right */
}

.menu-drawer__image {
  max-width: 50px; /* Set a fixed width for the images */
  height: 50px; /* Set a fixed height for the images to make them square */
  object-fit: cover; /* Ensures the image covers the area, useful if the images are not square */
  border-radius: 5px; /* Adjust the radius value as needed */
}

.menu-drawer__menu-item.menu-drawer__menu-item-w-image {
  padding: 0px 0px;
}

</style>

Modify the schema in header.liquid

{
  "type": "select",
  "id": "drawer_menu_images_toggle",
  "options": [
    {
      "value": "none",
      "label": "None"
    },
    {
      "value": "featured",
      "label": "Featured"
    },
    {
      "value": "metafield",
      "label": "Metafield"
    }
  ],
  "default": "none",
  "label": "Drawer menu collection image type",
  "info": "Only applies to drawer menu"
},
{
  "type": "checkbox",
  "id": "drawer_menu_images_border_toggle",
  "label": "Enable Drawer Menu Border (with images only)",
  "default": false
},
{
  "type": "color",
  "id": "drawer_menu_images_border_color",
  "label": "Drawer Menu Images Border Color",
  "default": "#eaeaea"
},

 

Browse other ways to boost conversion rate & profit