Spezielle Funktionen der Shop-Seite

Verbessere das Einkaufserlebnis, indem du Funktionen wie Produkt-Schnellansicht, Bild-Zoom, Mouseover-Effekte und Wartelisten aktivierst.

Zuletzt aktualisiert: 3. Januar 2025

Jede Squarespace-Website unterstützt Shop-Seiten, auf denen du Produkte anzeigen und verkaufen kannst. Einige Websites verfügen über zusätzliche Funktionen wie Schnellansicht, Bild-Zoom und Mouseover-Effekte, die angezeigt werden, wenn Käufer den Mauszeiger über Produktbilder bewegen. Diese Anleitung erläutert diese Funktionen und erklärt, wo sie verfügbar sind.

Tipp

Registriere dich für unser Webinar „Design tips to increase your store’s sales“ („Design-Tipps zur Umsatzsteigerung in deinem Shop“; auf Englisch), in dem wir Tools und Tipps präsentieren, mit denen du deine Produkte auf deiner Website hervorheben und den Umsatz steigern kannst.

Funktionen nach Version

Welche Funktionen verfügbar sind, hängt davon ab, auf welcher Version von Squarespace deine Website läuft.

Für Version 7.0 sind diese Optionen in den Template-Gruppen Brine, Farro, Galapagos, Skye, Tremont und York verfügbar. Informationen zu allen Templates findest du unter Arten von Shop-Seiten.

In Version 7.1 sind Schnellansicht, Bildzoom- und Mouseover-Effekte auf Produktdetail-Seiten mit dem Layout Einfach verfügbar.

  Version 7.1
Version 7.0
Schnellansicht
  • Produkt-Blöcke
  • Übersichts-Blöcke
  • Shop-Seite
  • Produkt-Blöcke
  • Shop-Seite
  • Übersichts-Blöcke
Bild-Zoom
  • Produktdetailseiten
  • Schnellansicht Lightboxes
  • Produktdetailseiten
  • Schnellansicht Lightboxes
Mouseover-Effekte
  • Alternatives Bild auf Shop-Seiten
Wartelisten
  • Ja 
  • Ja (nicht verfügbar in Galapagos)

Bild-Zoom

Mit der Zoomansicht können Kunden Produktbilder vergrößern, um Material, Textur und feinere Details genauer zu betrachten. Du kannst den Zoom so einstellen, dass er beim Mouseover oder beim Klicken auf das Bild aktiviert wird.

Zoomansicht ist verfügbar auf:

image-zoom.gif

Bild-Zoom aktivieren

Wie du den Bild-Zoom aktivierst, hängt von der Version deiner Website ab.

So aktivierst du die Zoomansicht: 

  1. Klicke auf einer Produktdetailseite auf Bearbeiten und dann auf das Bleistiftsymbol.
  2. Klicke auf das Dropdown-Menü Mouseover-Aktion.
  3. Wähle Zoom aus.

So aktivierst du die Zoomansicht:

  1. Gehe zum Website-Menü, während du dich auf einer Produktdetailseite befindest, klicke auf Design und klicke dann auf Website-Stile.
  2. Scrollen Sie zum Abschnitt Produkte: Zoomansicht (scrollen Sie in Galapagos zum Abschnitt Produktartikel.)
  3. Aktivieren Sie Zoomansicht aktivieren.
  4. Um die Vergrößerungsstufe festzulegen, stellen Sie den Schieberegler Zoom-Faktor zwischen 1 und 5 ein (in Galapagos ist es Bild: Zoom-Faktor).
  5. Wenn du festlegen möchtest, ob das Bild zoomt, sobald sich der Cursor darüber bewegt, setze Zoom aktiviert: auf Klick oder Mouseover. (In Galapagos wird der Zoom immer beim Mouseover aktiviert.)

Weitere Unterstützung zur Zoomansicht

  • Die Zoomansicht zeigt eine größere Version des Bildes an. Technisch gesehen wird die Bilddatei nicht herangezoomt.
  • Der Bild-Zoom ist auf Mobilgeräten nicht verfügbar.
  • Um optimale Ergebnisse zu erzielen, formatiere dein Produktbild vor dem Hochladen zur Anzeige im Web.
  • Bilder mit transparenten Hintergründen (.png) zeigen das Originalbild hinter der gezoomten Version an.
  • In Version 7.1 ist die Zoomansicht für Produkt-Galerien mit dem Karussell-Design nicht verfügbar.

Schnellansicht

Mit der Produkt-Schnellansicht können Kunden auf einen Button klicken, um Artikeldetails in einer Lightbox anzuzeigen, ohne die aktuelle Seite zu verlassen. Durch diese Schnellansicht sind die Kunden eher geneigt, sich mit deinem Shop zu beschäftigen und weitere deiner Produkte anzusehen.

Der „Schnellansicht“-Button kann an folgenden Orten angezeigt werden:

  • Übersichts-Blöcke
  • Produkt-Blöcke
  • Shop-Seiten

Der Button wird angezeigt, wenn Sie mit der Maus über das Produkt fahren. Die Schnellansicht-Lightbox enthält Produktdetails, Bilder und einen Vollständigen Artikel anzeigen-Link, der zur Seite des Artikels führt.

Product_Block_with_Quick_View.png

Wenn unerwünschter Code in der Schnellansicht angezeigt wird, liegt dies wahrscheinlich daran, dass die Produktbeschreibung eine externe Textformatierung enthält. Um die Formatierung zu entfernen, gib die Produktbeschreibung manuell erneut ein oder füge sie als Klartext ein.

Schnellansicht-Buttons hinzufügen

Du kannst die Schnellansicht pro Shop-Seite und pro Block aktivieren. Wenn du mehrere Shop-Seiten oder Blöcke hast, füge die Buttons einzeln hinzu.

So fügst du eine Schnellansicht zu einem Produkt-Block hinzu:

  1. Wähle im Produkt-Block-Editor ein Produkt aus, das du anzeigen möchtest.
  2. Aktiviere im Tab Design den Schalter Produkt-Schnellansicht.
  3. Speichern Sie Ihre Änderungen an der Seite. 

So fügst du eine Schnellansicht zu einem Übersichts-Block hinzu:

  1. Stelle sicher, dass im Übersichts-Block-Editor im Tab Inhalt eine Shop-Seite ausgewählt ist.
  2. Klicke auf den Reiter Design.
  3. Aktiviere den Schalter Produkt-Schnellansicht aktivieren. Der Button „Schnellansicht“ wird über allen ausgewählten Bildern der Produkte im Block angezeigt.
  4. Speichern Sie Ihre Änderungen an der Seite.

So fügst du eine Schnellansicht zu einer Shop-Seite hinzu:

  1. Öffne die Seiteneinstellungen.
  2. Klicke auf Erweitert, klicke auf Schnellansicht und schalte dann die Option Schnellansicht aktivieren ein.
  3. Wenn du mehrere Shop-Seiten hast, wiederhole diese Schritte für jede einzelne Seite.

Gestalte den Button und die Lightbox (nur Version 7.0)

Nach der Aktivierung der Schnellansicht werden neue Abschnitte im Menü Website-Stile angezeigt. Die Stil-Einstellungen gelten für die gesamte Website, um ein einheitliches Erscheinungsbild zu erzeugen.

  1. Klicke im Hauptmenü auf Website, dann auf Design und anschließend auf Website-Stile.
  2. Passe im Abschnitt Produkte: Schnellansicht-Button Stil, Farbe, Schriftart, Padding, Position und Größe des Schnellansicht-Buttons an. 
  3. Passe im Abschnitt Produkte: Schnellansicht-Lightbox das Erscheinungsbild der Lightbox an.

Tipp

Wenn dein Schnellansicht-Text Formatierungsprobleme aufweist, versuche, die Produktdetails als Reintext hinzuzufügen.

Weitere Unterstützung zur Schnellansicht

  • Die Schnellansicht ist auf Mobilgeräten nicht verfügbar.
  • Der Text des „Schnellansicht“-Buttons kann derzeit nicht angepasst werden.
  • Produktbilder werden in der Schnellansicht als abgeschnittenes Quadrat angezeigt.
  • In Version 7.0 werden Produktbeschreibungen in der Schnellansicht ohne spezielle Formatierungen angezeigt, einschließlich Header-Formatierung, Fettschrift, Kursivschrift, Aufzählungslisten oder Zeilenumbrüche.

Mouseover-Effekte

Wenn du den Mauszeiger über ein Produktbild bewegst, werden Informationen angezeigt oder Bewegungen erzeugt. So kannst du deinen Shop interaktiv und mit Animationen gestalten. Welche Mouseover-Optionen auf deiner Website verfügbar sind, hängt von der Version deiner Website ab.

Auf allen Shop-Seiten wird bei einem Mouseover das zweite alternative Produktbild angezeigt, wenn ein Produkt mehr als ein Bild enthält.

Die Template-Gruppen Brine, Farro, Skye, Tremont und York (mit erweiterten Shop-Seiten) haben drei Optionen:

  • Alternatives Bild
  • Verblassen
  • Produkt-Info-Overlay

Du kannst Produktnamen und Preise über ein Farb-Overlay beim Mouseover in diesen Template-Gruppen anzeigen (mit klassischen Shop-Seiten):

  • Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Zwei Templates verfügen über einzigartige Mouseover-Optionen:

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Spezielle Funktionen der Shop-Seite