Passwortseite überarbeiten (Background / Hintergrundbild)

[mastahlb]

Guten Tag,

ich plane eine umfassende Überarbeitung meiner Passwortseite. Zunächst möchte ich ein Hintergrundbild hinzufügen, das eine Größe von 1920x1080px hat und den gesamten Bildschirm ausfüllt. Dabei ist zu beachten, dass das Hintergrundbild alle Balken und andere Elemente überdecken soll.

Wenn oben beispielsweise die Leiste zur Passworteingabe und daneben das Logo des Shops zu sehen sind, sollte das Hintergrundbild dahinter liegen, damit alle wichtigen Elemente gut sichtbar sind oder bleiben.

Und damit zu meiner Frage:

• Wie Füge ich das Hintergrundbild ein? Als Theme verwende ich das Motion Theme. Als Dateien kommen dann nur 2 in Frage. theme.liquid oder theme.css.liquid
• Wie kann ich das Hintergrundbild entsprechend den oben genannten Anweisungen anpassen?

Mit freundlichen Grüßen

[Gabe]

Hey @mastahlb 

Ist dein Shop noch im Aufbau? Wenn ja, die Passwort Seite ist eine tolle Chance deine zukünftige Käufer so richtig Lust und Laune auf das Einkaufen in deinem Shop zu stimulieren. Auf der Passwortseite kommt am besten ein netter Gruß und eine Einladung beim Eröffnungstag mit dabei zu sein, wie der folgende Text:

• "Willkommen zu unserem Shop XYZ der am AA.BB.CC den Eröffnungstag feiern wird. Seid bei unserer Eröffnungsfeier mit dabei, wo es tolle Schnäppchen geben wird. Einfach eure E-Mail in unserer Newsletter Form eintragen und wir senden euch nur unsere besten Angebote - aber kein Spam! Wir freuen uns auf Euch und hier ist auch ein 10% Rabatt den man am Eröffnungstag einlösen kann -> XYZ_Eröffnungsfeier"

Mit so einem Text kann man sog. Micro-commitments, sprich, Mikroverpflichtungen vermitteln, wie z. B. den Eintrag der E-Mail im Newsletter Kästchen, oder die Notiz des Datums der Eröffnungsfeier im eigenen online Kalender. 

Und nun zu deinen Fragen:

• Wie Füge ich das Hintergrundbild ein? Als Theme verwende ich das Motion Theme. Als Dateien kommen dann nur 2 in Frage. theme.liquid oder theme.css.liquid
• Wie kann ich das Hintergrundbild entsprechend den oben genannten Anweisungen anpassen?

Hast du mit den Motion Theme in den Theme Einstellungen arbeiten können, und wenn ja, wo bist du auf Einschränkungen gestossen? In den Einstellungen kannst du deine Passwortseite eigentlich ganz toll gestalten. Siehe ein Auszug aus meinem Test-Motion Theme (V.10.4.1) hier:

Apropos, alles bzgl. der Bearbeitung deiner Passwortseite findest du in unserer Entwickler Doku hier.

Wenn es um spezifischere Anpassungen geht, die über einfache CSS-Stiländerungen hinausgehen, insbesondere wenn du Anpassungen vornehmen möchtest, die in den Theme-Einstellungen nicht verfügbar sind. In diesem Fall ist es notwendig, direkt den Theme-Code für die Passwortseite zu bearbeiten. Hier ein CSS-Code als Beispiel, wie man ein Hintergrundbild für die Passwortseite deines Shopify-Stores einrichtet, sodass es den gesamten Bildschirm ausfüllt und hinter allen anderen Elementen liegt:

.template-password .main-content {
  background-image: url('{{ "background.jpg" | asset_url }}');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.template-password .main-content:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* Optional: Overlay hinzufügen */
  z-index: -1;
}

1. Stelle sicher, dass die Klassen .template-password und .main-content in deinem Theme vorhanden sind. Diese Klassen sind in meinem Beispielbezug auf die Struktur, die Shopify-Themes üblicherweise verwenden, aber die tatsächlichen Klassen oder IDs können in deinem spezifischen Theme anders sein. Überprüfe den HTML-Code deiner Passwortseite, um die korrekten Klassen oder IDs zu identifizieren.

2. Der Pfad url('{{ "background.jpg" | asset_url }}') geht davon aus, dass dein Bild background.jpg heißt und im assets-Ordner deines Themes liegt. Ändere background.jpg entsprechend dem Namen und Pfad deines Bildes.

3. Der .main-content:before-Teil fügt einen Overlay über dem Hintergrundbild hinzu, was hilfreich sein kann, um Text oder andere Inhalte besser sichtbar zu machen. Die Farbe und Transparenz des Overlays können angepasst werden, indem du die Werte in background: rgba(0, 0, 0, 0.5); änderst. Dieser Schritt ist optional und kann entfernt werden, wenn kein Overlay gewünscht wird.

Die tatsächliche Struktur deines Themes überprüfen, um sicherzustellen, dass die Selektoren korrekt sind.

• Den CSS-Code in die theme.css.liquid Datei einfügen und dann speichern.
• Deine Website im Anschluss testen, um sicherzustellen, dass das Hintergrundbild wie gewünscht angezeigt wird und keine unerwarteten Auswirkungen auf andere Teile der Website hat.

Schritt 1: Theme Code Bearbeiten der Passwortseite

1. Klicke im Verzeichnis Templates auf password.liquid. Diese Datei steuert die Hauptstruktur der Passwortseite.
2. Wenn du spezifische Abschnitte innerhalb dieser Seite ändern möchtest (wie Kopfzeile, Inhalt oder Fußzeile), findest du diese in den Liquid-Tags:
   • {% section 'password-header' %}
   • {% section 'password-content' %}
   • {% section 'password-footer' %}

Schritt 2: Abschnitte Bearbeiten

1. Um den Inhalt eines der oben genannten Abschnitte zu ändern, navigiere im Sections-Verzeichnis zu den entsprechenden Dateien:
   • password-header.liquid
   • password-content.liquid
   • password-footer.liquid
2. Bearbeite den Code in diesen Dateien entsprechend deinen Anforderungen. Hier kannst du beispielsweise HTML-Elemente hinzufügen, entfernen oder ändern und spezifische Liquid-Objekte oder -Tags verwenden, die für diese Seitenabschnitte relevant sind.

Schritt 4: Layout-Anpassungen

• Die password.liquid Datei im Templates-Verzeichnis ist in deinem Theme durch das {{ content_for_layout }} Liquid-Tag enthalten, das in der Layoutdatei der Passwort-Seite gefunden wird. Für umfassendere Änderungen, die das Layout betreffen, kannst du im Layout-Verzeichnis auf password.liquid klicken.
• Vergiss nicht, nach jeder Änderung zu speichern und deine Passwortseite im Frontend zu überprüfen, um sicherzustellen, dass alles wie gewünscht funktioniert.
• Es ist immer eine gute Idee, Änderungen zuerst in einem Duplikat deines Themes zu testen, bevor du sie in deinem Live-Theme umsetzt. So vermeidest du mögliche Störungen auf deiner Live-Seite.

Wenn du mit Liquid oder HTML/CSS nicht vertraut bist, könnte es hilfreich sein, einen Shopify-Experten oder Entwickler zu konsultieren, um sicherzustellen, dass die Änderungen korrekt implementiert werden.

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

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

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.

[mastahlb]

Vielen Dank für deine ausführliche Antwort!

Der oben gezeigte Code funktioniert gut. Allerdings ist der Hintergrund nicht vollständig ausgefüllt, sondern nur bis zum Header (siehe Bild). Der Hintergrund soll hinter dem Header liegen und transparent sein, anstatt weiß. 

Wenn ich den Header ausblende, passiert exakt das selbe. Nur das der Header nicht mehr angezeigt wird.