Ein Nutzer möchte im Craft-Theme bestimmte Abschnitte nur auf mobilen Geräten oder nur auf dem Desktop anzeigen lassen, um Landingpages für mobile Endgeräte zu optimieren – insbesondere durch Einbau einer Slideshow, die auf Desktop durch andere Elemente ersetzt werden soll.
Vorgeschlagene Lösung:
@media) zum Verbergen/Anzeigen von Elementen je nach Bildschirmgrößebase.css oder im benutzerdefinierten CSS-Editor eingefügt werden.mobile-slideshow, .desktop-section)Herausforderungen:
theme.liquid als auch in .json-DateienEmpfehlung:
Da die Umsetzung komplexer ist als zunächst angenommen, wird empfohlen, einen Shopify-Experten/Partner zu engagieren, der direkten Zugang zum Theme hat und die Code-Anpassungen professionell durchführen kann. Wichtig: Immer in einer Themekopie/Testumgebung arbeiten.
Hallo,
gerne würde ich einzelne Abschnitte nur Mobil anzeigen lassen und wiederum andere nur auf dem Desktop. Ich benutze das Craft-Theme.
Um meine Landingpages für mobile Endgeräte zu optimieren, würde ich gerne eine Slideshow einbauen. Diese sieht jedoch auf dem Desktop sehr bescheiden aus, deshalb wäre es super, wenn dieses Element/Abschnitt auf dem Desktop durch einen anderen Abschnitt ersetzt werden kann.
Vielen Dank vorab für eure Hilfe. Freue mich, von euch zu hören.
Hey @Pete_4Mar
Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren.
Das Verstecken und Anzeigen von Abschnitten auf verschiedenen Geräten kann einfach mit CSS erreicht werden. Wenn du es selber programmieren möchtest und keine Apps gefunden hast, die das viel besser können, dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Du kannst Medienabfragen verwenden, um bestimmte Elemente je nach Bildschirmgröße zu verbergen oder anzuzeigen. Hier ist eine Anleitung, wie du das in deinem Shopify Craft-Theme machen kannst:
Melde dich in deinem Shopify-Adminbereich an und navigiere zu Online-Shop > Themes. Finde das Craft Theme und klicke auf “Aktionen” > “Code bearbeiten”. Um Elemente/Abschnitte gezielt ansprechen zu können, solltest du ihnen individuelle Klassen geben.
Zum Beispiel, wenn du eine Slideshow nur für mobile Geräte anzeigen möchtest, könntest du folgenden Code in die Liquid-Datei einfügen, die die Slideshow rendert:
Und für einen Abschnitt, der nur auf dem Desktop angezeigt werden soll:
Navigiere nun zu deinen Theme Editor → Benutzerdefiniertes CSS:
Wenn das nicht funzt dann → Stylesheets im Code, meistens befinden sie sich in assets und der Haupt-CSS-Dateiname könnte base.css. Füge am Ende der Datei die folgenden Medienabfragen hinzu:
/* Mobile Geräte */
@media (max-width: 767px) {
.desktop-section {
display: none;
}
}
/* Desktop */
@media (min-width: 768px) {
.mobile-slideshow {
display: none;
}
}
Die obigen Medienabfragen verbergen die .desktop-section auf Bildschirmen, die schmaler als 768 Pixel sind (typischerweise mobile Geräte) und verbergen die .mobile-slideshow auf Bildschirmen, die breiter als 767 Pixel sind (typischerweise Desktops).
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Hallo Gabe,
vielen Dank für deine Hilfe. Kannst du den Code für das Benutzerdefiniertes CSS hier posten, damit ich ihn kopieren kann?
Die Seite ist bereits Online. Wie soll ich den Link mit dir Teilen?
Hey @Pete_4Mar
Den Code habe ich oben im Code Kästchen schon gepostet. Das Bild ist nur ein Beispiel des CSS Editor mit einem roten Sale Menüpunkt. Wenn es nicht funzt, in diesem Fall wird das einen Experten verlangen und du findest die in unserem Design Forum und wenn du deine Frage da postest wird sich einer melden der einen tieferen 
in deinen Code werfen kann.
Ich habe auch den befristeten Vorschaulink oben verlinkt. Siehe oben 
Hi @Gabe , vielen Dank für deine Antwort. Leider konnte ich deine Lösung noch nicht ausprobieren, da ich mir nicht ganz klar ist, wo ich
Einfügen muss. Kannst du das nochmals spezifizieren?
In der Page json?
Falls ja, wo genau?
{
“sections”: {
“main”: {
“type”: “main-page”,
“disabled”: true,
“settings”: {
“padding_top”: 36,
“padding_bottom”: 36
}
},
“405f73e2-7f82-4b45-8711-f7d00b93f4da”: {
“type”: “rich-text”,
“blocks”: {
“8a9d5992-3ed6-4fd8-aae5-342760e17ff9”: {
“type”: “heading”,
“settings”: {
“heading”: “ORGANIC BABY T-SHIRTS”,
“heading_size”: “h2”
}
},
“template–19764612202824__405f73e2-7f82-4b45-8711-f7d00b93f4da-text-1”: {
“type”: “text”,
“settings”: {
“text”: “”
}
},
“template–19764612202824__405f73e2-7f82-4b45-8711-f7d00b93f4da-button-1”: {
“type”: “button”,
“settings”: {
“button_label”: “”,
“button_link”: “”,
“button_style_secondary”: false,
“button_label_2”: “”,
“button_link_2”: “”,
“button_style_secondary_2”: false
}
}
},
“block_order”: [
“8a9d5992-3ed6-4fd8-aae5-342760e17ff9”,
“template–19764612202824__405f73e2-7f82-4b45-8711-f7d00b93f4da-text-1”,
“template–19764612202824__405f73e2-7f82-4b45-8711-f7d00b93f4da-button-1”
],
“settings”: {
“desktop_content_position”: “center”,
“content_alignment”: “center”,
“color_scheme”: “”,
“full_width”: true,
“padding_top”: 40,
“padding_bottom”: 0
}
},
“7364debe-7a0e-49d3-be1c-f927267a3051”: {
“type”: “slideshow”,
“blocks”: {
“template–19764612202824__7364debe-7a0e-49d3-be1c-f927267a3051-slide-1”: {
“type”: “slide”,
“settings”: {
“image”: “shopify://shop_images/braun_623fcdce-37c6-44b1-9c1f-8a20de68c579.png”,
“heading”: “Sternzeichen”,
“heading_size”: “h1”,
“subheading”: “Entdecke weitere Motive und Farben”,
“button_label”: “SHOP NOW”,
“link”: “https://frida-and-me.com/collections/sternzeichen-print-organic-t-shirts-baby”,
“button_style_secondary”: false,
“box_align”: “middle-center”,
“show_text_box”: true,
“text_alignment”: “center”,
“image_overlay_opacity”: 0,
“color_scheme”: “”,
“text_alignment_mobile”: “center”
}
},
“template–19764612202824__7364debe-7a0e-49d3-be1c-f927267a3051-slide-2”: {
“type”: “slide”,
“settings”: {
“image”: “shopify://shop_images/grau_1a3a579e-ac5b-4c07-8ce6-ad1e0078de2f.png”,
“heading”: “Inspiring People”,
“heading_size”: “h1”,
“subheading”: “Entdecke weitere Motive und Farben”,
“button_label”: “SHOP NOW”,
“link”: “https://frida-and-me.com/collections/inspiring-people-organic-t-shirts-baby”,
“button_style_secondary”: false,
“box_align”: “middle-center”,
“show_text_box”: true,
“text_alignment”: “center”,
“image_overlay_opacity”: 0,
“color_scheme”: “”,
“text_alignment_mobile”: “center”
}
}
},
“block_order”: [
“template–19764612202824__7364debe-7a0e-49d3-be1c-f927267a3051-slide-1”,
“template–19764612202824__7364debe-7a0e-49d3-be1c-f927267a3051-slide-2”
],
“settings”: {
“layout”: “grid”,
“slide_height”: “medium”,
“slider_visual”: “dots”,
“auto_rotate”: true,
“change_slides_speed”: 5,
“image_behavior”: “none”,
“show_text_below”: true,
“accessibility_info”: “Organic T-Shirts Baby”
}
},
Hey @Pete_4Mar
Danke für den Code und da soll der Inhalt je nach Bildschirmgröße entweder angezeigt oder verborgen werden. Dein Code ist JSON-Strukturiert und repräsentiert die Konfiguration einer Seite, nicht den HTML/CSS Code, den wir zum Erreichen des Ziels modifizieren müssten.
Hier ein grundlegendes Beispiel, um mit css bestimmte Bereiche nur auf dem Desktop oder nur auf Mobilgeräten anzeigen zu lassen und das kannst du im CSS Editor testen:
/* CSS für Mobilgeräte */
@media only screen and (max-width: 768px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
/* CSS für Desktop */
@media only screen and (min-width: 769px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}
Dann den entsprechenden HTML-Code einfügen, um verschiedene Abschnitte für mobile und Desktop-Ansichten zu definieren. Hier ein Beispiel:
Dann den oben genannten CSS-Code, wie gesagt, im CSS Editor oder im base.css am Ende der Datei hinzufügen.
Die Platzierung des HTML-Codes hängt von der speziellen Theme-Struktur ab. Wenn du die Struktur deiner Landingpages mittels Shopify Sections und Blocks hast, kann der HTML-Code möglicherweise direkt in der betreffenden Liquid-Datei platziert werden. Hier ein Beispiel, wie das in einer Liquid-Datei aussehen könnte:
{% section 'your-desktop-section' %}
{% section 'your-mobile-section' %}
Beachte, dass du für jeden speziellen Bereich eine separate Section erstellen und anpassen müsstest und stelle sicher, dass, falls noetig, du im sections-Ordner die entsprechenden Dateien (z.B. your-desktop-section.liquid und your-mobile-section.liquid) erstellst und entsprechend gestaltest.
Vielen Dank für deine Hilfe.
Mein Problem ist, dass ich, wenn ich auf Code bearbeiten gehe, die nur die json der Landingpage finde aber keine liquid. Wie kann ich die liquid Datei der LP ausfindig machen?
Hey @Pete_4Mar
Da das eine größere Code Anpassung sowohl über dem theme.liquid als auch im .json verlangen wird, wird das nicht so einfach sein. Daher empfehle ich, wie oben, einen Shopify Partner auf zu suchen wie @Finer oder @Guido_Michele der/die Zugang zu deinem Theme hat und direkt in deinen Code eintauchen kann, was wir hier ja nicht machen können.
Du kannst natürlich auch das ganze in unserer privaten FB Gruppe hier posten und da wird sich ein Experte melden.