Line break <br> in product title is not interpreted correctly. Theme used: Refresh

[swissuser2024]

We are currently using the Shopify theme Refresh. For example, a product title looks like this in our store:

ABS Alurampen Länge 1500 mm Breite: 155 mm Tragkraft: 380 kg

Now this doesn't look ideal in the frontend:

We would like the title to be structured as follows:

ABS Alurampen

Länge 1500 mm

Breite: 155 mm

Tragkraft: 380 kg

Unfortunately, we didn't manage it with the <br> command. What do we have to do to get this right?

Many thanks for your support!

[Gabe · Accepted solution]

Hey @swissuser2024 

Du hast hier die deutsche Community erreicht also  können wir das gerne auf Deutsch besprechen! 

Im Grunde sind die Produkttitel unseres Free Refresh Themes in diesem Feld auf der Kollektion Page nicht HTML-fähig (wie z. B. mit der Verwendung der HTML Break Tags).

Wenn du es selber auf deiner Kollektionsseite im Produktraster oder in einem Featured Collections Raster programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Ich habe das aber jetzt in meinem Dawn Theme getestet und um den Produkttitel so zu formatieren, muss man den HTML-Code anpassen, damit die Zeilenumbrüche korrekt interpretiert werden. Dafür müssen wir den Titeltext in mehrere Zeilen aufteilen und <br>-Tags verwenden.

Finde den Abschnitt des Codes, der den Produkttitel anzeigt und probieren einen Liquid Code wie den folgenden:

<div class="card__information">
   <h3 class="card__heading h5" id="title-template--22571138023773__product-grid-6775653498977">
      <a href="/products/10pcs-1-new-1996-years-diy-pokemon-flash-cards-charizard-blastoise-venusaur-ninetales-mewtwo-zapdos-game-collection-cards" id="CardLink-template--22571138023773__product-grid-6775653498977" class="full-unstyled-link" aria-labelledby="CardLink-template--22571138023773__product-grid-6775653498977 Badge-template--22571138023773__product-grid-6775653498977">
         ABS Alurampen<br>Länge 1500 mm<br>Breite: 155 mm<br>Tragkraft: 380 kg
      </a>
   </h3>
   <div class="card-information"><span class="caption-large light"></span>
   <div class="price price--sold-out">
      <div class="price__container">
         <div class="price__regular"><span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
            <span class="price-item price-item--regular">Von €3,64 EUR</span>
         </div>
         <div class="price__sale">
            <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
            <span><s class="price-item price-item--regular">€3,64 EUR</s></span>
            <span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
            <span class="price-item price-item--sale price-item--last">Von €3,64 EUR</span>
         </div>
         <small class="unit-price caption hidden">
            <span class="visually-hidden">Stückpreis</span>
            <span class="price-item price-item--last">
            <span></span>
            <span aria-hidden="true">/</span>
            <span class="visually-hidden">&nbsp;pro&nbsp;</span>
            <span></span>
            </span>
         </small>
      </div>
   </div>
</div>
</div>

• Der <a>-Tag, der den Produkttitel enthält, wurde geändert, um <br>-Tags nach jedem Abschnitt des Titels einzufügen.
• Dies teilt den Text in separate Zeilen auf und verbessert die Lesbarkeit.

Gerne kann ich bei weitere Problem und Fragen, eins unserer Premium Themes empfehlen die das auch out-of-the-box können, oder eben einen unserer zertifizierten Shopify Partner und Programmierer.

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.