Textausrichtung Ankündigungsleiste

[Malte_087]

Hallo,

ich habe auf meiner Shopify Seite ganz oben eine Ankündigungsleiste mit Text. Hier würde ich gerne einen Teil des Textes linksbündig, einen anderen mittig und einen anderen teil rechtsbündig ausrichten.

Weiß jemand wie ich das im Code umsetzte oder gibt es hierfür eine einfachere Lösung?

Vielen Dank und Grüße

Malte

[Muthwerk-Agentur]

Hallo @Malte_087,

doch — es gibt eine vereinfachte Variante, wenn du den Text manuell mit kleinen HTML-Tags in einer einzigen Ankündigungsleiste trennst. (wenn ich es richtig verstanden habe). Du brauchst dazu nur dieses minimale CSS:

.announcement-bar {
  display: flex;
  justify-content: space-between;
}

Und dann fügst du in der Texteingabe der Ankündigungsleiste (im Theme-Editor) z. B. ein:

<span>📦 Versand ab 50 €</span>
<span>🔥 Herbstsale läuft!</span>
<span>☎ 0228 – 123456</span>

Das sorgt automatisch dafür, dass der erste Text links, der zweite mittig und der dritte rechts sitzt.

Wenn du magst, kannst du zusätzlich text-align:center nutzen, aber justify-content: space-between verteilt sie schon perfekt über die gesamte Leiste.

Viele Grüße
Rafael von Muthwerk
E-Commerce Solutions & Shopify Optimization

[Malte_087]

Hallo @Muthwerk-Agentur ,

danke dir erstmal für die unfassbar schnelle antwort .

Ich hab es jetzt so gemacht wie von dir beschrieben:

Das Ergebnis sieht man in der grünen Leiste.

Kannst du mir sagen, wo mein Fehler liegt?

Danke im Voraus und viele Grüße

Malte

[Muthwerk-Agentur]

Hallo @Malte_087,

super, dass du’s direkt umgesetzt hast – und danke fürs Feedback

Der kleine Fehler liegt daran, wo du das CSS eingefügt hast. Du hast es vermutlich im Block „Benutzerdefiniertes CSS nur zu diesem Abschnitt“ eingetragen – das greift aber oft nicht direkt auf die .announcement-bar-Klasse, weil Shopify diesen Bereich intern in einen Container packt.

Einfachste Lösung:

Passe die Klasse im CSS etwas gezielter an, damit sie garantiert greift:

.announcement-bar__message {

display: flex;

justify-content: space-between;

}

Damit steuerst du den eigentlichen Text-Container und nicht das äußere Element.

Falls es trotzdem noch nicht greift, setze ein !important dahinter:

.announcement-bar__message {

display: flex !important;

justify-content: space-between !important;

}

Das sorgt dafür, dass Shopify’s Standard-Styles überschrieben werden und deine drei -Elemente korrekt links, mittig und rechts verteilt werden.

Ansonsten müsste ich mal rein schauen.

Viele Grüße

Rafael von Muthwerk

E-Commerce Solutions & Shopify Opt

[Malte_087]

Hallo @Muthwerk-Agentur ,

vielen Dank nochmal.

Ich verzweifel leider immer noch an der ausrichtung

Ich habe jetzt folgendes gemacht:

Leider ist die Ausrichtung nach wie for nicht gewünscht. Ich habe mal geschaut wie es ohne den neuen Code aussieht und hier gibt es keine Veränderung wie mit dem Code.

Macht es Sinn, denn Code direkt im Editor einzufügen?

Vielen Dank im Voraus und viele Grüße

Malte

[Muthwerk-Agentur]

@Malte_087

Man kann Code im Editor als auch im theme code hinterlegen, allerdings wäre es wahrscheinlich besser wenn man das ein mal “sauber” macht.

[Malte_087]

Ich habe jetzt folgendes gemacht:

Ich habe im Editor in der Datei base.css ganz unten den Code ab Zeile 4268 eingefügt.

Leider wird der Text nach wie vor mittig angezeigt. Was stimmt denn jetzt immer noch nicht?

Viele Grüße

Malte

[AndyX]

Hi @Malte_087,

To align different parts of your announcement bar text to the left, centre and right, you can wrap each segment in a separate <span> and use Flexbox. Here’s how:

• In your theme editor, edit the announcement bar’s text and insert each piece of text inside its own <span> tag.

• Then add a small CSS snippet to your theme’s custom CSS (for example in base.css or via the theme’s custom CSS field) to make the announcement bar a flex container and space the spans evenly:

  .announcement-bar {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
  }  
  .announcement-bar span {  
    flex: 1;  
    text-align: center;  
  }  
  .announcement-bar span:first-child {  
    text-align: left;  
  }  
  .announcement-bar span:last-child {  
    text-align: right;  
  }  
  

  This CSS turns the bar into a flexbox and aligns the first span left, the middle span centre and the last span right. You can adjust the flex values if you want the segments to take up more or less space.

• If your theme doesn’t allow HTML tags in the announcement text, you can modify the announcement-bar.liquid template to output three separate content blocks and assign classes for alignment.

This approach avoids creating multiple announcement bars and works on both desktop and mobile. I hope that helps!

[Nordalux]

Das reicht nicht aus. Wie gesagt - da du hier einen Rich Text Editor hast, wird das anders dargestellt. Normalerweise muss das auch mit ausgegeben werden; außer Shopify hat das mal gefixxt. Nichtsdestotrotz muss tiefer in die Ebene rein. Mal eben nur mit CSS ist es nicht getan.

[Muthwerk-Agentur]

@Malte_087 yes da muss ich dem “Kollegen” zustimmen. Allerdings nicht immer…

Es ist aber meist halt auch einfach doof sowas über “drei Ecken” zu machen.

Ggf kann man auch einfach eine neue Sectio. Für dich anlegen…

[Finer]

@Malte_087 hast ggf. du einen Link zu dem Shop, bei dem man sich die Ankündigungsleiste anschauen kann?

[websensepro]

Hello @Malte_087

das ist eine klassische Anforderung, die mit den Standardeinstellungen der Shopify-Ankündigungsleiste leider nicht direkt umsetzbar ist. Die Leiste ist in der Regel dafür ausgelegt, den gesamten Text einheitlich auszurichten (meist zentriert).

Du hast jedoch zwei gute Möglichkeiten, dein Ziel zu erreichen: eine technische Lösung über eine Code-Anpassung und eine einfachere über Apps.

1. Lösung über Code-Anpassung (CSS Flexbox)

Diese Methode ist kostenlos und sehr effizient, erfordert aber einen kleinen Eingriff in den Code deines Themes. Keine Sorge, es ist unkomplizierter, als es klingt.

Konzept: Wir teilen die Ankündigungsleiste in drei unsichtbare Bereiche (links, mitte, rechts) auf und platzieren deinen Text in diese Bereiche. Das erreichen wir mit einer modernen CSS-Technik namens Flexbox.

Schritt-für-Schritt-Anleitung:

1. Code-Editor öffnen:

   • Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

   • Klicke bei deinem aktuellen Theme auf die drei Punkte (…) und wähle Code bearbeiten.

2. Ankündigungsleiste finden:

   • Suche in der linken Dateiliste nach einer Datei, die für die Ankündigungsleiste zuständig ist. Oft heißt sie announcement-bar.liquid, header.liquid oder ähnlich. Sie befindet sich meist im Ordner sections.

   • Tipp: Wenn du die Datei nicht findest, öffne die theme.liquid im Ordner Layout und suche nach {% section ‘announcement-bar’ %} (oder einem ähnlichen Namen), um den korrekten Dateinamen zu finden.

3. HTML-Struktur anpassen:

   • Innerhalb der gefundenen Datei suchst du nach dem Code, der den Text der Leiste anzeigt. Das ist oft eine Variable wie {{ section.settings.text }} oder {{ block.settings.text }}.

   • Ersetze diesen einzelnen Text-Platzhalter durch eine neue HTML-Struktur. Anstatt also einen Text in den Theme-Einstellungen einzugeben, schreibst du deinen Text direkt hier in den Code:

   code Html

   downloadcontent_copy

   expand_less

       <div class="announcement-bar__container">
     <span class="announcement-bar__left">Dein linker Text</span>
     <span class="announcement-bar__center">Dein mittiger Text</span>
     <span class="announcement-bar__right">Dein rechter Text</span>
   </div> 
   

   Du musst den alten Code für den Text entfernen und diesen neuen div-Container an seiner Stelle einfügen.

4. CSS-Code hinzufügen:

   • Suche in der linken Dateiliste nach deiner CSS-Datei. Sie heißt oft base.css, theme.css oder styles.scss.liquid und befindet sich im Ordner Assets.

   • Scrolle ganz nach unten und füge folgenden CSS-Code ein:

   code CSS

   downloadcontent_copy

   expand_less

       .announcement-bar__container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     padding: 0 15px; 
   }
   
   .announcement-bar__left {
     flex: 1;
     text-align: left;
   }
   
   .announcement-bar__center {
     flex: 1;
     text-align: center;
   }
   
   .announcement-bar__right {
     flex: 1;
     text-align: right;
   }
   

5. Speichern: Klicke oben rechts auf Speichern. Schaue dir das Ergebnis in der Vorschau an.

Vorteil: Sauber, schnell und ohne zusätzliche Kosten oder App-Ladezeiten.
Nachteil: Der Text muss zukünftig direkt im Code geändert werden, nicht mehr bequem über den Theme-Customizer.

2. Einfachere Lösung über Shopify Apps

Wenn du dich mit Code-Anpassungen unwohl fühlst oder den Text oft und einfach ändern möchtest, ist eine App die beste Wahl. Diese Apps bieten in der Regel einen Drag-and-Drop-Editor oder erweiterte Einstellungsoptionen.

So gehst du vor:

1. Gehe zum Shopify App Store.

2. Suche nach “Announcement Bar”, “Promotion Bar” oder “Free Shipping Bar”.

3. Installiere eine App mit guten Bewertungen, die erweiterte Anpassungen verspricht.

Empfehlenswerte Apps für diesen Zweck sind oft:

• Avada: Sales Pop Up, Banner: Eine All-in-One-Lösung, die auch sehr flexible Ankündigungsleisten erstellen kann.

• A-bar ‑ A+ Announcement Bars: Spezialisiert auf Ankündigungsleisten und bietet oft mehr Gestaltungsspielraum als die Standardfunktion.

• Quick Announcement Bar: Ein Klassiker, der für seine einfache Bedienung und vielfältigen Targeting-Optionen bekannt ist.

Vorteil: Sehr einfach zu bedienen, keine Code-Kenntnisse nötig, Texte sind leicht änderbar, oft zusätzliche Funktionen wie Timer oder Targeting.
Nachteil: Kann monatliche Kosten verursachen und fügt dem Shop zusätzlichen Code hinzu, was die Ladezeit minimal beeinflussen kann.

Ich hoffe, das hilft dir weiter!

Viele Grüße!

[Muthwerk-Agentur]

Ich glaub der Arme Malte hat Jetzt so viele Rückmeldungen auf seine Frage, mit unterschiedlichen Codes, da kann man nur eines Sagen:

Entweder du lasst die Idee, oder das schaut sich irgendwer an. So aus der Ferne und dann 10 verschiedene Empfehlungen machen meist wenig Sinn.