Tabelle in Produktseite hinzufügen.

koenigsprime · ‎03-11-2024

Hallo zusammen, ich benötige etwas Unterstützung. Ich habe einen HTML-Code, der jedoch nicht ganz korrekt ist. Ich möchte eine Tabelle auf meiner Produktseite mit Großanlagen hinzufügen.

Bitte schauen Sie sich das Bild an. Nummer 1 im Kreis zeigt, wie ich es haben möchte. Ihr fragt euch vielleicht, warum ich das noch einmal haben möchte, oder warum ich es nicht einfach kopiere. In dieser einklappbaren Reihe kann ich keine Tabelle einfügen.

hier ist der HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.collapsible {
cursor: pointer;
user-select: none;
background-color: #fff;
padding: 10px;
text-align: left;
border: none;
outline: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}

.collapsible::after { content: url('data&colon;image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.354 5.354a.5.5 0 01-.708 0L5 1.707 1.354 5.354a.5.5 0 01-.708-.708l4-4a.5.5 0 01.708 0l4 4a.5.5 0 010 .708z" fill="currentColor"></path></svg>'); position: absolute; right: 10px; width: 10px; height: 6px; transform: translateY(-50%); transition: transform 0.3s; /* Hinzugefügte Transitions-Eigenschaft */ } .collapsible.open::after { transform: translateY(-50%) rotate(180deg); /* Pfeil nach oben zeigen lassen */ } .content { display: none; overflow: hidden; border: 1px solid #ddd; padding: 10px; } </style>

</head>
<body>

<div class="collapsible" onclick="toggleSizes()">
Größenangaben
<div id="arrow-container"></div>
</div>
<div class="content" id="sizesContent">
<p>
<strong>Material:</strong> Nylon
<br>
<strong>Anwendbare Sportarten:</strong> Squat Weightlifting, Fitness, Waist Belt, Sports Waist Support
<br>
<strong>Größen:</strong>
<br>
- Größe M: Taillenlänge 78cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
<br>
- Größe L: Taillenlänge 81cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
<br>
- Größe XL: Taillenlänge 84cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
</p>
</div>

content.style.display = (content.style.display === "block") ? "none" : "block"; collapsible.classList.toggle("open", content.style.display === "block"); }

</script>

</body>
</html>

koenigsprime · ‎07-11-2024

Hallo Lille,

Ich habe eine Tabelle mit HTML eingefügt, was aber leider unschön aussieht. Es gibt 2 Möglichkeiten, die ich kenne:

Möglichkeit 1:
Hier ist ein [YouTube-Video](https://youtu.be/VFAxr_v-8n4?si=EUGZIJCEx-Z1fPqg), wie du ein Bild einfügen kannst.

Möglichkeit 2: App benutzen:
- Clean Size Charts: Size Guide
- Kiwi Size Charts & Recommender

Wenn du weitere Apps brauchst, kannst du mir schreiben.

Lösung in ursprünglichem Beitrag anzeigen

Gabe · ‎03-11-2024

Hey @koenigsprime

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Dein Code scheint auch nicht ganz vollständig zu sein. Wo hast du diesen her wenn ich fragen darf?

Du möchtest also die Tabelle mit Größenangaben im Collapsible Tab einfügen, aber in dieser kannst du keine Tabelle einfügen. Haben die die anderen Threads zum Thema helfen können (siehe einen beispielsweise hier). Die Lösung liegt darin, deinen aktuellen HTML-Code etwas zu ergänzen, sodass eine Tabelle integriert werden kann.

Hier ist ein Beispiel, wie du eine einfache Tabelle in HTML einfügst:

<table>
 <tr>
   <th>Größe</th>
   <th>Taillenlänge</th>
   <th>Dicke</th>
   <th>Webbing-Breite</th>
   <th>Gesamtlänge</th>
 </tr>
 <tr>
   <td>M</td>
   <td>78cm</td>
   <td>17mm</td>
   <td>19mm</td>
   <td>57cm</td>
 </tr>
 <tr>
   <td>L</td>
   <td>81cm</td>
   <td>17mm</td>
   <td>19mm</td>
   <td>57cm</td>
 </tr>
 <tr>
   <td>XL</td>
   <td>84cm</td>
   <td>17mm</td>
   <td>19mm</td>
   <td>57cm</td>
 </tr>
</table>

Diesen Code innerhalb des <div class="content" id="sizesContent">-Tags einfügen, um die Tabelle an der gewünschten Stelle anzuzeigen. Auch die CSS-Stile entsprechend anpassen, damit die Tabelle gut in das Design deiner Seite passt, wie folgendes Beispiel:

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

Füge diese Styles in dein <style>-Tag ein, um die Tabelle zu stylen. Du kannst die Farben und Maße natürlich anpassen, um sie an dein Design anzupassen. Falls dir die oben verlinkten Ressourcen nicht weiterhelfen können, sende bitte eine Beschreibung genau wie und wo die Ressourcen dir nicht weiterhelfen können, an welchem genauen Schritt, danke!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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

koenigsprime · ‎03-11-2024

Danke für die Antwort.

Ich habe mir (siehe einen beispielsweise hier) link angeschaut, aber hilft nicht weiter.

Ich habe den Code ein bisschen bearbeitet. Jetzt gerade schaut es so aus. Wäre es möglich, dass Sie den Code einfach Korrigieren?

Hier ist der Aktueller HTML_Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.collapsible {
cursor: pointer;
user-select: none;
background-color: #fff;
padding: 10px;
text-align: left;
border: none;
outline: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}

.collapsible::after {
content: url('data&colon;image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.354 5.354a.5.5 0 01-.708 0L5 1.707 1.354 5.354a.5.5 0 01-.708-.708l4-4a.5.5 0 01.708 0l4 4a.5.5 0 010 .708z" fill="currentColor"></path></svg>');
position: absolute;
right: 10px;
width: 10px;
height: 6px;
transform: translateY(-50%);
transition: transform 0.3s;
}

.collapsible.open::after {
transform: translateY(-50%) rotate(180deg);
}

.content {
display: none;
overflow: hidden;
border: 1px solid #ddd;
padding: 10px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>

<div class="collapsible" onclick="toggleSizes()">
Größenangaben
<div id="arrow-container"></div>
</div>
<div class="content" id="sizesContent">
<table>
<tr>
<th>Größe</th>
<th>Taillenlänge</th>
<th>Dicke</th>
<th>Webbing-Breite</th>
<th>Gesamtlänge</th>
</tr>
<tr>
<td>M</td>
<td>78cm</td>
<td>17mm</td>
<td>19mm</td>
<td>57cm</td>
</tr>
<tr>
<td>L</td>
<td>81cm</td>
<td>17mm</td>
<td>19mm</td>
<td>57cm</td>
</tr>
<tr>
<td>XL</td>
<td>84cm</td>
<td>17mm</td>
<td>19mm</td>
<td>57cm</td>
</tr>
</table>
</div>

</body>
</html>

Gabe · ‎03-11-2024

Hey @koenigsprime

Schritt-für-Schritt, das schaffen wir...Baby-steps... Aber du hast mir immer noch nicht einen Link zu einem deiner Beispiele gegeben, dass mir helfen kann, das besser zu analysieren!

Dein HTML-Code sieht grundsätzlich ok aus, da du einen einklappbaren Abschnitt erstellt hast, der eine Tabelle mit Größenangaben enthält. Wenn du auf die Überschrift "Größenangaben" klickst, sollte sich die Tabelle ein- und ausklappen lassen.

Probiere mal folgendes: entferne das überflüssige <div>-Element id="arrow-container" sofern es nicht benötigt wird:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ... Deine vorhandenen Styles ... */
</style>
</head>
<body>

<div class="collapsible" onclick="toggleSizes()">Größenangaben</div>
<div class="content" id="sizesContent">
  <!-- Deine Tabelle -->
</div>

<script>
function toggleSizes() {
  var content = document.getElementById("sizesContent");
  var collapsible = document.querySelector(".collapsible");

  // Schalte die Inhaltsanzeige und die Klasse von collapsible um
  var isContentDisplayed = content.style.display === "block";
  content.style.display = isContentDisplayed ? "none" : "block";
  collapsible.classList.toggle("open", !isContentDisplayed);
}
</script>

</body>
</html>

Stelle sicher, dass dieses Skript nach dem HTML-Code für deine Tabelle platziert ist, damit es korrekt ausgeführt werden kann, wenn die Seite geladen wird.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

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

koenigsprime · ‎03-11-2024

koenigsprime · ‎03-11-2024

Aber du hast mir immer noch nicht einen Link zu einem deiner Beispiele gegeben, dass mir helfen kann, das besser zu analysieren!

Kann ich dir Privat schicken, ich bin mit meinem Shop noch nicht fertig?

Gabe · ‎03-11-2024

@koenigsprime

Ok dafür gäbe es einen befristeten Vorschaulink um das schneller zu analysieren. Dieser läuft nach 2 Tagen ab.

VG,

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

koenigsprime · ‎03-11-2024

Ich habe eine andere Möglichkeit gefunden, eine Tabelle hinzuzufügen, ohne eine App oder Codierung zu verwenden. Ich bedanke mich bei Ihnen für Ihre Unterstützung.

Ninawilde · ‎10-15-2024

Hi Koenigsprime,

ich wäre sehr interessiert, wie du das ohne Code und App hinbekommen hast??? Ich stehe vor dem selben Problem.

Danke und viele Grüße,
Alex

koenigsprime · ‎03-13-2024

Wer daran interessiert ist, wie ich es gemacht habe, kann gerne hier eine Nachricht hinterlassen. Ich werde dann die Lösung hochladen.

Lille · ‎07-10-2024

🙋🏻‍♀️ Ich wäre daran interessiert. Ich versuche die ganze Zeit eine Tabelle in das Rich Text Element einzufügen - was aber mit dem obigen html-Code auch funktionieren sollte.

Aber gibt es auch eine Möglichkeit im Custom CSS eine Tabelle einzufügen und die Inhalte der Tabelle mit dynamischen Inhalten aus Shopify zu befüllen ?? Wer eine App kennt, die das kann, auch willkommen. Danke!

koenigsprime · ‎07-11-2024

Hallo Lille,

Ich habe eine Tabelle mit HTML eingefügt, was aber leider unschön aussieht. Es gibt 2 Möglichkeiten, die ich kenne:

Möglichkeit 1:
Hier ist ein [YouTube-Video](https://youtu.be/VFAxr_v-8n4?si=EUGZIJCEx-Z1fPqg), wie du ein Bild einfügen kannst.

Möglichkeit 2: App benutzen:
- Clean Size Charts: Size Guide
- Kiwi Size Charts & Recommender

Wenn du weitere Apps brauchst, kannst du mir schreiben.

Hela-Werbung · ‎08-16-2024

Hallo, wie hast du die Tabelle eingebunden? Leider wird bei mir immer der Code ausgeben samt Klammern etc.

koenigsprime · ‎08-17-2024

Hi,

schreibe mir auf Instagram, dann erkläre es dir alles genauer.
https://www.instagram.com/koenigsprime/

Tabelle in Produktseite hinzufügen.

Tabelle in Produktseite hinzufügen.

Community Blog Artikel