Blöcke auf einer Seite platzieren
Die App bringt drei Blöcke mit, die du im Shopify-Theme-Editor auf jeder Seite platzieren kannst. Du bearbeitest dafür keine Theme-Dateien und schreibst keine Zeile Code. Diese Seite sagt dir, welcher Block auf welche Seite gehört, wie du ihn dorthin bekommst und welche Einstellungen jeder Block mitbringt – mit den genauen Wertebereichen.
Die drei Blöcke im Vergleich
| Block | Was er zeigt | Typische Seite |
|---|---|---|
| Widerrufsbutton | Nur einen Button. Ein Klick öffnet das Formular als Overlay. | Footer, Seite "Bestellung widerrufen", Seite "Widerrufsrecht" |
| Widerrufsformular | Bei angemeldeten Kunden das Formular direkt eingebettet und vorausgefüllt. Gäste sehen einen Button, der das Formular im Overlay öffnet. | Eigene Seite "Widerruf", Kundenkonto-Seite |
| Widerrufsstatus | Die Suchmaske, mit der Kunden ihren Widerruf nachverfolgen. | Eigene Seite "Widerruf verfolgen" |
Die meisten Shops brauchen genau einen Block: den Widerrufsbutton auf einer eigenen Seite oder im Footer. Die anderen beiden sind für Shops gedacht, die ein eingebettetes Formular ohne Zwischenklick möchten oder ihrer Kundschaft eine eigene Statusseite anbieten wollen.
Einen Block hinzufügen
Der bequeme Weg führt über die App:
- Öffne im App-Admin die Startseite oder Erste Schritte.
- Klicke auf den Link zum Theme-Editor. Shopify öffnet den Editor und der Block der App ist dort bereits vorbereitet.
- Wähle links oben die Seite aus, auf der der Block erscheinen soll.
- Ziehe den Block an die gewünschte Stelle.
- Oben rechts auf Speichern.
Der Weg von Hand geht genauso: Onlineshop → Themes → Anpassen, dann in einem Abschnitt auf Block hinzufügen und unter den Apps den gewünschten Block auswählen.
Eine eigene Seite für den Widerruf anlegen
Wenn du den Button nicht in den Footer, sondern auf eine eigene Seite legen willst:
- Onlineshop → Seiten → Seite hinzufügen. Titel zum Beispiel "Bestellung widerrufen". Speichern.
- Im Theme-Editor oben in der Seitenauswahl auf Seiten und die neue Seite auswählen.
- Im Abschnitt der Seite auf Block hinzufügen und den Block der App wählen.
- Speichern – und die Seite anschließend im Menü oder im Footer verlinken (Onlineshop → Navigation).
Ein Kundenkonto ist für den Widerruf nirgends nötig. Verlinke die Seite deshalb an einer Stelle, die auch Gäste erreichen – der Footer ist dafür in der Praxis der beste Ort.
Einstellungen des Blocks "Widerrufsbutton"
| Einstellung | Standard | Bereich |
|---|---|---|
| Button-Text | Request Withdrawal | freier Text |
| Ausrichtung | Zentriert | Links, Zentriert, Rechts |
| Standard-Button-Stil des Themes verwenden | an | an / aus |
| Theme-Button-Variante | Primär | Primär, Sekundär |
| Button-Hintergrund | #4f46e5 | Farbwähler |
| Button-Textfarbe | #ffffff | Farbwähler |
| Randradius (px) | 6 | 0 bis 32, in Schritten von 2 |
| Vertikaler Innenabstand (px) | 12 | 6 bis 24, in Schritten von 2 |
| Horizontaler Innenabstand (px) | 28 | 12 bis 48, in Schritten von 4 |
| Abstand oben (px) | 0 | 0 bis 64, in Schritten von 4 |
| Abstand unten (px) | 0 | 0 bis 64, in Schritten von 4 |
| Schriftgröße (px) | 16 | 12 bis 24, in Schritten von 1 |
| Schriftstärke | Halbfett | Normal, Mittel, Halbfett, Fett |
Farben, Innenabstände, Schriftgröße und Schriftstärke greifen erst, wenn Standard-Button-Stil des Themes verwenden ausgeschaltet ist. Die Theme-Button-Variante greift genau umgekehrt: nur, solange die Einstellung an ist.
Einstellungen des Blocks "Widerrufsformular"
| Einstellung | Standard | Bereich |
|---|---|---|
| Button-Text für Gäste | Request Withdrawal | freier Text |
| Standard-Button-Stil des Themes verwenden | an | an / aus |
| Theme-Button-Variante | Tertiär (Textlink) | Primär, Sekundär, Tertiär (Textlink) |
| Akzent-/Buttonfarbe | #1d4ed8 | Farbwähler |
| Button-Textfarbe für Gäste | #ffffff | Farbwähler |
Der Block hat weniger Stellschrauben als der Button, dafür eine mit größerer Wirkung: Die Akzent-/Buttonfarbe färbt nicht nur den Gast-Button, sondern auch die Buttons, Links und den Fokusrahmen im Formular selbst.
Der Block-Text nennt den Button ausdrücklich "für Gäste", weil angemeldete Kunden ihn gar nicht sehen: Sie bekommen das Formular direkt eingebettet und mit Name und E-Mail-Adresse vorausgefüllt.
Einstellungen des Blocks "Widerrufsstatus"
| Einstellung | Standard | Bereich |
|---|---|---|
| Überschrift | Check Withdrawal Status | freier Text |
| Standard-Button-Stil des Themes verwenden | an | an / aus |
| Theme-Button-Variante | Primär | Primär, Sekundär |
| Button-Hintergrund | #4f46e5 | Farbwähler |
| Button-Textfarbe | #ffffff | Farbwähler |
| Randradius (px) | 6 | 0 bis 32, in Schritten von 2 |
| Vertikaler Innenabstand (px) | 10 | 6 bis 24, in Schritten von 2 |
| Horizontaler Innenabstand (px) | 28 | 12 bis 48, in Schritten von 4 |
| Schriftgröße (px) | 16 | 12 bis 24, in Schritten von 1 |
| Schriftstärke | Mittel | Normal, Mittel, Halbfett, Fett |
Block-Einstellung oder App-Einstellung?
Beschriftung und Ausrichtung gibt es an zwei Stellen: hier am Block und noch einmal im App-Admin unter Konfiguration → Storefront-Button. Die Regel dazu ist einfach:
- Trägst du im App-Admin eine Button-Beschriftung für eine Sprache ein, gewinnt sie. Das ist der Weg, den Button mehrsprachig zu beschriften – der Theme-Block kennt nur einen Text.
- Bei der Ausrichtung steht im App-Admin standardmäßig Block-Einstellung verwenden. Solange das so bleibt, gilt, was du hier am Block eingestellt hast.
Und ein Rat zum Schluss: Lass Standard-Button-Stil des Themes verwenden eingeschaltet, solange es geht. Ein Button, der die Button-Klassen deines Themes nutzt, sieht automatisch aus wie der Rest des Shops und bleibt es auch nach dem nächsten Theme-Update. Ein von Hand gefärbter fällt dann als Erstes auf.
Weiterlesen
- Die Einstellungsseite im App-Admin – alles, was du im App-Admin einstellst, als Nachschlagetabellen.
- Das Formular Feld für Feld – was deine Kundschaft sieht, sobald sie den Block anklickt.