https://github.com/larguar/shopify-clickable-links

Make main navigation links clickable for the Combine theme mega menu.
https://github.com/larguar/shopify-clickable-links

html javascript liquid shopify

Last synced: 4 months ago
JSON representation

Make main navigation links clickable for the Combine theme mega menu.

• Host: GitHub
• URL: https://github.com/larguar/shopify-clickable-links
• Owner: larguar
• Created: 2024-12-02T20:07:06.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-12-12T21:31:43.000Z (7 months ago)
• Last Synced: 2025-01-30T08:31:18.320Z (5 months ago)
• Topics: html, javascript, liquid, shopify
• Homepage: https://pinultimate.co
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Shopify Clickable Mega Menu Links

The Shopify Combine theme[^1] has a really great mega menu feature that I was excited to use for our website, but the functionality wasn't fully what I needed. By default, the mega menu appears when you hover over the designated link in the main menu, but that main menu 'link' doesn't actually function as a link. While the mega menu has additional links for a user to click through to if they so choose, I needed the main 'link' to still function as a link when clicked. This code allows for both the click and hover to occur, bettering the user experience.

![HTML Badge](https://img.shields.io/badge/-HTML-323795) ![JavaScript Badge](https://img.shields.io/badge/-JavaScript-539436) ![Shopify Liquid Badge](https://img.shields.io/badge/-Shopify%20Liquid-750460)   

## Table of Contents 

* [Code](#code)    

* [Questions](#questions) 

* [Donate](#donate)

* [Notes](#notes)

## Code

:file_folder: **sections/header.liquid**

Search for `{%- when 'mega-menu' -%}`[^2] and add to `{%- render -%}`:

```

id: block.id,

```

:file_folder: **snippets/site-nav-mega.liquid**

Search for ``[^3]:

```

id="{{ id }}"

```


:file_folder: **assets/script.js.liquid**[^4]

Add this code anywhere in your custom script file. Use browser Inspector to find the new `` ID for each menu menu navigation link (regular and sticky menu) and update ID names and `window.location.href` paths for each `document.getElementById()`:

```

{% comment %} [LG] Clickable Mega Menu Links {% endcomment %}

let pinsID = "mega_menu_6t4AGw";

let extrasID = "mega_menu_7Cnq9A";

let pinsURL = "/collections/pins";

let extrasURL = "/collections/extras";

document.getElementById(pinsID).onclick = () => window.location.href = pinsURL;

document.getElementById(extrasID).onclick = () => window.location.href = extrasURL;

setTimeout(() => {

  document.getElementById(pinsID + "-sticky").onclick = () => window.location.href = pinsURL;

  document.getElementById(extrasID + "-sticky").onclick = () => window.location.href = extrasURL;

}, 0.1);

{% comment %} [LG] End Clickable Mega Menu Links {% endcomment %}

```


## Questions

If you have any questions, feel free to find me at:

* Email: [email protected]

* Website: [larguar.com](https://larguar.com)

* Github: [@larguar](https://github.com/larguar)

## Donate

Appreciate this code? Say thanks with a coffee:

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W21YVJJ)

## Notes

[^1]: This code is specific to the [Combine](https://themes.shopify.com/themes/combine/styles/objects) theme in Shopify, but should work for other themes with some adjustments. File names will likely be different across themes.

[^2]: There should be two instances in the file. Add code to both.

[^3]: There are a few ``'s. Add to the `` code specifically for the link.

[^4]: This is the file I created for my shop's custom JavaScript. If you have your own file already created, you can add this snippet to that file. If you need to create a new file, just make sure you link to it in your `layout/theme.liquid` file and that it's a `.js.liquid` file (not just `.js`).