Liquid, JavaScript, Themes
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
Gelöst! Zur Lösung
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
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:
Mobile:
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
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
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:
Mobile:
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
Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024Was ist ein kleines Element eines Shopify Shops mit großer Wirkung? Ein Element ganz we...
By Kai Mar 14, 2024Was genau ist POD? Von T-Shirts bis hin zu Plakaten, Kaffeetassen, Wandmatten, alles was m...
By Kai Feb 29, 2024