Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

Ausgewählte Vorlagen

Shopify.Wie man ein Dropdown Menü zum Mega Menu hinzufügt

Dieses Tutorial wird Ihnen zeigen, wie man ein Dropdown Menü zu Ihrem Mega Menu im Shopify Shop hinzufügt.

  1. Öffnen Sie Ihre Admin Panel und gehen Sie zu Online Store -> Themes.

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_1
  2. Finden Sie das Thema,das Sie bearbeiten wollen und klicken Sie auf die Taste, und danach auf Edit HTML/CSS.

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_2
  3. Im Config Ordner, finden Sie und klicken Sie auf die settings_schema.json Datei und öffnen Sie sie im Online Code editor.

  4. Im Online Code editor, fügen Sie diesen Code hinzu:

    {
    "type": "link_list",
    "id": "megamenu5_sub",
    "label": "Dropdown"
    },
             
    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_3
  5. Im Snippets Ordner, finden Sie und klicken Sie auf die widget-megamenu.liquid atei und öffnen Sie sie im Online Code editor.

  6. Im Online Code editor, fügen Sie den Code für den Dropdown nach der Zeile des fünften Elements hinzu :

    <a href="{{ settings.megamenu5_link }}">{{ settings.megamenu5_text }}{% if settings.megamenu5_badge and settings.megamenu5_badge != '' %}<span class="menu_badge">{{ settings.megamenu5_badge }}</span>{% endif %}</a>
    {% capture linklist_iteration %}megamenu5_sub{% endcapture %}
             {% capture linklist_name %}{{ settings[linklist_iteration] }}{% endcapture %}
    	
    	<ul>
    	  {% for link in linklists[linklist_name].links %}
    	  <li>{{ link.title | link_to: link.url }}</li>
    	  {% endfor %}
           </ul>
    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_4
  7. Im Assets Ordner, finden Sie und klicken Sie auf die style.css.liquid file to open it in the online code editor.

  8. Im Online Code editor,fügen Sie die Dropdown Stile hinzu:

    li.megamenu_item_5 {
      position: relative;
      }
    
    .sf-menu > li.megamenu_item_5 > ul {
      width: 200px;
      position: absolute;
      left: 0;
      top: 50px;
      }
    .sf-menu > li.megamenu_item_5 > ul li a {
      padding-left: 5px;
      padding-bottom: 10px;
      font-size: 25px;}
    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_5
  9. Speichern Sie Ihre Änderungen.

  10. Gehen Sie zu Online Store -> Themes > Customize theme > Mega Menu und fügen Sie das Dropdown Menü für den Menüpunkt hinzu(in unserem Fall ist es der 5. Punkt).

Sie können sich gerne unser ausführliches Video Tutotial ansehen:

Shopify. Wie man ein Dropdown Menü zum Mega Menu hinzufügt
 
Chat starten