Mobile Ansicht separat von Desktop Ansicht ändern

[TIVERY]

Kann ich Sachen in meiner Mobile Ansicht ändern ohne, dass es in meiner Desktop Ansicht geändert wird? Wenn ja wie und wie kann ich das einstellen?

Vielen Dank!

[Gabe]

Hey @TIVERY 

Danke für die Frage und vieles kommt darauf an was du ändern möchtest. Somit würdest du eine schnellere und genauere Antwort hier in der Community bekommen wenn du uns beschreibst was genau du anders auf Mobile haben möchtest (samt den einen oder zwei Screenshots als Beispiele).

Bei so einem Fall wäre auch ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren denn wir brauchen hier die genauen CSS Classes oder IDs in deinem Theme Code, um dir eine Custom Code Solution geben zu können.

Media Queries

CSS Code für Mobile verwendet normalerweise die sog. "Media Queries" die es ermöglichen, CSS-Regeln basierend auf bestimmten Responsive Design Bedingungen wie Bildschirmgröße, Auflösung oder Gerätetyp anzuwenden. Für mobile Geräte sind Media Queries besonders nützlich, um Stile anzupassen, die speziell auf Mobile ausgerichtet sind. Hier ein Beispiel CSS-Code, der eine Änderung nur auf mobilen Geräten vorsieht:

@media screen and (max-width: 768px) {
    /* CSS-Regeln hier einfügen */
    .beispielclass {
        /* Spezifische Eigenschaften für mobile Geräte */
    }
}

In diesem Beispiel:

• @media screen and (max-width: 768px) { ... }: Dies ist die Media Query. Sie wendet die darin enthaltenen CSS-Regeln nur auf Bildschirme an, deren Breite 768 Pixel oder weniger beträgt, was typischerweise auf mobile Geräte zutrifft.
• .beispielclass { ... }: Innerhalb der Media Query definierst du die CSS-Regeln für spezifische Klassen, IDs oder HTML-Elemente, die nur für mobile Geräte gelten sollen.

Du kannst den Wert max-width anpassen, um die CSS-Änderungen auf verschiedene Bildschirmgrößen auszurichten. Zum Beispiel, max-width: 480px für kleinere Mobilgeräte oder max-width: 1024px für Tablets.

Es ist auch wichtig, darauf zu achten, dass diese Anpassungen im Einklang mit dem restlichen Design und der Funktionalität deines Shopify-Themes stehen.

Dein 2.0 Theme Editor und das Responsive Design

Viele gestalterische Dinge für Desktop und auch für Mobile kannst du bereits in deinen 2.0 Theme Einstellungen einstellen da sie jetzt auf dem Responsive Design aufgebaut sind. Hast du da geschaut ob die Theme Einstellungen dir weiterhelfen können? Der Theme-Editor in deinem Shopify-Adminbereich ermöglicht es dir, das Erscheinungsbild deines Onlineshops individuell anzupassen, einschließlich spezifischer Anpassungen für die mobile Ansicht. Im Theme-Editor kannst du eine Vorschau deines Themes anzeigen und Änderungen an den Theme-Einstellungen in Echtzeit anschauen. Außerdem kannst du Inhalte hinzufügen, entfernen, bearbeiten und neu anordnen. Für Änderungen, die nicht direkt über den Theme-Editor vorgenommen werden können und spezielles Wissen in HTML, CSS und Liquid erfordern, besteht auch die Möglichkeit, den Theme-Code direkt zu bearbeiten.

Für detailliertere Informationen und Anleitungen kannst du das Shopify Help Center besuchen, das ausführliche Anleitungen und Ressourcen für die Anpassung von Themes bietet​​​​.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉 

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

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.