Produktbeschreibung in ausklappbarem Feld

[memeshop12]

Hallo miteinander,

ich habe ein Problem bei welchem mir der Shopify Support leider nicht helfen kann also dachte ich ich wende mich an die Menschen hier!

Ich möchte die Produktbeschreibung auf meiner Produktseite in einem ausklappbaren Feld "rendern lassen".

Dass quasi zu jedem Produkt die richtige Beschreibung in dem ausklappbaren Feld ersichtlich ist. Jedoch gibt es nur die Möglichkeit dies zu tun mit Metafeldern. Das Problem daran ist, dass ich für jedes meiner über 500 Produkte die Beschreibung in dieses Metafeld erstmal kopieren müsste.

Gibt es irgendeine Lösung die Produktbeschreibung ohne Metafelder in dieses ausklappbare Feld zu bekommen?

Vielen Lieben Dank im Voraus für Lösungsvorschläge!!

[Gabe]

Hey @memeshop12 

Du hast dein Theme nicht erwähnt oder uns zu einem Beispiel verlinkt, und versch. Themes sind mehr oder minder begrenzt in dieser Sache. Aber lass mich hier ein paar generelle Tipps abgeben.

Wenn du es selber DIY auf deiner Produktseite 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!

Um die Produktbeschreibung in einem ausklappbaren Feld auf der Produktseite anzuzeigen, ohne Metafelder für jedes Produkt manuell ausfüllen zu müssen, kann man das bestehende Produktbeschreibungselement in ein ausklappbares Feld einbetten. 

Finde die Datei, die die Produktbeschreibung rendert. Diese Datei befindet sich normalerweise im Ordner Sections und könnte product-template.liquid oder ähnlich in deinem Theme heißen. Suche den Abschnitt in der Datei, der die Produktbeschreibung anzeigt. Es könnte etwa so aussehen:

{{ product.description }}

Ersetze diesen Code durch den folgenden Codeblock, um ein ausklappbares Feld zu erstellen:

<div class="collapsible-container">
  <button class="collapsible">Produktbeschreibung</button>
  <div class="content">
    {{ product.description }}
  </div>
</div>

<style>
.collapsible {
  background-color: #f9f9f9;
  color: #333;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
}

.active, .collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
});
</script>

Erklärung:

• Der HTML-Code erstellt eine Schaltfläche und einen Container für die Produktbeschreibung.
• Das CSS formatiert die Schaltfläche und den Container.
• Das JavaScript sorgt dafür, dass das Feld ein- und ausgeklappt wird, wenn die Schaltfläche geklickt wird.

Für detaillierte Tutorials und weitere Informationen kannst du auch die Shopify Community und andere Ressourcenseiten konsultieren​ (Shopify Community)​​ (Shopify Community)​​ (Ed Codes)​​.

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.