FROM CACHE - de_header

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

Gelöst

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

swissuser2024
Neues Mitglied
5 0 0

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:

Bildschirmfoto 2024-06-13 um 11.39.46.pngBildschirmfoto 2024-06-13 um 11.39.36.png

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!

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
18409 2888 4251

Erfolg.

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.

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

1 ANTWORT 1

Gabe
Shopify Staff
18409 2888 4251

Erfolg.

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.

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog