Ein Produkt-Block zeigt einen Artikel aus dem Shop deiner Website auf anderen Seiten oder Beiträgen an. Sie sind eine gute Möglichkeit, Artikel auf deiner Website zu bewerben oder ein Layout zu erstellen, das sich von der integrierten Landing-Page deines Shops unterscheidet. Du kannst für jeden Artikel den Button Zum Warenkorb hinzufügen einbeziehen.
Tipp: Um mehr über die Unterschiede zwischen Produkt-Blöcken und Shop-Seiten zu erfahren, besuche Shop-Seiten vs. Produkt-Blöcke.
Bevor Sie anfangen
- 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.
- The product must be published and visible.
Add the Product Block
So fügst du einen Produkt-Block hinzu:
- Bearbeite eine Seite oder einen Beitrag, klicke auf eine Einfügemarke und wähle Produkt aus dem Menü aus. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
- In the Find A Product search bar, search for the product you want to display. Click it in the search results to add it. The search displays up to 15 products.
- Customize what product details display using the checkboxes.
- Klicken Sie auf Apply (Anwenden), um Ihre Änderungen zu speichern.
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 Mitgliederbereiche hast und einen Onlineshop in einem deiner Mitgliederbereiche 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 suchen, um Produkte aus deinem zugriffsbeschränkten Shop auszuwählen.
Add product details
Use the checkboxes in the block editor to customize which product details display. These details are pulled from the Item and Options tabs in the product editor:
- Check Show Image to display the product's thumbnail image.
- Check Show Title to display the product's title.
- Check Show Price to display the product's price.
- Check Show Description to display the description of the product.
- Check Show Add to Cart Button to display an Add to Cart button.
To change any of these details, edit the product.
Style den Produkt-Block
Du kannst den Produkt-Block gestalten und den Button Zum Warenkorb hinzufügen anpassen.
Schaltflächentext
By default, the text for the Product Block's button is Add to Cart. You can change this text to something else, like Buy Now.
- Öffne die Shop-Seite mit dem Produkt, das in deinem Produkt-Block angezeigt wird.
- Double-click the product to open the product editor.
- In the Options tab, enter new button text.
Button-Design
Die Art und Weise, wie du das Button-Design ändern kannst, hängt von der Version deiner Website ab.
- Open a page containing a Product Block.
- Klicke auf Design bearbeiten, öffne Website-Stile und klicke dann auf Buttons.
Näheres erfährst du hier: Buttons gestalten.
- Open a page containing a Product Block.
- Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stile.
- Scroll down to the style tweaks for 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.
The product details fonts take their style from other text styles on your site. In most templates:
- Titel – Folgt der Schriftart des Textkörpers, aber etwas größer. Die Farbe folgt der Link-Farbe des Textkörpers.
- Pricing - Follows the body text font and color, but slightly larger.
- Description - Follows the body text font and color.
There are some exceptions. In these template families:
| Template-Gruppe | Hinweise |
|
Bedford |
|
|
Brine |
|
|
Farro |
|
|
Skye |
|
| Supply |
|
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 Vorschaubilds 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.
Product Block search tips
When searching for a product to display in the block, the search results are based on the following information:
- Titel
- Descriptions
- Tags
- Kategorien
- Text Blocks in the product's Additional Information
Die Suche zeigt bis zu 15 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 Produkt-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
Product Blocks display the product's thumbnail image. This image may be different than the first image set in the Item tab of the product editor. To change the image in the Product Block, change the product's thumbnail image.
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.