Quick-Buttons
Quick-Buttons bleiben im tricoma Shop standardmäßig links unten eingeblendet, egal auf welcher Seite sich der Nutzer befindet. Dadurch kann der Nutzer schnell zu entsprechenden Formularen oder Sonderangeboten weitergeleitet werden.
Um Quick-Buttons in einem individuellen Shoptemplate nutzen zu können, muss lediglich der Platzhalter {quick_buttons} in der index.html hinterlegt werden.
Quick-Buttons
In den Einstellungen der App Webseitenbereiche unter dem Reiter Quick-Buttons lassen sich neue Quick-Buttons anlegen1.
Hier muss nun eine Webseite ausgewählt werden. Anschließend kannst du über die Schaltfläche Neuen Quick-Button anlegen einen neuen Quick-Button anlegen.
Quick-Button anlegen Beispiel
In den Einstellungen wird direkt eine Vorschau des Quick-Buttons angezeigt. Diese aktualisiert sich automatisch zur Laufzeit, damit du bereits vor dem Speichern eine Vorschau erhältst.
Über das Eingabefeld Text lässt sich der Text des Quick-Buttons ändern. Über das Eingabefeld Style kannst du den Quick-Button per CSS stylen.
Wichtig: Da CSS-Styles vererbt werden, sind diese stark von der Seite abhängig. Deshalb kann es zu geringen Abweichungen zwischen der Vorschau und dem tatsächlichen Quick-Button im tricoma Shop kommen.
Quick-Button anpassen Beispiel
Vorlage einspielen
Du kannst auch eine unserer Vorlagen für das Design des Quick-Buttons einspielen. In diesem Fall werden der Text und der Style durch die jeweilige Vorlage ersetzt.
Vorlage Einspielen Beispiel
Vorlage Einspielen Beispiel 2
Damit der Quick-Button im tricoma Shop erscheint, muss dieser noch auf aktiv gesetzt werden. Vergiss anschließend nicht, deine Änderungen zu speichern.
Quick-Button aktivieren Beispiel 1
Quick-Button aktivieren Beispiel 2
Der Quick-Button wird nun zwar angezeigt, doch noch führt er zu keinem Ziel. Damit sich das ändert, muss der Quick-Button noch verlinkt werden.
Begib dich hierfür in den Bereich deines Shops, zu dem der Button führen soll, und kopiere die URL. In diesem Beispiel ist das ein Kontaktformular zum Widerrufsrecht.
Mehr zum Widerrufsrecht kannst du im Tutorial Widerrufsrecht lesen.
Sobald du die URL kopiert hast, kannst du diese im Eingabefeld Link einfügen. Vergiss anschließend nicht, deine Änderungen zu speichern.
Der Quick-Button kann auf jede beliebige URL zeigen. So kannst du schnell auf Kontaktformulare, Sonderangebote oder sogar YouTube-Videos verlinken.
Quick-Button verlinken Beispiel 1
Quick-Button verlinken Beispiel 2
Manche Button-Designs lassen sich nur sehr schwer mit CSS abbilden. Deshalb gibt es auch die Möglichkeit, ein Bild als Quick-Button zu verwenden. Lösche hierfür den Text des Quick-Buttons und lade das gewünschte Bild hoch.
In diesem Beispiel soll auf einen Artikel mit einem Sonderangebot verlinkt werden. Deshalb wird ein Produktbild des Artikels als Quick-Button verwendet.
Sobald das Bild erfolgreich hochgeladen wurde, muss der Button nur noch gespeichert werden, damit die Änderungen sowohl in der Vorschau als auch im tricoma Shop erscheinen.
Quick-Button mit Bild Beispiel 1
Quick-Button mit Bild Beispiel 2
Noch sieht der neue Quick-Button etwas plump aus. Um dies zu vermeiden, lassen sich auch Quick-Buttons mit Bildern über das Eingabefeld Style gestalten.
In diesem Beispiel: height: 200px; width: 200px; border: 2px solid black;
Quick-Button mit Bild anpassen Beispiel 1
Quick-Button mit Bild anpassen Beispiel 2
Die Reihenfolge der Quick-Buttons lässt sich in den Einstellungen per Drag-and-drop ändern.
Die Änderungen an der Reihenfolge werden automatisch übernommen, ohne dass du auf Speichern klicken musst.
Quick-Buttons Reihenfolge ändern Beispiel 1
Quick-Buttons Reihenfolge ändern Beispiel 2
Erweitertes Styling
Mobile Ansicht
Da Quick-Buttons auf einem Smartphone-Display schnell sehr groß wirken können, steht ein Styling für eine mobile Ansicht zur Verfügung.
Dieser Bereich ist standardmäßig eingeklappt, lässt sich aber per Mausklick öffnen.
Hier kannst du festlegen, bis zu welcher Bildschirmbreite die mobile Ansicht verwendet werden soll. Außerdem kannst du zusätzliches Styling definieren, das ausschließlich in der mobilen Ansicht angewendet wird.
Wichtig: Das Styling der mobilen Ansicht wird zusätzlich zum Standard-Styling angewendet und überschreibt dieses nur bei Konflikten. Das bedeutet, dass das Standard-Styling gegebenenfalls auch in der mobilen Ansicht greift.
Erweitertes Styling Beispiel
Container-Styling
Zusätzlich gibt es jetzt die Möglichkeit, den Container der Quick-Buttons zu gestalten. Dadurch lässt sich beispielsweise die Position verändern, an der die Quick-Buttons angezeigt werden.
Die Einstellung zum Container findest du für die jeweilige Shopseite unter den Einstellungen der einzelnen Quick-Buttons.
Solltest du beim Ausprobieren versehentlich die Darstellung des Containers auf deiner Shopseite beeinträchtigen, kannst du den Standard ganz einfach wiederherstellen. Lösche dazu sämtliches Styling des Containers. Beim Speichern wird automatisch wieder das Standard-Styling hinterlegt.
Wie bei einzelnen Quick-Buttons kannst du auch für den Container ein zusätzliches Styling für die mobile Ansicht festlegen.
Erweitertes Styling Beispiel 2
1 Sollte dieser Bereich fehlen, muss ein Komplettupdate durchgeführt werden.
