Zoom für Bilder auf Seiten

Topic summary

Bild-Zoom für Inhaltsseiten mit Größentabelle im Craft-Theme gesucht; bisher keine passende App und CSS-Versuche ohne Erfolg.

Vorschläge:

  • Einfacher CSS-Hover-Zoom in theme.scss (.rte img { transform: scale(1.5); }) mit Animation, zuvor in einer Theme-Kopie testen; themenabhängig.
  • HTML/JS-Zoom über die W3Schools-Anleitung im HTML-Editor der Seite.
  • Bitte um Beispielseite zur gezielten Unterstützung.

Alternative Lösung über das Theme-Feature „Size Chart“:

  • Seite „Grössentabelle“ mit einer Tabelle im Texteditor erstellen (statt Bild).
  • Im Theme-Editor auf der Produktseite den Block „Size Chart“ hinzufügen und die Seite verlinken.
  • Beim Klick öffnet sich ein Modal/Fenster mit der Tabelle; verbessert Lesbarkeit und Barrierefreiheit.

Aktueller Stand:

  • Die Fragestellerin hat die „Size Chart“-Variante vorerst umgesetzt und bedankt sich.

Begriffe:

  • theme.scss: Stylesheet des Themes.
  • .rte: Rich-Text-Editor-Bereich für Seiteninhalte.
  • Modal: Pop-up-Fenster zur Anzeige von Inhalten.

Anhänge:

  • Screenshots wurden geteilt; hilfreich, aber nicht zentral für das Verständnis.

Status: Thema vorläufig gelöst; keine offenen Fragen gemeldet.

Summarized with AI on February 8. AI used: gpt-5.

@Nina2020 Du kannst hier auf einen Zoom verzichten, wenn Du stattdessen das “Size Chart” Feature des Themes verwendest.

Das würde folgendermaßen funktionieren:

  • Unter Vertriebskanal > Onlineshop > Seiten erstellt Du eine Seite mit dem Titel “Grössentabelle”.
  • Auf dieser Seite baust Du mithilfe des Texteditors eine Tabelle, welche die gleiche Information enthält, welche im aktuellen Bild hinterlegt ist.
  • Im Theme-Editor gehst Du dann auf die Produktseite und fügst im Produkt-Abschnitt einen weiteren Block hinzu (Size Chart).
  • Wenn Du dann auf das Element gehst, kannst Du (wahrscheinlich rechts) eine Seite auswählen, welche den Inhalt der Größentabelle enthält.

Wenn Nutzer auf der Seite sind und dann auf Größentabelle klicken, öffnet sich ein Fenster mit den entsprechenden Informationen (Tabelle).

Vielleicht ist das auch eine valide Option für Dich.

2 Likes