创建 Shopify 超级菜单

Question

我想在shopify中制作一个带有自定义编码的大型菜单，例如https://shopifybooster.myshopify.com/。但我找不到任何解决方案。我知道 Shopify 有很多大型菜单应用程序。但它们的成本很高。所以，我想用自定义代码制作一个大型菜单。

Answer 1

是的，可以创建它.. 如果应用程序开发人员可以做到，那么我们就可以轻松做到。

开发静态 html 和 css 用于导航，然后从管理创建菜单，然后使用链接列表开发动态 html。

这是链接。您可以获取收藏网址并显示它。

您可以按字母顺序对子菜单进行排序..

我过去曾这样做过，它有点复杂，但如果你是一位眼光敏锐的开发人员，那么理解代码对你来说并不是一个大问题..

没有火箭科学......

Answer 2

如果您不想使用Shopify Mega Menu应用程序，您可以通过静态HTML自行制作。 按照教程创建 HTML 大型菜单：https://designmodo.com/create-css3-mega-menu/

Answer 3

我在这方面做了如下尝试。大家都可以贡献

1. 在

   https://www.cssscript.com/demo/responsive-mega-menu/

   发现了一个很棒的大型菜单，这是开放的。

2. 复制了相关的html+css和javascript。

3. 将 html + CSS 放在一个

   .liquid

   文件 (

   megamenu.liquid

   ) 中，并将 javascript 放在单独的 .js 文件中 (例如，

   megamenu-liquid-support.js

   )。将

   <script src="{{ 'megamenu-liquid-support.js' | asset_url }}"> </script>

   放在megamenu.liquid
   的html末尾

4. 打开 Shopify Dawn 主题的 header.liquid 文件。

5. 注释了第 159 至 346 行，它们负责菜单的显示。

6. 在线号。 347，放置标签

   {% render 'megamenu.liquid' %}

   以将其渲染到屏幕上。到目前为止，我们正在讨论 header.liquid 中的行

7. 现在，您需要从第54行到第71行添加一小段代码（在

   megamenu.liquid

   中），如下所示，并注释掉第71行。 72 到 133。基本上，对其进行注释将禁用硬编码 CSS，下面的代码将实现 shopify 的链接列表菜单。还将

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.6.3/css/ionicons.min.css">

   放在 megamenu.liquid 的开头。要放置的代码如下：

8. 沃拉！您的shopify 网站上有megamenu 功能。锦上添花 - 它也可以在移动设备上使用！！！

9. 现在问题部分，在完成上述操作后，您将拥有功能菜单，因为现在 CSS 变得混乱，并且 Shopify 商店的每个页面上的字体大小等都变得很奇怪。 有什么解决方案吗。我想到了这个问题，希望有人能从中得到帮助，一些老手也可以帮助我们。

 <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>