CODEWITHSUNDEEP
shopify
Mobashir
Mobashir

Reputation: 430

Create a Shopify Mega Menu

I want to make a mega menu with custom coding in shopify Like https://shopifybooster.myshopify.com/ . But I can't find any solutions. I know there is plenty of mega menu app for shopify. But they are costly. So, I want to make a mega menu with custom code.

Upvotes: 1

Views: 6792

Answers (3)

cyberspider789
cyberspider789

Reputation: 391

I have tried in this regard as follows. All can contribute

  1. Found a fantastic mega menu implemnt at https://www.cssscript.com/demo/responsive-mega-menu/ This is open avaiable.

  2. Copied relevant html+css and javascript.

  3. Put html + CSS in a .liquid file (megamenu.liquid) togather and javascript in separate .js file (say,megamenu-liquid-support.js) . Put <script src="{{ 'megamenu-liquid-support.js' | asset_url }}"> </script> at the end of html of megamenu.liquid

  4. Opened header.liquid file of Shopify Dawn theme.

  5. Commented lines 159 to 346 which are responsible for display of menu.

  6. On line no. 347, put the tag {% render 'megamenu.liquid' %} to render it on screen. Uptill here, we are talking about lines in header.liquid

  7. Now, you need to put a small code (in megamenu.liquid)as follows starting from line no.54 to 71 and comment out line no. 72 to 133. Basically, commenting it will disable hard coded CSS and below code will implement link list menu from shopify. Also put <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.6.3/css/ionicons.min.css"> at beginning of megamenu.liquid. The code to be put is as mentioned below:

  8. Vola ! You have megamenu functional on yourshopify site. Icing on the cake - it will be functional on mobile as well !!!

  9. Now the problem part, after you do above you will have functinal menu because now CSS gets messed up and font size etc becomes weired on every page of shopify store. Any solution to this. I came up to this and hope someone will definately get help from this and some veteran can help us out also.

EDIT-1 In html of the megamenu.liquid, i remarked html{} tag and all is settled.

 <li class="menu-item-has-children">
        <a href="#">Category <i class="ion ion-ios-arrow-down"></i></a>
              <div class="menu-subs menu-mega menu-column-4">
                 {%- for link in section.settings.menu.links -%}
                    <div class="list-item">
                       <h4 class="title">{{ link.title | escape }}</h4>
                        <ul >
                           {%- for childlink in link.links -%}
                              <li> <a id="mega_headerMenu-{{ link.handle }}-{{ childlink.handle }}" href="{{ childlink.url }}" >{{ childlink.title | escape }} </a> </li>
                           {% endfor %}
                        </ul>
                      </div>
                {% endfor %}

                <div class="list-item">
                  <img src="<<Put image link here"  class="responsive"  width="300" height="173" alt="Shop Product">
                </div>
                 </div>
        </li>

Upvotes: 0

Akshay Shah
Akshay Shah

Reputation: 3504

Yes it is possible to creat it.. If app developer can do it than we can easily do it.

Develop your static html and css for navigation after that create the menu from admin and than develop your html dynamic with use of link list.

Here is the link. You can fetch the collection url and display it.

You can do the sorting of sub menu in alphabetic orders..

I did it in past and it is little complex but if you are good discerning developer than it's not a big issue for you to understand the code..

There is no rocket science...

Upvotes: 1

Nham Nguyen
Nham Nguyen

Reputation: 621

If you don't want to use Shopify Mega Menu app, You can make your self by static HTML. Follow the tutorial to create a HTML mega menu: https://designmodo.com/create-css3-mega-menu/

Upvotes: 0

Related Questions