Tutorials

Shopify Tutorial: Hintergrundbild mit eigenem CSS hinzufügen [Easy Guide]

Melden

Hier ist ein detailliertes Tutorial, wie du ein Hintergrundbild in deinen Shopify-Store einfügst, ohne eine App installieren zu müssen.

Ein individuelles Hintergrundbild kann das Design deines Shops massiv aufwerten. In dieser Anleitung lernst du, wie du dies mithilfe von Custom CSS für deinen gesamten Shop oder bestimmte Bereiche umsetzt.

Schritt 1: Das Bild in Shopify hochladen

Bevor wir den Code schreiben können, muss das Bild auf den Shopify-Servern gespeichert sein.

  1. Gehe in deinem Shopify-Adminbereich zu Content > Dateien (oder Dateien unter Einstellungen).
  2. Klicke auf Dateien hochladen und wähle dein gewünschtes Hintergrundbild aus.
  3. Sobald das Bild hochgeladen ist, klicke auf das Link-Symbol (Kette), um die URL zu kopieren. Speichere diesen Link kurz in einem Textdokument zwischen.

Schritt 2: Den Code-Editor öffnen

Um CSS hinzuzufügen, müssen wir direkt in die Theme-Dateien eingreifen.

  1. Navigiere zu Online-Shop > Themes.
  2. Klicke bei deinem aktuellen Theme auf die drei Punkte (...) und wähle Code bearbeiten.
  3. Suche im linken Menü nach dem Ordner Assets.
  4. Suche nach einer Datei namens base.css (bei Dawn und anderen modernen Themes) oder theme.css / timber.scss.liquid (bei älteren Themes).

Schritt 3: Den CSS-Code einfügen

Scrolle in der CSS-Datei ganz nach unten und füge den folgenden Code ein:

/* Hintergrundbild für den gesamten Store */
body {
    background-image: url('DEIN_BILD_LINK_HIER');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

/* Optional: Transparenz für Inhaltsbereiche, damit das Bild sichtbar wird */
.gradient {
    background: transparent !important;
}

Wichtig: Ersetze DEIN_BILD_LINK_HIER mit der URL, die du in Schritt 1 kopiert hast. Die Anführungszeichen müssen bleiben.

Schritt 4: Erklärung der CSS-Befehle

Damit das Bild perfekt aussieht, kannst du diese Parameter anpassen:

  • background-size: cover; – Sorgt dafür, dass das Bild den gesamten Bildschirm ausfüllt, ohne verzerrt zu werden.
  • background-attachment: fixed; – Das Bild bleibt beim Scrollen stehen (Parallax-Effekt). Wenn es mitscrollen soll, ändere es in scroll.
  • background-position: center; – Zentriert das Bild.

Bonus: Hintergrundbild nur auf einer bestimmten Seite

Falls du das Bild nur auf der Startseite möchtest, nutze diesen Code:

.template-index {
    background-image: url('DEIN_BILD_LINK_HIER');
    background-size: cover;
    background-attachment: fixed;
}

Schritt 5: Speichern und Testen

  1. Klicke oben rechts auf Speichern.
  2. Öffne deinen Shop in einem neuen Tab oder aktualisiere die Seite.
  3. Tipp: Wenn du keine Änderung siehst, leere deinen Browser-Cache oder öffne die Seite in einem Inkognito-Fenster.

Best Practices für Hintergrundbilder

  • Dateigröße: Achte darauf, dass das Bild nicht größer als 500 KB bis 1 MB ist, um die Ladezeit nicht zu beeinträchtigen (nutze Tools wie TinyJPG).
  • Kontrast: Stelle sicher, dass dein Text über dem Hintergrundbild noch lesbar ist. Falls nicht, füge eine leichte dunkle Überlagerung hinzu.
  • Responsivität: Überprüfe das Ergebnis unbedingt auf dem Smartphone. Manchmal sieht ein Bild auf dem Desktop gut aus, verdeckt aber auf dem Handy wichtige Schaltflächen.

Fertig! Dein Shopify Store hat nun ein individuelles Hintergrunddesign.

0