Überprüft von Sie wechseln Ihren Shop zu Blocksy, öffnen die Shop-Seite und die Produktkarten sehen gut aus. Dann probieren Sie eine andere Platzierung der Wunschlisten-Schaltfläche aus. Bei der oberen linken Option kann die Schaltfläche über dem SALE-Abzeichen liegen. Auf Produktseiten nimmt die Inline-Option eine eigene Zeile unter „In den Warenkorb“ ein.
Nichts davon ist genau genommen kaputt. Es sind zwei gut gemachte Werkzeuge, die unterschiedliche Layout-Entscheidungen treffen, und die Lücken zeigen sich in den Details. Diese Details bemerkt ein Käufer, wenn er entscheidet, ob er etwas für später speichern möchte.
Deshalb wird das kostenlose Plugin SaveTo Wishlist Lite jetzt mit einer speziellen Blocksy-Wunschlisten-Integration ausgeliefert. Unten zeige ich Ihnen, was es ändert und welche Platzierungen am besten zu Blocksy passen. Ich zeige Ihnen auch, wie Sie es überprüfen können.
Springe zu:
- Warum Wunschlisten-Schaltflächen auf Blocksy deplatziert aussehen können
- Was die SaveTo Wishlist Blocksy-Integration bewirkt
- Was Sie vor dem Start benötigen
- So wählen Sie Ihre Wunschlisten-Schaltflächenplatzierungen auf Blocksy aus
- Wann „Oben rechts“ statt „Oben links“ wählen
- So bestätigen Sie, dass die Blocksy-Integration funktioniert
- Die Grenzen, die es wert sind, zu kennen
- Häufig gestellte Fragen
- Bereit, Ihre Blocksy-Wunschliste einzurichten?
Warum Wunschlisten-Schaltflächen auf Blocksy deplatziert aussehen können
Blocksy behält die eigenen Produkt-Markups von WooCommerce bei, legt sie aber mit eigenen Einstellungen aus. So gibt Ihnen Blocksy so viel Kontrolle über Ihr Shop-Layout. Eine Plugin-Schaltfläche, die in dieses Layout eingefügt wird, kennt die Regeln von Blocksy jedoch nicht automatisch.
Unsere Entwickler haben vier spezifische Stellen gemessen, an denen sich dies zeigte:
- Karten-Ausrichtung: Blocksy richtet den Karteninhalt über seine eigene Einstellung „Content Alignment“ aus. Die Wunschlisten-Schaltfläche war jedoch immer zentriert, sodass sie bei links ausgerichteten Karten als Einziges nicht in der Reihe war.
- Die Badge-Ecke: Blocksy platziert seine Sale- und Out-of-Stock-Badges in der oberen linken Ecke der Karte. Ein dort platzierter Wunschlisten-Button lag auf dem Badge und verbarg ihn.
- Die Produktgalerie: Auf Produktseiten konnte die Platzierung des Bildes oben links in der Ecke der Seite landen, abseits des Fotos.
- Die „In den Warenkorb“-Zeile: Blocksy dehnt zusätzliche Elemente in dieser Zeile auf volle Breite aus. Ein „Inline“-Wunschlisten-Button landete daher in einer eigenen Zeile.
Blocksy ist eine beliebte Wahl, daher erreichen diese Details viele Shops. Laut seiner WordPress.org-Auflistung hat Blocksy mehr als 300.000 aktive Installationen und eine durchschnittliche 5-Sterne-Bewertung über 873 Rezensionen. Es wird von CreativeThemes hergestellt und ist in Übersichten wie dem Leitfaden für WooCommerce-Themes von Store Owner Tips enthalten.
Die richtige Platzierung des Buttons ist wichtig, da Sparen eine echte Gewohnheit ist. Laut Baymard Institute’s Produktseiten-Forschung verlassen sich 21 % der 1.193 Studienteilnehmer auf „Speichern“-Funktionen. Doch 89 % der von Baymard bewerteten Websites machen die Speicherfunktionen nicht leicht zugänglich und nutzbar. Ein Button, der fehl am Platz wirkt, hilft nicht und untergräbt den Conversion-Wert einer Wunschliste.
Was die SaveTo Wishlist Blocksy-Integration bewirkt
Die Integration ist ein zusätzliches Stylesheet. SaveTo Wishlist Lite 1.1.6 lädt es automatisch, wenn Blocksy oder ein Blocksy-Child-Theme Ihr aktives Theme ist. Es gibt nichts zu aktivieren.
| Platzierung | Ohne die Integration | Mit der Integration |
|---|---|---|
| Shop-, Titel- und „In den Warenkorb“-Platzierungen | Button zentriert, auch bei linksbündigen Karten | Folgt Ihrer Blocksy-Karten-Ausrichtung: links, mittig oder rechts |
| Shop, Oben links vom Produktbild | Verdeckt den Sale- oder Out-of-Stock-Badge | Rückt nach unten, um unter dem Badge zu sitzen |
| Produkt, Oben links vom Produktbild | Kann außerhalb der Produktgalerie landen | Sitzt über der Galerie, unter jedem Badge |
| Produkt, Inline mit dem „In den Warenkorb“-Button | Nimmt eine eigene volle Zeile ein | Teilt sich die Zeile mit „In den Warenkorb“ |
Das Stylesheet passt nur Position, Abstand und Ausrichtung an. Ihre Button-Farben, -Größe und -Stil bleiben genau so, wie Sie sie in SaveTo Wishlist eingestellt haben. Es funktioniert auch mit jedem Frontend-CSS-Lade-Modus. Shops, die minimale oder keine Plugin-Stile laden, erhalten die gleichen Korrekturen.
Unsere Woostify-Integration funktioniert auf die gleiche Weise: ein themenspezifisches Stylesheet, das automatisch geladen wird.
Was die Integration nicht tut
Der Umfang ist bewusst klein gehalten, was auch das Risiko gering hält.
- Keine Einstellungen: Es gibt keine Blocksy-Seite, keinen Schalter und keine Option in SaveTo Wishlist.
- Kein zusätzliches JavaScript: Es ist nur CSS, daher werden keine Skripte hinzugefügt. Unser Speed-Test zeigt, was das Plugin selbst zu einer Produktseite hinzufügt.
- Kein neues Design: Es gestaltet den Button nicht neu, damit er wie die eigenen Buttons von Blocksy aussieht. Es passt Ihren vorhandenen Button in das Layout von Blocksy ein.
- Keine anderen Themes betroffen: Das Stylesheet wird nur geladen, wenn Blocksy das aktive Theme ist. Unsere automatisierten Tests überprüfen beide Seiten davon.
Was Sie vor dem Start benötigen
Sie benötigen zwei Dinge, und beide sind kostenlos.
- Das Blocksy-Theme: Oder ein darauf basierendes Child-Theme. Unsere Entwickler haben die Korrekturen an Blocksy 2.1.57 gemessen und wir haben die folgenden Screenshots auf 2.1.58 gemacht.
- SaveTo Wishlist Lite 1.1.6 oder neuer: Frühere Versionen enthalten nicht das Blocksy-Stylesheet. Aktualisieren Sie zuerst, wenn Sie eine ältere Version verwenden.
Die Integration ist im kostenlosen Plugin enthalten, Sie benötigen also kein SaveTo Wishlist Pro dafür. Pro-Shops erhalten es ebenfalls, da Pro auf dem kostenlosen Plugin aufbaut.
Blocksy ist ein klassisches Theme, daher verwenden Ihre Shop- und Produktseiten die Standard-WooCommerce-Vorlagen. Wenn Sie stattdessen eine Seite mit dem WooCommerce-Produktkollektionsblock erstellen, wird die Schaltfläche trotzdem gerendert. Dort platziert das eigene Block-Handling des Plugins sie. Erstellen Sie stattdessen Produktseiten mit Elementor? Unser Elementor-Widget-Leitfaden behandelt diesen Weg.
So wählen Sie Ihre Wunschlisten-Schaltflächenplatzierungen auf Blocksy aus
Jede Platzierung zeigt die Schaltfläche auf Blocksy an, sodass Sie ein Design wählen und keine Fehler vermeiden. Sie finden beide unter SaveTo Wishlist > Einstellungen > Button-Platzierung & Stile. Suchen Sie in den Abschnitten Shop-Seite und Produktseite.
Platzierungen auf der Shop-Seite
Hier sehen Sie, wo jede der sechs Shop-Platzierungen auf einer Blocksy-Produktkarte landet:
- Oben rechts auf dem Produktbild: Die Standardeinstellung des Plugins und die beste Wahl für Blocksy. Die Eckfahne ist links, sodass nichts um diesen Platz konkurriert.
- Oben links auf dem Produktbild: Auf einer Karte mit einem Aufkleber rutscht die Schaltfläche nach unten darunter. Auf einer Karte ohne Aufkleber behält sie ihren normalen Platz in der Ecke.
- Über dem Produkttitel und unter dem Produkttitel: Beide zeigen die Schaltfläche zwischen Bild und Titel an. Das liegt daran, dass Blocksy seinen eigenen Titel rendert.
- Über der Schaltfläche „In den Warenkorb“: Zeigt die Schaltfläche direkt unter dem Titel an.
- Unter der Schaltfläche „In den Warenkorb“: Zeigt die Schaltfläche nach der Schaltfläche „In den Warenkorb“ an.
Die letzten vier folgen alle der Einstellung „Inhaltsausrichtung“ von Blocksy für Produktkarten. Ändern Sie Ihre Karten auf zentriert oder rechts, und die Schaltfläche bewegt sich mit ihnen. Möchten Sie die Schaltfläche auf einem Seitentyp nicht anzeigen? Wählen Sie für diesen „Nicht anzeigen“, wie in unserem Leitfaden zum Ausblenden der Wunschlisten-Schaltfläche erklärt.
🔍️ Was wir gesehen haben: Oben und unter dem Produkttitel sehen auf Blocksy gleich aus. Wenn Sie zwischen ihnen wechseln und erwarten, dass sich die Schaltfläche bewegt, wird sie das nicht tun, und das ist zu erwarten. Wählen Sie eine davon oder „Über der Schaltfläche „In den Warenkorb“, wenn Sie die Schaltfläche unter dem Titel haben möchten.
Platzierungen auf der Produktseite
Alle sieben Platzierungen von Produktseiten funktionieren auf Blocksy. Zwei davon erhalten spezielle Hilfe vom Stylesheet.
Inline mit der Schaltfläche „In den Warenkorb“ sitzt auf dem Desktop neben „In den Warenkorb“. Auf schmalen Bildschirmen bewegt sie sich darunter, da die eigene Schaltfläche von Blocksy dort bereits die Zeile füllt.
Oben links auf dem Produktbild liegt über der Produktgalerie. Bei einem Produkt mit einem Aufkleber befindet es sich unter dem Aufkleber, anstatt ihn zu überdecken.
Die anderen fünf Platzierungen erfordern keine spezielle Behandlung durch das Stylesheet.
Wann „Oben rechts“ statt „Oben links“ wählen
Wählen Sie "Oben rechts auf dem Produktbild", wenn Ihre Produkte große oder gestapelte Aufkleber haben. Die Anpassung "Oben links" schafft Platz für einen Aufkleber in Blocksys Standardgröße und nicht mehr.
Das Stylesheet erkennt Sale-Aufkleber, Out-of-Stock-Aufkleber und Blocksys benutzerdefinierte Aufkleber. Es verschiebt den Button nur auf Karten, die tatsächlich einen anzeigen. Deshalb kann ein gemischtes Raster Buttons auf zwei verschiedenen Höhen in der oberen linken Ecke haben.
Wenn Ihre Verkäufe also mehrere Aufkleber in derselben Ecke haben, sorgt "Oben rechts" für Konsistenz auf jeder Karte. Es ist auch die Standardeinstellung des Plugins, sodass eine Neuinstallation auf Blocksy diese bereits verwendet.
Manche Käufer speichern ein Produkt, um auf einen besseren Preis zu warten. Für sie kann SaveTo Wishlist Pro Preiswarnungen senden, wenn ein gespeichertes Produkt günstiger wird.
So bestätigen Sie, dass die Blocksy-Integration funktioniert
Diese Überprüfungen dauern einige Minuten und decken die Bereiche ab, die das Stylesheet ändert. Führen Sie sie einmal nach dem Update und erneut nach einem großen Blocksy-Update durch.
- Überprüfen Sie, ob das Stylesheet geladen wird: Zeigen Sie den Quellcode einer Shop-Seite an und suchen Sie nach
savetowishlist-blocksy.css. Es sollte vorhanden sein, solange Blocksy aktiv ist. Wenn ein Minify-Plugin Ihre CSS-Dateien kombiniert, wird der Name möglicherweise nicht angezeigt. - Überprüfen Sie ein Produkt im Angebot: Bei der Platzierung "Oben links auf dem Bild" sollte sich der Button unter dem Sale-Aufkleber befinden.
- Überprüfen Sie Ihre Karten-Ausrichtung: Bei linksbündigen Blocksy-Karten sollten sich auch ein Titel oder die "In den Warenkorb"-Platzierung links ausrichten.
- Überprüfen Sie die "In den Warenkorb"-Zeile: Bei der Inline-Platzierung sollte sich der Button auf dem Desktop die Zeile teilen. Auf einem Telefon fällt er darunter.
- Als Gast prüfen: Öffnen Sie den Shop in einem privaten Fenster. Gäste sehen denselben Button, solange Gast-Wunschlisten aktiviert sind.
Wenn immer noch etwas nicht stimmt, liefert möglicherweise ein Cache- oder Minify-Plugin altes CSS aus. Leeren Sie es und laden Sie dann neu. Weitere Möglichkeiten, den Button an Ihr Theme anzupassen, finden Sie in unserem Beitrag über Optionen für Wunschlisten-Button-Icons.
Die Grenzen, die es wert sind, zu kennen
Die Integration umfasst die Templates für Shop, Archiv und einzelne Produkte. Einige Dinge liegen außerhalb davon.
- Die Warenkorb-Seite: Warenkorb-Buttons, wie die Option, einzelne Warenkorb-Artikel speichern, verwenden die normale Formatierung des Plugins.
- Große Aufkleber: Der Offset "Oben links" ist für einen Standardaufkleber ausgelegt. Größere Designs sollten "Oben rechts" verwenden.
- Blocksy-Versionen: Die Korrekturen wurden an Blocksy 2.1.57 gemessen. Eine zukünftige Blocksy-Version könnte ihr Layout ändern, daher überprüfen Sie es nach größeren Updates erneut.
- Button-Aussehen: Die Integration fügt Ihren Button in das Layout von Blocksy ein. Sie kopiert nicht das Button-Design von Blocksy.
Unsere automatisierten Tests laufen auf einer echten Blocksy-Installation. Sie bestätigen, dass das Stylesheet bei Blocksy geladen wird und bei einem anderen Theme nicht. Sie prüfen auch, ob der Inline-Button seine Zeile behält.
Häufig gestellte Fragen
Muss ich die Blocksy-Integration aktivieren?
Nein. SaveTo Wishlist Lite 1.1.6 und neuere Versionen laden das Blocksy-Stylesheet automatisch, wenn Blocksy Ihr aktives Theme ist. Es gibt keine Einstellung, kein Umschalter und keine Seite dafür.
Funktioniert es mit einem Blocksy-Child-Theme?
Ja. Das Plugin prüft das übergeordnete Theme, sodass ein auf Blocksy basierendes Child-Theme das gleiche Stylesheet erhält wie Blocksy selbst.
Benötige ich SaveTo Wishlist Pro für die Blocksy-Integration?
Nein. Es ist im kostenlosen SaveTo Wishlist Lite-Plugin, Version 1.1.6 und neuer, enthalten. Pro-Shops erhalten es automatisch, da Pro auf dem kostenlosen Plugin aufbaut.
Bereit, Ihre Blocksy-Wunschliste einzurichten?
Blocksy verleiht Ihrem Shop ein klares Layout, und der Wunschlisten-Button fügt sich nun ohne benutzerdefiniertes CSS ein. Die einzig wirkliche Entscheidung, die noch zu treffen ist, ist, wo Sie den Button platzieren möchten.
- Sehen Sie, was die Integration ändert auf Blocksy-Karten und Produktseiten.
- Wählen Sie Ihre Platzierungen, beginnend mit Oben Rechts auf der Shop-Seite.
- Verwenden Sie Oben Rechts für große Badges, um jede Karte konsistent zu halten.
- Führen Sie die fünf Prüfungen durch nach dem Update und nach großen Blocksy-Updates.
Ihre Blocksy-Wunschlisten-Einrichtung ist nur ein Plugin-Update entfernt. Installieren oder aktualisieren Sie SaveTo Wishlist Lite auf Version 1.1.6 und das Stylesheet erledigt den Rest.
