Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Spezielle Funktionen der Shop-Seite

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.

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.

  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 Hauptmenü, während du dich auf einer Produktdetailseite befindest, klicke aufDesign und klicke dann aufWebsite-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

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. Aktivieren Sie Schnellansicht aktivieren.
  3. Klicken Sie auf Apply (Anwenden), um Ihre Änderungen zu speichern.
  4. 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. Klicken Sie auf den Tab Design.
  3. Aktivieren Sie Schnellansicht aktivieren.
  4. Klicken Sie auf Apply (Anwenden), um Ihre Änderungen zu speichern. Der Schnellansicht-Button wird über allen Produkt-Vorschaubildern im Block angezeigt.
  5. 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. Klicken Sie im Hauptmenü 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:

War dieser Beitrag hilfreich?
22 von 97 fanden dies hilfreich
Spezielle Funktionen der Shop-Seite