Webshopeinstellungen: Wechsel von Webshop Version 1 zu Version 2

Webshopeinstellungen: Wechsel von Webshop Version 1 zu Version 2

Was
Diese Anleitung unterstützt dich dabei, deinen Webshop effizient von Version 1 auf Version 2 umzustellen und dabei einen ansprechenden, funktionalen Online-Auftritt zu sichern.

Wo
Admin: Webshop & App > Webshopeinstellungen.
(Früher unter: Store > Webshopeinstellungen).


Diese Anleitung ist dafür, wenn du deinen Webshop effizient konfigurieren möchtest. Sie bietet dir Schritt-für-Schritt Anweisungen, um von Webshop Version 1 auf Version 2 umzusteigen, und sorgt dafür, dass dein Online-Auftritt sowohl optisch ansprechend als auch funktional ist.


Anmeldung

1. Melde dich in deinem Admin-Bereich an.

2. Gehe unter "Webshop & App" auf "Webshopeinstellungen".



Webshop Version 2

3. Ändere die Einstellungen von "Webshop Version 1" zu "Webshop Version 2".




Grundeinstellungen

4. Trage unter "Webshop Titel" den Namen deines Restaurants ein. Dieser ist der Name des Browser-Tabs, wenn man deinen Webshop öffnet.
Zudem wähle eine "Standartsprache" aus, in der dein Webshop angezeigt werden soll.





5. Hier steht dein "Webshop Titel".





6. In dem Feld "Webshop-Beschreibung" kannst du eine Beschreibung für deinen Webshop reinschreiben. Diese wird auch von den verschiedenen Suchmaschinen genutzt, um deinen Webshop vorzuschlagen.




7. Unter "Logo-Link" kannst du einen Link hinter dein Logo im Webshop hinterlegen, wenn man auf eine bestimmte Seite weitergeleitet werden soll, sobald man auf dein Logo klickt. 

Ein Link für eine Website kann hier ebenfalls unter "Link zur Website" hinterlegt werden.




Farbeinstellungen

8. Öffne nun die Farbeinstellungen.





9. Unter "Farbe für Links" kannst du eine Farbe deiner Wahl für Verlinkungen in deinem Webshop einstellen.
Die "Ecken-Abrundung" gilt für die Button im Webshop. Je höher die Abrundung eingestellt ist, desto runder sind diese.





10. Beispiel: Das "Zurück" ist in diesem Fall eine Verlinkung und bei den Buttons siehst du die Abrundung der Ecken.




11. Entscheide dich nun unter "Farbe für Hintergrund" für eine Hintergrundfarbe und drei "Hauptfarben". Wir empfehlen dir, dich an deinem Logo zu orientieren.




12. Hier ein Beispiel für die erste und zweite Farbe.





13. Ein Beispiel, von der dritten Farbe.





14. Die Hintergrundfarbe betrifft die Farbe hinter den Kacheln, Kästen und dem Warenkorb.





Farbeinstellungen erweiterte Einstellungen

15. Öffne die "erweiterten Einstellungen".




16. Diese "Contentfarben" sind der Kontrast zu den drei Hauptfarben, die du dir ausgewählt hast. Meistens betrifft dies die Schriftfarbe.




17. Beispiele der Contentfarben.
Für die dritte Farbe/Contentfarbe gibt es leider kein Beispiel.





18. Die "Schattenfarbe" ist für den 3D-Effekt.
Im nachfolgenden Bild befindet sich das Beispiel.





19. Beispiel der Schattenfarbe.





20. Die "Farbe für Oberflächen" ist für alle Kacheln und die dazugehörige Kontrastfarbe für z. B. Icons (Symbole) in den Kacheln.

Ein Beispiel befindet sich im nächsten Bild.




21. Beispiel für Oberflächenfarbe und Kontrastfarbe.





22. Die Farbe für "Oberflächen-Variante" ist zum Beispiel für Felder, wo der Kunde etwas eintragen kann.




23. Beispiel für die Oberflächen-Variante und Kontrast Oberflächen-Variante.



Schriften

24. Wähle dir unter "Schriftarten" eine "Standardschriftart" aus und eine "Zusatzschrift" (diese wird nur dann verwendet, wenn du diese auch zuordnest).

Wenn du eine eigene Schriftart verwenden möchtest, lass uns diese bitte zukommen, in "bold" und "regular".




25. Für alle "Überschriften"-Größen kannst du wählen, ob die "Standardschriftart" oder "Zusatzschriftart" verwendet werden soll, auch ob sie "bold" oder "regular" sein soll.

Hier wählst du auch aus, welche der von dir bereits eingestellten Farben (erste, zweite, dritte Farbe) verwendet werden soll.





26. Beispiele für die Überschriften.





27. Für die "Buttons" (Schaltflächen) kannst du die "Schriftgröße", "-art" und "-farbe" ebenfalls auswählen.




28. Beispiel für die Buttons.




29. Die Einstellungen müssen unter "Schriftgrößen- Mobile" für die "Mobile Version" separat noch einmal eingestellt und angepasst werden.


Anpassung von Navigation und Produktdarstellung

Nun kommen wichtige Einblicke zur Anpassung der mobilen und Desktop-Oberflächen deines Webshops, um die Benutzererfahrung und das Engagement zu verbessern. Sie behandelt Änderungen an Kopf- und Fußzeile, die Organisation des Menüs sowie Optionen zur Produktdarstellung, um ein individuell zugeschnittenes Einkaufserlebnis zu ermöglichen. Darüber hinaus wird die Integration von Social-Media- und Tracking-Tools hervorgehoben, um Sichtbarkeit und Analysefähigkeiten zu steigern.


Headerleiste & Banner

30. Unter "Headerleiste & Banner" wird die Kopfzeile (Header) angepasst. Dein Header kann mit "geteilte Kopfzeile" in zwei verschiedenen Farben angezeigt werden (1), du kannst die "Liefer- und Abholzeiten ausblenden" lassen (2) und damit der "Zurück-Pfeil" beschriftet (3) ist, ebenfalls hier aktivieren.

Das "Seitenmenü" gilt nur für den mobilen Webshop, d. h. für die Version deines Webshops, die speziell für mobile Geräte wie Smartphones und Tablets optimiert ist. 




31. Beispiel für die geteilte Kopfzeile.





32. Damit die Warengruppen untereinander im Seitenmenü angezeigt werden, sollte unter "Navigation" das Kästchen "Warengruppen einspaltig anzeigen" angehakt werden.




33. Beispiel: Warengruppen einspaltig.
​





34. Ist das Kästchen für die einspaltigen Warengruppen nicht aktiviert, werden diese im Seitenmenü nebeneinander angezeigt.
​





35. Für dein Seitenmenü kannst du unter "Weitere Seitenmenü-Einträge" deine eigenen Bezeichnungen und Verwendungen festlegen. Trage hierzu einen "Namen" in das entsprechende Feld ein und wähle anschließend die passende Verwendung unter "interner Link".




36. Wenn du auf "weitere Einträge" klickst, kannst du weitere Punkte für dein Seitenmenü (max. 12) hinterlegen und einstellen.




Mobile Bottom Bar

37. Für die "mobile Ansicht" wird hier die "Bottom Bar" (untere Navigationsleiste) angepasst. Du kannst die verschiedenen Icons (Symbole), Funktionen und ihre Reihenfolge selbst auswählen. Es sind ingesamt vier Icons und freie Plätze.




38. Beispiel für die Bottom Bar im mobilen Webshop.




39. Hier können in der Fußzeile (Footer/unterer Bereich) Verlinkungen zu den AGBs, Datenschutz, etc. hinterlegt werden. Dies gilt für den Browser und mobilen Webshop.

Du kannst ebenfalls Links hinterlegen, die auf weitere Webseiten verweisen.




40. Beispiel der Fußzeile.




Startseite

41. Unter dem Punkt "Startseite", kannst du Bilder hinterlegen, die auf der Startseite angezeigt werden. Bitte bedenke, dass für den mobilen Webshop ein anderes Format benötigt wird.

Zudem kannst du einstellen, was als Startseite angezeigt wird, wenn ein Kunde auf deinen Webshop geht (z. B. Startseite mit Inhalten im Kachellayout, Warengruppenvorschau, Artikelvorschau etc.).




42. In unserem Beispiel ist die Kachelansicht aktiviert. Mit dieser kannst du z. B. Artikel oder das Bonussystem bewerben.




43. Die Einstellungen unter "Storefinder und Storeliste" dienen der Vereinfachung des Endkunden bei der Adresseingabe. Damit der Kunde bei einer Abholung z. B. nicht die Adresse oder Postleitzahl eingeben muss, kann dies über eine feste Hinterlegung der Store-Adressen über ein Drop-down-Menü (Auswahlliste) vereinfacht werden.




44. Beispiel einer Drop-down-Auswahlliste.




Artikelansicht

45. Wenn du viele Warengruppen hast, kannst du hier mit dem "Seite mit Warengruppen-Übersicht anzeigen"-Button einen zusätzlichen Warengruppen-Button aktivieren, wo alle Warengruppen neben- und untereinander aufgelistet werden. Die Beschreibung der Warengruppen-Übersicht kannst du hier ebenfalls setzen.

Falls Kunden bei jedem Artikel keinen Kommentar hinterlegen sollen, deaktiviere diese Funktion mit Häkchen bei "Kommentarfeld bei Artikeln deaktivieren".




46. In unserem Beispiel heißt die Warengruppen-Übersicht "Übersicht".




47. Es gibt drei Möglichkeiten unter "Artikeldarstellung", wie deine Artikel angezeigt werden können (3x Kachel nebeneinander, Listenansicht und 1 große, 2 kleine Kachel). Für den mobilen Webshop kann eine andere Ansicht eingestellt werden, wenn man dies möchte. 

Bilder können ebenfalls in der Listenansicht angezeigt werden, wenn das Häkchen dafür gesetzt ist. Damit Artikel, die bereits im Warenkorb sind oder Artikel, die ausverkauft sind, gekennzeichnet werden, aktiviere hierzu die richtigen Buttons.




48. Beispiel Artikelansicht: 3x Kachel nebeneinander + Kennzeichnung der bereits vorhandenen Artikel im Warenkorb.




49. Beispiel Artikelansicht: Listenansicht + Aktivierung der Bilder für die Listenansicht + Kennzeichnung der bereits vorhandenen Artikel im Warenkorb.




50. Beispiel Artikelansicht: 1 große, 2 kleine Kacheln + Kennzeichnung der bereits vorhandenen Artikel im Warenkorb.




51. Du hast die Möglichkeit unter "Toppingdarstellung", deine Toppings in verschiedenen Weisen darzustellen, mit Bildern, nebeneinander, etc. Wenn du den Toppings Bilder hinzugefügt hast, werden diese auch angezeigt, können aber mit dem richtigen Haken deaktiviert werden.
In den folgenden Bildern, zeigen wir dir die Varianten.




52. Beispiel Toppingdarstellung: Elemente der Toppinggruppen nebeinander anzeigen.




53. Beispiel Toppingdarstellung: Artikelname im Header des Toppings anzeigen + Toggle-Button für Removables (abwählbare Artikel) verwenden + Auswahl der Artikelanzahl im Footer des Toppings anzeigen.




Warenkorb & Checkout

54. Der "Warenkorb" wird seitlich neben den Artikeln angezeigt. Solltest du dies nicht wünschen, setze den Haken bei "Warenkorb seitlich eingeklappt". Dann wird dieser nur sichtbar, wenn auf den Warenkorb im Header (Kopfzeile) geklickt wird. Zudem kannst du auch die Bilder der Artikel im Warenkorb anzeigen lassen.




55. Warenkorb: seitlich + Artikelbilder im Warenkorb.




56. Warenkorb: seitlich + Warenkorb seitlich eingeklappt.




57. Du kannst das Icon (Symbol) des Warenkorbes vergrößern und beim Checkout (Bestellabschluss) die Eingabe der Daten ausblenden, wenn sie deines Ermessens nach nicht notwendig sind.




Suche & Filter

58. Wenn du Artikel mit Artikeltags (Artikelfilter) versehen hast, haben die Kunden über die "Filter" die Möglichkeit, sich z. B. nur vegetarische Artikel anzeigen zu lassen (wenn die Artikeleinstellungen korrekt sind). Die Filterfunktion kann auch ausgeblendet werden. Stelle hierzu die Position des Filter-Icons (Filtersymbol) im Drop-down-Menü auf "Filter-Icon ausblenden".

Die verschiedenen Darstellungen siehst du in den nächsten Bildern.




59. Beispiel Filter: links - vor den Warengruppen + Filter mit Checkbox auswählen.




60. Filter: links - vor den Warengruppen + Filteroptionen als Dialog anzeigen.




61. Damit die Kunden in deinem Webshop nach Artikeln suchen können, aktiviere die Funktion über das Häkchen "Suchfunktion für Artikel". Die Suchfunktion taucht dann oben im Header (Kopfzeile) auf.




62. Beispiel Suchfunktion für Artikel.




Profil

63. Unter dem Punkt "Profil" kannst du einstellen, dass man sich in deinem Webshop registrieren und anmelden kann. Zudem kannst du dem eingeloggten Nutzer das Anzeigen von Bildern der letzten bestellten Artikel anzeigen lassen, Adressen ausblenden oder die Einsicht der letzten Bestellungen deaktivieren.

"Subscription ausblenden" (Abonnement) muss aktiviert werden und wenn du keinen SOT (Self-Ordering-Terminal) bei uns hast, muss "SOT-Login" ebenfalls ausgeblendet werden.




Marketing & Social Media

64. Um eine größere Reichweite zu erzielen, kannst du deine Social Media Seiten im Footer (Fußzeile) verlinken. Pflege hierzu die URL deiner Seiten in das entsprechende Feld ein.




65. Beispiel von den Marketing- und Social-Media-Links in der Fußzeile.




66. Wenn du eine App bei dir im Paket hast, kannst du hier die Links zum Google Play-Store und App-Store hinterlegen, damit diese ebenfalls im Footer (Fußzeile) angezeigt werden.

Soll die Installation der App vorgeschlagen werden, sobald man deinen Webshop besucht, hake das Kästchen "App-Installation vorschlagen" an.




Tracking

67. Zum Tracken der Nutzung des Webshops, kannst du hier die verschiedenen Tag-IDs eintragen. Beachte, dass du für die Nutzung von Google-Tags, das Häkchen für die Einwilligung der Nutzung von Google Analytics aktivierst.




68. Bitte setze dich mit den Cookie-Einstellungen auseinander, da du dafür selbst verantwortlich bist.









    • Related Articles

    • Wechsel von EIGENER Webshop-URL zu Webshop Version 2

      Was Diese Anleitung beschreibt die Umstellung von deiner eigenen Webshop-URL zu Webshop Version 2. Wo Admin: Webshop & App > Webshopeinstellungen. Phase I - Konfiguartionsphase Du erhältst zusätzlich zur deiner Webshop Version 1-URL (deinedomain.de) ...

    • Wechsel von SIDES Webshop Version 1-URL zu Webshop Version 2

      Was Diese Anleitung beschreibt die Umstellung von deiner SIDES Webshop-URL Version 1 zu Webshop Version 2. Wo Admin: Webshop & App > Webshopeinstellungen. Admin: Globale Einstellungen > Storeübergreifende Einstellungen > Sonstige Einstellungen > ...

    • Webshopeinstellungen

      Was Der eigene Webshop kann in gewissem Maße individuell angepasst und personalisiert werden. Wo Admin: Store > Webshopeinstellungen. In den Webshopeinstellungen kann der eigene Webshop bis zu einem gewissen Grad individualisiert und angepasst ...

    • Google Analytics einrichten für den Webshop Version 2

      Zur Verbesserung der Benutzerfreundlichkeit haben wir die Navigationsstruktur überarbeitet. Diese kann über "Neue Navigation aktivieren" im Dashboard umgestellt werden. Dabei wurden Begriffe angepasst und Menüpunkte teilweise neu angeordnet. Dieser ...

    • Artikelfilter (Artikeltag) im Webshop

      Zur Verbesserung der Benutzerfreundlichkeit haben wir die Navigationsstruktur überarbeitet. Diese kann über "Neue Navigation aktivieren" im Dashboard umgestellt werden. Dabei wurden Begriffe angepasst und Navigationspunkte teilweise neu angeordnet. ...