FROM CACHE - de_header

Zusätzliche Beschriftung von Menüpunkten

Gelöst
deinepanele
Neues Mitglied
1 0 0

Hallo,

ich habe mal eine kleine Frage an die Community.

Ist es möglich einzelene Menüpunkte im Header zusätzlich zu beschriften (Callout)?

Beispiel:
Menüpunkt "Weihnachten" soll noch einen kleinen Zusatz "NEU" erhalten.

Bei Wordpress war es relativ einfach mit Code:
Weihnachten<span class="menu-badge badge-bounce">NEU</span>

Natürlich könnte ich diverse Mega-Menü Apps zurückgreifen.
Aber das möchte ich eigentlich nicht.

 

Mit freundlichen Grüßen

Danny Weber
E-Commerce Manager

2 AKZEPTIERTE LÖSUNGEN

Anerkannte Lösungen
Gabe
Shopify Staff
Shopify Staff
7412 1188 1919

Erfolg.

Hey Danny! @deinepanele 

Gute Frage und das hängt sehr vom Theme Code Aufbau ab und welches Theme du verwendest. Hier rate ich eine Experten zu konsultieren wie @r8r oder @tewe.

Im folgenden Beispiel geht es um den Menüpunkt mit der roten Farbe highlighten aber man kann das ggf. mit <span class="menu-badge badge-bounce">NEU</span> ersetzen das neben dem Menüpunkt einzugeben ist, auf dem das Abzeichen erscheinen soll.

Man kann z. B. im theme.css.liquid Asset ein Snippet ganz unten einpflegen ähnlich wie in diesem Fall es den Menüpunkt mit Rot highlighted:

.site-nav > li:nth-child(2) a { color:red; }

 ODER (je nach Theme)

#AccessibleNav li:nth-child(2) a {
	color: red;
}

 Beim Testament Theme zum Beispiel

ul#main-nav>li:nth-child(3) a {
color: red!important;
}
@media screen and (max-width: 739px) {
ul#accordion li:nth-child(3) a{
color: red!important;
}
}

AUF HANDY Mobile View

#shopify-section-mobile-navigation ul#accordion li:nth-child(4) a {
    color: red!important;
}

Farbe ändern beim Mouse-Over

/*changes the color of item in menu*/
.site-header .site-nav__link:hover {
color: #f6251a !important;
}
.site-header .site-nav--active .site-nav__link {
color: #f6251a !important;
}

Das CSS für die deine Badge könnte einer wie folgt sein:

.menu-badge {
	font-size: 9px;
	margin-left: 4px;
	position: relative;
	top: -10px;
	margin-bottom: 13px;
	color: #ffffff;
	background-color: #FF0000;
	padding: 3px 4px;
	border-radius: 3px;
}

CSS wenn man eine Animation ergänzen möchte (optional):

.badge-bounce {
	animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}

@keyframes bouncing{
	0%{top:-6px}
	100%{top:-10px}
}

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

Lösung in ursprünglichem Beitrag anzeigen

r8r
Shopify Expert
2350 305 834

Erfolg.

@deinepanele Danny – erst einmal ein Hallo hier im Forum!

Danke @Gabe für Dein Ping – die Umsetzung ist im Prinzip nicht unähnlich dem, wie Du das auch in WordPress machen kannst; ähnlich zu WordPress ist es aber auch bei Shopify eine Sache, deren Implementierung im Großen und Ganzen davon abhängt, welches Theme im Einsatz ist.

Wir haben soetwas gerade erst wieder umgesetzt:

Desktop:

Screenshot 2021-08-24 at 14.16.53.jpg

Mobile:

Screenshot 2021-08-24 at 14.17.05.jpg

Das von Dir angesprochene span-Element müsstest Du an der richtigen Stelle im Code einfügen, wo das Menü aufgespannt wird. Wenn Du diese Stelle gefunden hast, ist es dann nicht mehr so schwierig zu lösen.

Wenn Du konkrete Hilfe benötigst, kannst Du mir auch gerne schreiben und ich kann mal in den Code reinsehen.

LG, Mario

  

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2
Gabe
Shopify Staff
Shopify Staff
7412 1188 1919

Erfolg.

Hey Danny! @deinepanele 

Gute Frage und das hängt sehr vom Theme Code Aufbau ab und welches Theme du verwendest. Hier rate ich eine Experten zu konsultieren wie @r8r oder @tewe.

Im folgenden Beispiel geht es um den Menüpunkt mit der roten Farbe highlighten aber man kann das ggf. mit <span class="menu-badge badge-bounce">NEU</span> ersetzen das neben dem Menüpunkt einzugeben ist, auf dem das Abzeichen erscheinen soll.

Man kann z. B. im theme.css.liquid Asset ein Snippet ganz unten einpflegen ähnlich wie in diesem Fall es den Menüpunkt mit Rot highlighted:

.site-nav > li:nth-child(2) a { color:red; }

 ODER (je nach Theme)

#AccessibleNav li:nth-child(2) a {
	color: red;
}

 Beim Testament Theme zum Beispiel

ul#main-nav>li:nth-child(3) a {
color: red!important;
}
@media screen and (max-width: 739px) {
ul#accordion li:nth-child(3) a{
color: red!important;
}
}

AUF HANDY Mobile View

#shopify-section-mobile-navigation ul#accordion li:nth-child(4) a {
    color: red!important;
}

Farbe ändern beim Mouse-Over

/*changes the color of item in menu*/
.site-header .site-nav__link:hover {
color: #f6251a !important;
}
.site-header .site-nav--active .site-nav__link {
color: #f6251a !important;
}

Das CSS für die deine Badge könnte einer wie folgt sein:

.menu-badge {
	font-size: 9px;
	margin-left: 4px;
	position: relative;
	top: -10px;
	margin-bottom: 13px;
	color: #ffffff;
	background-color: #FF0000;
	padding: 3px 4px;
	border-radius: 3px;
}

CSS wenn man eine Animation ergänzen möchte (optional):

.badge-bounce {
	animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}

@keyframes bouncing{
	0%{top:-6px}
	100%{top:-10px}
}

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
2350 305 834

Erfolg.

@deinepanele Danny – erst einmal ein Hallo hier im Forum!

Danke @Gabe für Dein Ping – die Umsetzung ist im Prinzip nicht unähnlich dem, wie Du das auch in WordPress machen kannst; ähnlich zu WordPress ist es aber auch bei Shopify eine Sache, deren Implementierung im Großen und Ganzen davon abhängt, welches Theme im Einsatz ist.

Wir haben soetwas gerade erst wieder umgesetzt:

Desktop:

Screenshot 2021-08-24 at 14.16.53.jpg

Mobile:

Screenshot 2021-08-24 at 14.17.05.jpg

Das von Dir angesprochene span-Element müsstest Du an der richtigen Stelle im Code einfügen, wo das Menü aufgespannt wird. Wenn Du diese Stelle gefunden hast, ist es dann nicht mehr so schwierig zu lösen.

Wenn Du konkrete Hilfe benötigst, kannst Du mir auch gerne schreiben und ich kann mal in den Code reinsehen.

LG, Mario

  

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte