Tabelle in Produktseite hinzufügen.

[koenigsprime]

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:

.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:image/svg+xml;utf8,’); 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; }

Größenangaben

Material: Nylon
Anwendbare Sportarten: Squat Weightlifting, Fitness, Waist Belt, Sports Waist Support
Größen:
- Größe M: Taillenlänge 78cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
- Größe L: Taillenlänge 81cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
- Größe XL: Taillenlänge 84cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm

[Gabe]

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:

| Größe | Taillenlänge | Dicke | Webbing-Breite | Gesamtlänge |
| - | - | - | - | - |
| M | 78cm | 17mm | 19mm | 57cm |
| L | 81cm | 17mm | 19mm | 57cm |
| XL | 84cm | 17mm | 19mm | 57cm |

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.

[koenigsprime]

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:

.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:image/svg+xml;utf8,’);
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;
}

Größenangaben

Größe	Taillenlänge	Dicke	Webbing-Breite	Gesamtlänge
M	78cm	17mm	19mm	57cm
L	81cm	17mm	19mm	57cm
XL	84cm	17mm	19mm	57cm

[Gabe]

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:

Größenangaben

  

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!

[koenigsprime]

[koenigsprime]

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]

@koenigsprime

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

VG,

[koenigsprime]

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.

[koenigsprime]

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

[Lille]

??‍ 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]

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]

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

[koenigsprime]

Hi,

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

[Ninawilde]

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