Produkt-Blöcke

Stelle ein Produkt aus deinem Shop auf einer anderen Seite deiner Website vor und verlinke Kunden direkt zur Kasse.

Zuletzt aktualisiert: 5. Februar 2025

Ein Produkt-Block zeigt ein Element aus dem Shop deiner Website auf anderen Seiten oder in anderen Beiträgen an. Das ist eine gute Möglichkeit, Produkte auf deiner Website zu bewerben oder ein Layout zu erstellen, das sich von der integrierten Landing-Page deines Shops unterscheidet.

Tipp

Um mehr über die Unterschiede zwischen Shop-Seiten und Produkt-Blöcken zu erfahren, besuche Shop-Seiten vs. Produkt-Blöcke

Bevor du loslegst

  • Um Produkt-Blöcke zu verwenden, brauchst du eine Shop-Seite, die das Produkt enthält, das du anzeigen möchtest.
  • Die Shop-Seite, die das Produkt enthält, muss aktiviert sein. Wenn du sie deaktivierst, wird das Produkt im Warenkorb nicht angezeigt, wenn es über Produkt-Blöcke hinzugefügt wird.
  • Das Produkt muss veröffentlicht und sichtbar sein.

Den Produkt-Block hinzufügen

So fügst du einen Produkt-Block hinzu:

  1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und dann auf Produkt. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
  2. Öffne den Block-Editor, indem du auf das Bleistiftsymbol auf dem Block klickst.
  3. Suche im Feld Ein Produkt hinzufügen nach dem Produkt, das du anzeigen möchtest. Klicke in den Suchergebnissen darauf, um es hinzuzufügen. Die Suche zeigt bis zu sieben Produkte an.
  4. Um zu deinem Inventar zu wechseln und Änderungen an Produkten vorzunehmen, klicke auf Produkte bearbeiten und dann auf Speichern und Fortfahren. Beachte, dass dadurch die aktuelle Seite geschlossen wird.
  5. Klicke auf den Tab Design, um individuell festzulegen, welche Produktdetails angezeigt werden.
Product_Block.gif

Tipp

Produkt-Blöcke zeigen jeweils ein Produkt an. Um mehr als ein Produkt auf einer Seite anzuzeigen, verwende mehrere Produkt-Blöcke oder zeige eine Sammlung von Produkten mithilfe von Übersichts-Blöcken an.

Zugriffsbeschränkte Produkte bewerben

Wenn du ein Abonnement für Mitglieder-Websites hast und einen Onlineshop in einer deiner Mitglieder-Websites einrichtest, müssen sich Website-Besucher für eine Mitgliedschaft registrieren, bevor sie Produkte in diesem zugriffsbeschränkten Shop kaufen können. Um Nicht-Mitgliedern den Kauf dieser Produkte zu ermöglichen, füge Produkt-Blöcke auf deiner Hauptseite hinzu und verwende die Suchleiste Ein Produkt hinzufügen, um Produkte aus deinem zugriffsbeschränkten Shop auszuwählen.

Produktdetails hinzufügen

Um den Produkt-Block anzupassen, klicke auf den Tab Design. Hier kannst du die Ausrichtung des Blocks auf links, zentriert oder rechts einstellen. Du kannst auch festlegen, welche Produktdetails angezeigt werden sollen, indem du die Schalter ein- oder ausschaltest:

  • Bild — Zeigt das ausgewählte Bild des Produkts an
  • Titel - Zeigt den Titel des Produkts an
  • Preis - Zeigt den Preis des Produkts an
  • Beschreibung - Zeigt die Beschreibung des Produkts an
  • „Zum Warenkorb hinzufügen“-Button - Zeigt einen Button mit der Bezeichnung Zum Warenkorb hinzufügen an
  • Produkt-Schnellansicht - Aktiviert die Schnellansicht

Um diese Details zu ändern, bearbeite das Produkt.

Style den Produkt-Block

Du kannst den Produkt-Block gestalten und den Button Zum Warenkorb hinzufügen anpassen.

Schaltflächentext

Standardmäßig ist der Text für den Produkt-Block-Button Zum Warenkorb hinzufügen. Du kannst diesen Text ändern, zum Beispiel in Jetzt kaufen.

  1. Öffne die Shop-Seite mit dem Produkt, das in deinem Produkt-Block angezeigt wird.
  2. Doppelklicke auf das Produkt, um den Produkt-Editor zu öffnen.
  3. Gib im Tab Optionen einen neuen Button-Text ein.

Button-Design

Die Art und Weise, wie du das Button-Design ändern kannst, hängt von der Version deiner Website ab.

  1. Öffne eine Seite mit einem Produkt-Block.
  2. Klicke auf Bearbeiten, öffne Website-Stil und klicke dann auf Buttons.

Produkt-Block-Buttons folgen den primären Stil-Optionen. Mehr dazu erfährst du unter Buttons gestalten.

  1. Öffne eine Seite mit einem Produkt-Block.
  2. Gehe zurück zum Website-Menü und klicke dort auf Design und dann auf Website-Stile.
  3. Scrolle nach unten zu den Stil-Anpassungen für Buttons.

Näheres erfährst du hier: Buttons gestalten.

Text und Schriftart von Produkt-Blöcken

Wie du den Titel, den Preis und die Beschreibung im Produkt-Block gestaltest, hängt von der Version deiner Website ab.

Um den angezeigten Text zu ändern, gehe zu deiner Shop-Seite und bearbeite die Produktinformationen.

Ändere die Schriftart, Textfarbe und Textgröße unter Website-Stil.

  • Schriftart – Entspricht den Einstellungen für die Absätze
  • Farbe – Entspricht den Einstellungen für Absatz (mittelgroß)
  • Größe – Entspricht den Einstellungen für Absatz 2

Der Titel erscheint immer etwas größer.

Um den angezeigten Text zu ändern, gehe zu deiner Shop-Seite und bearbeite die Produktinformationen.

Die Produktdetail-Schriftarten nehmen ihren Stil von anderen Textstilen auf deiner Website. In den meisten Templates:

  • Titel – Folgt der Schriftart des Textkörpers, aber etwas größer. Die Farbe folgt der Link-Farbe des Textkörpers.
  • Preise – Folgt der Schriftart und Farbe des Textkörpers, ist jedoch etwas größer.
  • Beschreibung – Folgt der Schriftart und Farbe des Textkörpers.

Es gibt ein paar Ausnahmen, und zwar in folgenden Template-Gruppen:

Template-Gruppe Hinweise

Bedford

  • Titelfarbe – Entspricht Textkörper

Brine

  • Titelfarbe – Entspricht Textkörper

Farro

  • Titelfarbe – Entspricht Textkörper

Skye

  • TitelschriftartListentitel (Anpassung auf einer Blog-Seite)
  • Beschreibungs-SchriftartAuszug
  • TitelfarbeTitelfarbe
  • BeschreibungsfarbeAuszugsfarbe
Supply
  • Preisschriftart – keine Stiloptionen
  • Beschreibung – fixes Gewicht

Ausverkauft-Labels

Wie du das Ausverkauft-Label gestaltest, hängt von der Version deiner Website ab.

Ausverkauft-Labels werden immer als weißer Text auf einem rechteckigen schwarzen Hintergrund angezeigt. Die Schriftart für Ausverkauft folgt der Absatzschriftart für die gesamte Website. Du kannst den Text im Produktstatus-Menü ändern.

Das Ausverkauft-Label folgt den Stil-Anpassungen für Produkt: Statuszeichen deiner Website. Es ist nicht möglich, die Position des Labels zu ändern. Du kannst den Text im Produktstatus-Menü ändern.

Größe und Form von Produkt-Blöcken

Direkt nach dem Hinzufügen erstreckt sich ein Block zunächst über die gesamte Breite des Inhaltsbereichs, wenn sich daneben keine weiteren Blöcke befinden. Hilfe zur Größenänderung von Blöcken findest du unter Ändern der Größe von Blöcken und Verschieben von Blöcken, um Layouts anzupassen.

Für die Form des Blocks entspricht das Seitenverhältnis von Produkt-Blöcken dem ursprünglichen Seitenverhältnis des ausgewählten Bilds des Produkts. Um sicherzustellen, dass ein Produkt-Block über ein bestimmtes Seitenverhältnis verfügt, schneide das Bild vor dem Hochladen im Produkt-Editor zu oder verwende den Bild-Editor im Produkt-Editor.

Tipps zur Produkt-Block-Suche

Bei der Suche nach einem Produkt, das im Block angezeigt werden soll, basieren die Suchergebnisse auf den folgenden Informationen:

  • Titel
  • Beschreibungen
  • Tags
  • Kategorien
  • Text-Blöcke in den zusätzlichen Informationen des Produkts

Die Suche zeigt bis zu sieben Treffer an. Wenn deine Produkte ähnliche Namen haben, suche nach dem genauen Titel. Neue Produkte werden möglicherweise nicht sofort in der Suche angezeigt.

Ihren Onlineshop individualisieren

Du musst eine Shop-Seite verwenden, um Produkte zu deiner Website hinzuzufügen, kannst aber Produkt-Blöcke verwenden, um ein benutzerdefiniertes Onlineshop-Layout auf einer anderen Seite zu erstellen. Wenn du deinen Shop erstellt und angepasst hast, kannst du die Shop-Seite ausblenden, indem du sie im Seiten-Menü in den Abschnitt „Nicht verlinkt“ verschiebst. Dadurch wird die Shop-Seite aus den Navigationsmenüs entfernt, bleibt jedoch aktiviert.

Fehlerbehebung

Mein Produkt-Block zeigt das falsche Bild an

Produkt-Blöcke zeigen das ausgewählte Bild des Produkts an. Dieses Bild kann sich von dem ersten Bild unterscheiden, das im Produkt-Editor festgelegt wurde. Um das Bild im Produkt-Block zu ändern, ändere das ausgewählte Bild des Produkts.

Das Produkt wird nicht aus dem Produkt-Block in den Warenkorb gelegt

Wenn durch das Klicken auf den Button Zum Warenkorb hinzufügen eines Produkt-Blocks das Produkt nicht zum Warenkorb hinzugefügt wird, ist die verknüpfte Shop-Seite möglicherweise deaktiviert. Produkte von deaktivierten Shop-Seiten können in Produkt-Blöcken angezeigt werden, können jedoch nicht zum Warenkorb hinzugefügt werden. Um dieses Problem zu beheben, aktiviere die Shop-Seite.

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.