Absätze für Text und Header im Image Banner setzen

[rk_kosmetik]

Hi,

ich nutze das Dawn Theme und würde gerne in meinen Rich Text Feldern (sowohl Heading, als auch Text) die Möglichkeit haben Absätze hinzuzufügen. Gibt es dafür ein Code Snippet, welches ich hinzufügen kann? Ich bin auf mehreren Seiten darauf angewiesen und überrascht, dass es von default aus nicht geht.

Bisherige Lösungsansatze waren (in Kurzform):

• hinzufügen von new_line =
  im liquid
• replace \n mit
  im liquid
• Aktueller Versuch ist es das meta Feldt “mehrzeiliger Text” dort einzubinden. Der Image Banner ist auf allen Seiten inkl. Startseite vorhanden.

So schaut ein Teil des image-banner.liquid gerade aus:

  

    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when 'heading' -%}
          ## 
            {{ block.settings.heading }}
          
          {%- if block.settings.custom_multiline_text -%}
            
              {{ block.settings.custom_multiline_text | newline_to_br }}
            

          {%- endif -%}
        {%- when 'text' -%}
          
            {{ block.settings.text }}
          

        {%- when 'buttons' -%}
          
            {%- if block.settings.button_label_1 != blank -%}
              
                {{- block.settings.button_label_1 | escape -}}
              
            {%- endif -%}
            {%- if block.settings.button_label_2 != blank -%}
              
                {{- block.settings.button_label_2 | escape -}}
              
            {%- endif -%}
          

      {%- endcase -%}
    {%- endfor -%}
  

Vielen Danke für Eure Hilfe

[Gabe]

Hey @rk_kosmetik

Danke ffürden Code und ggf. kannst du die newline_to_br-Filter und rte-Klasse verwenden, um Zeilenumbrüche und andere Formatierungen zu erreichen (ggf. ist es aber ein Limit des Dawn Themes). Hier ist eine angepasste Version deines image-banner.liquid:

Show More

{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}## {{ block.settings.heading | newline_to_br }}{%- when 'text' -%}{{ block.settings.text | newline_to_br }}
{%- when 'buttons' -%}{%- if block.settings.button_label_1 != blank -%} {{- block.settings.button_label_1 | escape -}} {%- endif -%} {%- if block.settings.button_label_2 != blank -%} {{- block.settings.button_label_2 | escape -}} {%- endif -%}
{%- endcase -%} {%- endfor -%}

Stelle sicher, dass du das Meta-Feld für mehrzeiligen Text korrekt eingebunden hast und es mit newline_to_br-Filter in deinem Template renderst:

{%- when 'heading' -%}
  ## 
    {{ block.settings.heading | newline_to_br }}
  
  {%- if block.settings.custom_multiline_text -%}
    
      {{ block.settings.custom_multiline_text | newline_to_br }}
    

  {%- endif -%}

Hoffe das hilft dir weiter - lass wissen falls nicht!

---

Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas 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.

[rk_kosmetik]

Hallo Gabe,

danke für deine Antwort. Hab mittlerweile rausgefunden, dass die Textfelder im Image Banner leider keine dynamische Quelle unterstützen, d.h. die Meta Fields könne nicht eingebunden werden.

Hast du vielleicht noch eine andere Idee, wie man im Image-Banner multi line break “aktivieren” kann?

Danke!

[Gabe]

Hey @rk_kosmetik

Vielleicht interessiert dich dieser Thread zum Thema Metafields als dynamische Quellen.

Um im Dawn-Theme von Shopify in den Rich-Text-Feldern (sowohl Überschrift als auch Text) Absätze hinzuzufügen, kannst du den newline_to_br Filter verwenden. Falls die Textfelder im Image Banner keine dynamische Quelle unterstützen, kannst du trotzdem das folgende Vorgehen ausprobieren:

Anpassung des image-banner.liquid Templates

Hier ist ein aktualisiertes Code-Snippet, das sicherstellt, dass Zeilenumbrüche und Absätze im Rich-Text-Feld korrekt angezeigt werden:

Show More

{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}## {{ block.settings.heading | newline_to_br }}{%- when 'text' -%}{{ block.settings.text | newline_to_br }}
{%- when 'buttons' -%}{%- if block.settings.button_label_1 != blank -%} {{- block.settings.button_label_1 | escape -}} {%- endif -%} {%- if block.settings.button_label_2 != blank -%} {{- block.settings.button_label_2 | escape -}} {%- endif -%}
{%- endcase -%} {%- endfor -%}

Sicherstellen der Unterstützung für newline_to_br

Shopify’s newline_to_br Filter konvertiert neue Zeilen (\n) in <br>-Tags. Dies ermöglicht das Hinzufügen von Zeilenumbrüchen in den Textfeldern.

Schritte zur Überprüfung und Implementierung1. Liquid Filter hinzufügen: Vergewissere dich, dass du den newline_to_br Filter in deinem Template verwendest, wie im obigen Code-Snippet gezeigt.

1. Mehrzeiligen Text eingeben: Wenn du den Text im Admin-Bereich eingibst, füge neue Zeilen ein, indem du die Eingabetaste drückst. Dies sollte dann in <br>-Tags im HTML konvertiert werden und die Zeilenumbrüche sollten korrekt dargestellt werden.
2. RTE Klasse verwenden: Die Verwendung der rte Klasse (Rich Text Editor) sorgt dafür, dass HTML-Inhalt korrekt gerendert wird.

Zusätzlicher Ansatz mit Metafeldern

Falls du Metafelder für mehrzeiligen Text verwenden möchtest, und diese nicht direkt als dynamische Quelle in den Standard-Textfeldern des Image Banners verfügbar sind, kannst du dies mit einem benutzerdefinierten Liquid Code einbinden.

Hier ist ein Beispiel:

1. Mehrzeiliges Text-Metafeld erstellen:

   • Gehe zu Einstellungen > Metafelder.
   • Erstelle ein neues Metafeld für Produkte, z.B. custom.multiline_text.

2. Liquid Code anpassen:

{%- if block.settings.custom_multiline_text != blank -%}
  
    {{ block.settings.custom_multiline_text | newline_to_br }}
  

{%- endif -%}

Hoffe das hilft dir weiter - lass wissen falls nicht!

[OnrealShop]

Hi

Ich weiß der Beitrag ist alt, aber vllt könnt ihr mir trotzdem helfen.
Ich versuche auch gerade Zeilenumbrüche im Text des Bildbanners einzufügen, aber komme nicht weiter.
Enter / Shift+Enter / Alt+Enter.. alles versucht.
Der Texteditor zeigt nur Fett, Kursiv und Link an.
Leider habe ich keine tiefergehenden Programmierkenntnisse und weiß nicht, wie ich das lösen soll