Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/larguar/shopify-clickable-links
A quick fix to make main navigation links clickable for the Combine theme mega menu.
https://github.com/larguar/shopify-clickable-links
javascript liquid shopify
Last synced: about 1 month ago
JSON representation
A quick fix to 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 (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-02T21:46:16.000Z (about 1 month ago)
- Last Synced: 2024-12-02T22:24:14.127Z (about 1 month ago)
- Topics: javascript, liquid, shopify
- Homepage:
- Size: 6.84 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.
 
## 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 %} Clickable Mega Menu Links {% endcomment %}
document.getElementById("mega_menu_6t4AGw").onclick = function() {
window.location.href = "/collections/pins";
};
document.getElementById("mega_menu_7Cnq9A").onclick = function() {
window.location.href = "/collections/extras";
};
setTimeout(() => {
document.getElementById("mega_menu_6t4AGw-sticky").onclick = function() {
window.location.href = "/collections/pins";
};
document.getElementById("mega_menu_7Cnq9A-sticky").onclick = function() {
window.location.href = "/collections/extras";
};
}, 0.1);
```
## 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:
[](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`).