Liquid, JavaScript, Themes
Hallo zusammen,
im o.g. Theme gibt es in der Demo Version ein "Klappmenü" bei den Produkten.
Wo finde ich die passende Einstellung dafür?
anbei noch ein Foto
Danke für die Hilfe !
Gelöst! Zur Lösung
Erfolg.
@SirAssa das Thema Metafelder ist relativ umfangreich und wird eventuell auch für deine Filterung in den Kategorien notwendig sein. Daher habe ich mal die relevanten Artikel/Erläuterungen von Shopify hier mal aufgelistet.
Um einen Überblick zu erhalten hier eine Erläuterung zu den Metafelder (wie eine Art Intro)
https://www.shopify.de/partners/blog/online-store-2-0#FlexibleDaten
Hier reicht es, wenn du nur den Absatz zu Flexible Daten liest.
Folgender Seite zeigt die wie die Metafelder etwas konkreter genutzt werden können
https://help.shopify.com/de/manual/metafields
Diese Seite, inkl. Verlinkungen, zeigen wie du Metafelder erstellen kannst und diese auf deine Produktseite einbinden kannst.
Sobald du die Metafelder erstellt und entsprechende mit Informationen/Texten gefüllt hast, kannst du anhand der folgenden Seite sehen, wie du die Informationen in den „Minimierbarer Tab“ integrieren kannst.
https://help.shopify.com/de/manual/metafields/displaying-metafields-on-your-online-store
Anmerkung: Wenn du dir vorherige Seite zum Thema "Metafields" durchliest, wird auch diese Seite genannt/verlinkt.
Ich hoffe, es hilft dir weiter.
Erfolg.
@Ben310 man kann über CSS und/oder Javascript ein paar Modifikationen machen, damit man es anpassen kann. Allerdings ist das mit dem"nicht"-Wegschieben des Inhalts abhängig der Position des Tabs ggf. nicht die beste Option. Wenn der Tab zum Beispiel dreimal untereinander angeordnet wird, würde der erste offene Tab die anderen überblenden, was dafür sorgt, dass der Nutzer es nicht sieht.
Folgende CSS Eigenschaften muss man dem Tab zuweisen damit der darunter liegende Inhalt nicht nach unten geschoben wird:
position: absolute;
width: 100%;
background-color: white;
Allerdings muss man die Hintergrundfarbe an das eigene Design anpassen.
Darüber hinaus, lohnt es sich dem Tab eine neue Klasse zuzuweisen und dieser Klasse die oben aufgeführten Eigenschaften zu geben. Dadruch werden andere Accordion-Elemente nicht beeinflusst.
@SirAssa das kannst du über den Theme-Editor auf der Produktseite einstellen. Hierzu musst du unter „Produktinformationen“ den Block "Minimierbarer Tab" (collapsible tab) auswählen. Um den Inhalt dynamisch für jedes Produkt laden zu können (bspw. Produktabmessungen), musst du ein Metafeld erstellen. Ansonsten kann es passieren, dass bei jedem Produkt, das Gleiche angezeigt wird.
Dafür erstmal danke ! Dann muss ich mich mit den Metafeldern mal beschäftigen. Hast du da vielleicht ne kurze Anleitung für mich ? Produktabmessung benötige ich zum Beispiel 😄
lg
Erfolg.
@SirAssa das Thema Metafelder ist relativ umfangreich und wird eventuell auch für deine Filterung in den Kategorien notwendig sein. Daher habe ich mal die relevanten Artikel/Erläuterungen von Shopify hier mal aufgelistet.
Um einen Überblick zu erhalten hier eine Erläuterung zu den Metafelder (wie eine Art Intro)
https://www.shopify.de/partners/blog/online-store-2-0#FlexibleDaten
Hier reicht es, wenn du nur den Absatz zu Flexible Daten liest.
Folgender Seite zeigt die wie die Metafelder etwas konkreter genutzt werden können
https://help.shopify.com/de/manual/metafields
Diese Seite, inkl. Verlinkungen, zeigen wie du Metafelder erstellen kannst und diese auf deine Produktseite einbinden kannst.
Sobald du die Metafelder erstellt und entsprechende mit Informationen/Texten gefüllt hast, kannst du anhand der folgenden Seite sehen, wie du die Informationen in den „Minimierbarer Tab“ integrieren kannst.
https://help.shopify.com/de/manual/metafields/displaying-metafields-on-your-online-store
Anmerkung: Wenn du dir vorherige Seite zum Thema "Metafields" durchliest, wird auch diese Seite genannt/verlinkt.
Ich hoffe, es hilft dir weiter.
Danke für deine ausführliche Antwort. Dann werd ich mich da mal einlesen und ggf hier nochmal schreiben.
Vielen Dank !
Hallo Finer,
gibt es auch eine Möglichkeit das Klappmenü an einer anderen Stelle als in 'Produktinformationen' anzuwenden?
Vielen Dank.
@VULFIs-M solche Tabs sind in der Regel auch als "Accordion" bekannt und können fast überall eingesetzt werden (bsp. FAQ). Wenn man das im Dawn-Theme an anderer Stelle einsetzen will, muss man aber an den Code ran und das manuell einbauen, da es keine Standardfunktion ist.
Hallo @Finer
Ja das wusste ich schon.
Kann ich aber leider nicht, auch wenn es sicherlich nur 5 Minuten dauert.
Falls du das für uns tun kannst, meld dich gern.
Danke
Noch ne Frage dazu: das collapsible tab klappt nach unten auf, aber nicht besonders schön und schiebt alles darunter nach unten. Kann man wenigstens die speed des öffnen des Tabs ändern oder verlangsamen?
Erfolg.
@Ben310 man kann über CSS und/oder Javascript ein paar Modifikationen machen, damit man es anpassen kann. Allerdings ist das mit dem"nicht"-Wegschieben des Inhalts abhängig der Position des Tabs ggf. nicht die beste Option. Wenn der Tab zum Beispiel dreimal untereinander angeordnet wird, würde der erste offene Tab die anderen überblenden, was dafür sorgt, dass der Nutzer es nicht sieht.
Folgende CSS Eigenschaften muss man dem Tab zuweisen damit der darunter liegende Inhalt nicht nach unten geschoben wird:
position: absolute;
width: 100%;
background-color: white;
Allerdings muss man die Hintergrundfarbe an das eigene Design anpassen.
Darüber hinaus, lohnt es sich dem Tab eine neue Klasse zuzuweisen und dieser Klasse die oben aufgeführten Eigenschaften zu geben. Dadruch werden andere Accordion-Elemente nicht beeinflusst.
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024