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

Produktseite spezielle Funktionen

Jede Squarespace-Website unterstützt Produkt-Seiten (Shop-Seiten in Version 7.1 genannt), 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 ihren Cursor über Produktbilder führen. In dieser Anleitung werden diese Funktionen erläutert und es wird 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 finden Sie unter Produkt-Seitentypen.

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

Zoomansicht

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 die Zoomansicht aktivierst, hängt von der Version deiner Website ab.

So aktivierst du die Zoomansicht: 

  1. Klicke auf einer Produktdetailseite in der oberen linken Ecke auf Design bearbeiten. Wenn diese Option nicht angezeigt wird, klicke 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.
  • Zoomansicht ist auf mobilen Gerä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
  • Produkt-Seiten (Shop-Seiten in Version 7.1 genannt)

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

Sie können die Schnellansicht pro Produktseite und pro Block aktivieren. Wenn Sie mehrere Produktseiten oder Blöcke haben, fügen Sie die Buttons zu jeder/jedem einzeln hinzu.

So fügen Sie 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ügen Sie eine Schnellansicht zu einem Übersichts-Block hinzu:

  1. Stelle sicher, dass im Übersichts-Block-Editor im Tab Inhalt eine Produktseite ausgewählt ist.
  2. Klicken Sie auf den Tab Design.
  3. Aktivieren Sie Schnellansicht aktivieren.
  4. Klicken Sie auf 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ügen Sie eine Schnellansicht zu einer Produktseite hinzu:

  1. Öffne die Seiteneinstellungen.
  2. Klicke auf Erweitert, klicke auf Schnellansicht und schalte dann die Option Schnellansicht aktivieren ein.
  3. Wenn du mehrere Produktseiten hast, dann wiederholst du 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.
  • Produktbeschreibungen werden in der Schnellansicht ohne spezielle Formatierungen angezeigt, einschließlich Kopfzeilenformatierung, 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 ein alternatives Produktbild angezeigt, wenn ein Produkt mehr als ein Bild enthält.

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

  • Alternatives Bild
  • Verblassen
  • Produkt-Info-Overlay

Du kannst Produktnamen und Preise über ein farbiges Overlay beim Mouseover in diesen Template-Gruppen verwenden (mit klassischen Produkt-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?
18 von 70 fanden dies hilfreich
Produktseite spezielle Funktionen