Shopify Venture Theme – Activate megamenu when mouse hovers over links

Shopify Venture Theme - Activate megamenu when mouse hovers over links

We quite like the Venture theme but after deploying it to a few sites we realized that there was one aspect of the user interaction that could be improved. To get the MegaMenu to open you have to click on the little arrow beside each menu item. It would make more sense that the menu opens as the mouse hovers over each item.

 

We searched on google to see if there were any examples of how to do this. There were a few tutorials out there but they seem to have problems with getting an effective solution for all use cases. The suggestions to edit the code for the megamenu often broke on mobile and tablet. As we weren't able to find a solution that we liked, we wrote our own.   

 

A couple of lines of extra lines of JavaScript added to your theme files triggers the mouseover effect we want. 

 

IMPORTANT: This involves editing the theme files for your site. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is recommended. If you are not comfortable editing the themes files we can do this for you. Just use the Contact Us page or Live Chat.

  1. From your Shopify admin, click Online Store, then click Themes :
    Click Online Store then Themes
  2. Find the theme you want to edit, click the ... button, then click Edit HTML/CSS:
    Click Edit HTML CSS button
  3. Create a new snippet called expertshopify.js.
    • In the left-hand side pane, scroll down and left-click Assets. Then, scroll further and click on the add a new asset button:
    • Name your asset “expertshopify.js”.
    • Click on expertshopify.js to open the asset in the online code editor.
    • Copy the content of this bitbucket file  into your asset, and click save.
  4. Include your asset in theme.liquid
    • Still on the Edit HTML/CSS page in your shop admin, click on theme.liquid under Layouts to open the layout in the online code editor. Scroll t the bottom of the file and just above the </body> tag add the following code:
          
             <script src="{{ 'expertshopify.js' | asset_url }}"></script>
          </body>
      
    • Click Save.
Loading Facebook Comments ...