Ankündigungsleiste | Farbe durch Grafik ersetzen

Deutsch Diskussion Shopify Design

Topic summary

Problem gelöst: Ein Shopify-Nutzer suchte nach einer Möglichkeit, die Hintergrundfarbe der Ankündigungsleiste durch eine Grafik/ein Muster zu ersetzen.

Lösung:

  • Im Theme-Editor unter “Abschnitte” den Bereich “Benutzerdefiniertes CSS” aufrufen
  • Bild zunächst im Inhaltsbereich unter “Dateien” hochladen
  • Den automatisch generierten CDN-Link des Bildes kopieren (über das Link-Symbol neben den Bildern)
  • Folgenden CSS-Code einfügen: * > { background: url("replace.jpg") !important; }
  • “replace.jpg” durch den kopierten Bild-Link ersetzen

Wichtiger Hinweis: Das Bild muss vorher hochgeladen werden, damit der korrekte Shopify-CDN-Link im CSS-Befehl verwendet werden kann.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hallo liebe Community,

ich bin neu bei Shopify und fuchse mich gerade ein wenig in die ganze Thematik hinein.

Ich habe ein Standard-Shopify Theme gewählt und stehe for folgendem Problem.

Ich habe eine Ankündigungsleiste und möchte dort die Hintergrundfarbe durch eine Grafik (Muster) ersetzen.

Leider habe ich bis jetzt keine Möglichkeit gefunden.

Vielleicht könnt ihr mir weiterhelfen. Das wäre super nett von euch :hugs:

Grüße

PROBLEM GELÖST!

Wenn ihr auf die Abschnitte klickt, findet ihr im rechten Bereich “Benutzerdefiniertes CSS”.

Dort tragt ihr folgende Zeile ein:

  • { background: url(“replaceme.jpg”) !important; }

Den Text replaceme.jpg ersetzt ihr durch den Link zu eurem Bild.

Um den Link zu erhalten, klickt ihr im Adminbereich auf Inhalt.

Dann seht ihr eure hochgeladenen Bilder.

Rechts neben den Bilder ist ein Link-Symbol. Dort klickt ihr drauf und kopiert automatisch den Link zu dem Bild.

Diesen Link ersetzt ihr nun in der zuvor eingefügten Zeile im CSS.

Ich wünsche allen noch einen angenehmen Tag.

VG

1 Like
2

Toll! Bitte beachtet: Das Bild muss vorher im Inhaltsbereich unter Dateien hochgeladen werden, dann entsteht ein eigener cdn.shopify Link, dieser muss im CSS-Befehl korrekt angegeben werden.