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

Jedes Template unterstützt Produktseiten, und jede Gruppe hat ihren eigenen Stil und ihre eigenen Layout-Optionen. Die Produktseiten einiger Templates haben zusätzliche Funktionen:

  • Produkt: Zoomansicht – Kunden können Produktbilder vergrößern, um Material, Textur und feinere Details genauer zu betrachten. Sie können den Zoom so einstellen, dass er bei Mouseover oder beim Anklicken des Bildes aktiviert wird.
  • Produkt: Schnellansicht – Kunden können auf einen Button klicken, um Artikeldetails in einer Lightbox anzuzeigen, ohne die aktuelle Seite zu verlassen. Die Schnellansicht ermutigt Kunden, sich mit Ihrem Shop zu beschäftigen und weitere Ihrer Produkten anzusehen.
  • Mouseover-Effekte – Zeigen Sie Informationen an oder erzeugen Sie Bewegung, wenn der Mauszeiger über ein Produktbild bewegt wird, um Ihrem Shop Interaktivität und Animation zu verleihen.
Tipp: Weitere Unterstützung zu Ihrem Template finden Sie in dessen Template-Anleitung.

Unterstützte Templates

Sie können Bild-Zoom und Schnellansicht in diesen Template-Gruppen hinzufügen:

  • Brine
  • Farro
  • Galapagos
  • Skye
  • Tremont
  • York

Die Mouseover-Optionen variieren je nach Template

Zoomansicht

Die Artikelvorschau ist verfügbar für:

image-zoom.gif

Bild-Zoom aktivieren

Wie Sie die Zoomansicht aktivieren, hängt davon ab, auf welcher Version von Squarespace sich Ihre Website befindet.

  1. Gehen Sie auf einer Artikelseite zum Hauptmenü, klicken Sie auf Design und 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. Um festzulegen, ob das Bild vergrößert werden soll, sobald der Benutzer mit dem Mauszeiger darüber fährt, stellen Sie Zoom aktiviert bei: auf Klick oder Mouseover (in Galapagos wird der Zoom immer beim Mouseover aktiviert).
  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Produktartikel.
  2. Klicken Sie auf das Drop-Down-Menü Mouseover-Aktion und wählen Sie Zoom aus.
  3. Legen Sie den Zoom-Faktor des Bildes fest.

Weitere Unterstützung zur Zoomansicht

  • Die Artikelvorschau ist auf Mobilgeräten nicht verfügbar.
  • Für optimale Resultate formatieren Sie Ihr Bild vor dem Hochladen für die Anzeige im Web.
  • Die Zoomansicht zeigt eine größere Version des Bildes an; technisch gesehen wird die Bilddatei nicht herangezoomt.
  • Bilder mit transparenten Hintergründen (.png) zeigen das Originalbild hinter der gezoomten Version an.

Schnellansicht

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

  • Produktseiten
  • Übersichts-Blöcke und Produkt-Blöcke, die mit einer Produktseite verbunden sind

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

Schnellansichts-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 einer Produktseite hinzu:

  1. Öffnen Sie die Seiteneinstellungen für die jeweilige Seite.
  2. Klicken Sie auf den Tab Erweitert und aktivieren Sie Schnellansicht aktivieren.
  3. Wenn Sie mehrere Produktseiten haben, wiederholen Sie diese Schritte für jede einzelne von ihnen.

So fügen Sie eine Schnellansicht zu einem Produkt-Block hinzu:

  1. Wählen Sie im Produkt-Block-Editor ein anzuzeigendes Produkt aus.
  2. Aktivieren Sie Schnellansicht aktivieren.
  3. Click Apply to save your changes.
  4. Speichern Sie Ihre Änderungen an der Seite. 

So fügen Sie eine Schnellansicht zu einem Übersichts-Block hinzu:

  1. Vergewissern Sie sich im Übersichts-Block-Editor, dass eine Produktseite im Tab Inhalt 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.

Den Button und die Lightbox gestalten

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. Passen Sie im Abschnitt Produkte: Schnellansicht-Button Stil, Farbe, Schriftart, Padding, Position und Größe des Schnellansicht-Buttons an. Verschieben Sie beispielsweise den Button mit der Anpassung Position in die Mitte oder in den unteren Teil des Bildes.
  3. Passen Sie im Abschnitt Produkte: Schnellansicht-Lightbox das Erscheinungsbild der Lightbox an. Erwähnenswerte Stil-Anpassungen sind unter anderem:
  • Wählen Sie Auszugsanzeige: Abschneiden aus, um die Produktbeschreibung anzuzeigen.
  • Overlay-Farbe fügt der Produktseite hinter der Lightbox einen Farbfilter hinzu.
  • Verwenden Sie die Steuerung-Anpassungen, um die Navigations- und Schließen-Buttons anzupassen, die außerhalb der Lightbox erscheinen.
  • Um die Titel-Schriftart der Schnellansicht zu ändern, wählen Sie Titel-Schriftart im Abschnitt Produkte: Details des „Website-Stile“-Menüs aus.
Tipp: Wenn Ihr Schnellansicht-Text Formatierungsprobleme aufweist, versuchen Sie, die Produktdetails stattdessen als Klartext 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 Formatierung angezeigt, also ohne Kopfzeilen-Gestaltung, Fett- oder Kursivdruck oder Aufzählungslisten.

Mouseover-Effekte

Die für Ihre Produktseiten verfügbaren Mouseover-Effekte hängen vom Template Ihrer Website ab.

Klassische Produktseiten

Sie können Produktnamen und Preise über ein Farb-Overlay beim Mouseover in Templates anzeigen, die die klassische Produktseite unterstützen. Mehr dazu erfahren Sie unter Die klassische Produkt-Seite gestalten.

Erweiterte Produktseiten

Templates, die die Erweiterte Produktseite unterstützen, verfügen über erweiterte Mouseover-Optionen:

  • Alternativbild – Heben Sie für jedes Produkt eine Besonderheit oder ein wichtiges Detail hervor. 
  • Verblassen – Erstellen Sie einen Ausblendeffekt.
  • Produkt-Overlay – Zeigen Sie Produktinformationen an.

Mehr dazu erfahren Sie unter Die erweiterte Produktseite gestalten.

Hinweis: Derzeit ist in Version 7.1 immer ein alternatives Bild aktiviert.

Einzigartige Produktseiten

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

Related products

Wenn Ihre Website ein „E-Commerce Basis“- oder „E-Commerce Erweitert“-Abonnement nutzt, können Sie ähnliche Produkte auf den Produktdetailseiten jedes Templates anzeigen. Wenn Sie ihn aktivieren, erscheint dieser Abschnitt unten auf einer Produktdetailseite und zeigt ähnliche Produkte nach Kategorie an. Weitere Informationen finden Sie unter Ähnliche Produkte anzeigen.

War dieser Beitrag hilfreich?
14 von 37 fanden dies hilfreich
Produktseite spezielle Funktionen