abbrechen
Suchergebnisse werden angezeigt für 
Stattdessen suchen nach 
Meintest du: 

Einzelnen Menüpunkt nur im mobilen Menü anzeigen lassen

Gelöst
Amoonic
Neues Mitglied
3 0 2

Hallo an alle,

in unserem Shop (https://amoonic.de/) möchten wir in der Kategorie "Ringe" einen Menüpunkt lediglich im mobilen Menü anzeigen lassen, da das Mega Menü in der Desktop Ansicht bereits zu voll ist (hier würden wir dann einfach das Bild im Menü verwenden, um zu der entsprechenden Kategorie zu verlinken). 

Kennt ihr eine Möglichkeit, wie man einen Menüpunkt ausschließlich mobile erscheinen lassen kann?

Danke und viele Grüße 

Laura

0 Likes
Gabe
Shopify Staff
Shopify Staff
4407 574 1029

Hey Laura! @Amoonic 

Wow das ist ein klasse Shop. Wenn ich fragen darf, wie läufts? Was läuft gut und was nicht so? Was sind die Schmerzpunkte?

Dein Menü auf Handy zu einem Menüpunkt zu reduzieren ist natürlich ein toller Weg die Customer Experience auf Mobile zu verbessern, nur wird das eine komplexe Programmierung verlangen, wenn ich das richtig verstanden habe (so oder so).

Das folgende ist wie gesagt OHNE Gewähr und bitte in einer Theme Kopie testen, ansonsten einen Experten konsultieren

Man kann z. B. den Menüpunkt in den Navigations-Einstellungen bearbeiten, und eine Span Class wie '<span class="hide-mobile">NAME </span>' da hinzufügen. Dann ein Skript wie das folgende ganz unten einpflegen im theme.scss.liquid, aber ob klappt oder nicht kann ich nicht garantieren:

@media only screen and (max-width: 749px)
	.SidebarMenu__Nav .hide-mobile {
              display: none !important;
	}
}

Da obige Code versteckt einen bestimmten Menüpunkt auf Mobile aber ist ein Ansatz und kann ge-tweaked werden um nur bestimmte Menüpunkte zu "hiden". Es kommt natürlich auch auf das Theme drauf an denn alle Themes haben verschiedenen interne Code-Strukturen, wie du ja weißt.

  • Hast du mit deinen Theme Entwickler sprechen können diesbzgl.? Die haben oft ein paar Tricks im Ärmel.

Aber man sieht oben, dass dies ziemlich komplex ist und man fortgeschrittene Coding Kenntnisse haben sollte. Vielleicht kann hier einer unserer Experten helfen, wie @tewe oder @r8r?

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

r8r
Shopify Expert
1470 162 488

Erfolg.

@Amoonic – vor ein paar Tagen hab ich genau dasselbe in einem Prestige-Projekt gemacht.

Um das ohne Veränderungen an Deinem aktuellen HTML-/Liquid-Code bewerkstelligen zu können und nur CSS ergänzen zu müssen, musst du hier zwei Parameter wissen:

1.) Den wievielten Hauptmenüpunkt betrifft das Ganze? (Schmuck = 1, Ringe = 2, Verlobungsringe = 3, etc.).

2.) Wie ist der Titel (bzw. die entsprechende CSS-Klasse, die Du aus dem Quelltext der Seite rauslesen kannst) des Untermenüpunktes, den das betrifft.

Am Beispiel, dass Du den Unterpunkt "Karat" von "Verlobungsringe" ausblenden möchtest, wäre das der 3. Hauptmenüpunkt – merke: li:nth-child(3) – und die Klasse vom Unterpunkt .title-karat. In Summe ergibt sich dann die folgende Regel, mit der Du auf Desktop das "Karat"-Untermenü vom 3. Hauptmenüpunkt ausblenden kannst:

@media screen and (min-width: 1116px) {
  li:nth-child(3) div.MegaMenu__Item.MegaMenu__Item--fit.title-karat {
    display: none;
  }
}

Für andere Punkte kannst Du die Selektoren einfach duplizieren, mit Komma trennen, und die beiden Parameter anpassen. Z.B. so:

@media screen and (min-width: 1116px) {
  li:nth-child(2) div.MegaMenu__Item.MegaMenu__Item--fit.title-ringtyp,
  li:nth-child(2) div.MegaMenu__Item.MegaMenu__Item--fit.title-edelmetalle,
  li:nth-child(3) div.MegaMenu__Item.MegaMenu__Item--fit.title-karat {
    display: none;
  }
}

Ich hoffe, dass das hilft?
Mario

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
Gabe
Shopify Staff
Shopify Staff
4407 574 1029

@r8r 

Erstklassige Hilfe Mario!

Top!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Amoonic
Neues Mitglied
3 0 2

Hey Mario, 

wow, hat direkt funktioniert, obwohl ich mich recht wenig im Code auskenne.

1.000 Dank für deine Hilfe!

LG

Laura

r8r
Shopify Expert
1470 162 488

Gerne Laura – danke für die Rückmeldung. Freut mich, dass das gleich funktioniert hat!

Alles Liebe und viel Erfolg!
Mario

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes