Übersicht

Hier kannst du Farbkonfigurationen für deine Formularfelder vornehmen. Diese findest du bspw. auf der Login- und Registrierungs-Seite.

Konfiguration

Gehen wir zunächst auf den ersten, etwas unscheinbaren Abschnitt ein:

Beachte jedoch, dass jedes Theme Duplikat, auch "Child Theme" genannt, die Einstellungen von diesem Theme automatisch vererben wird. Somit nennt man das Ursprungs-Theme, auch "Eltern-" oder "Parent-Theme". Im Duplikat selbst, welches du unter "Inhalte > Themes" anschließend einsehen kannst, kannst du die Vererbungen aufheben und anpassen.

Übersicht

Gute Produktbilder sind im E-Commerce das A und O. Treffe daher in diesem Abschnitt die richtige Konfiguration zur optimalen Darstellung deiner Artikelbilder auf allen Endgeräten.

Konfiguration

Alternativ erreichst du die Theme Konfiguration auch direkt über deinen Verkaufskanal, der sich ebenfalls am linken Rand deiner Administration befindet. Dort angekommen begibst du dich auf den Tab "Theme". Nun gelangst du mit Klick auf "Theme bearbeiten" zur Konfigurations-Übersicht.

Die Theme Konfiguration lässt sich in insgesamt acht Abschnitte untergliedern, auf welche wir nun in den folgenden Lektionen genauer eingehen werden. Jeder dieser acht Abschnitte wird dabei als Tab dargestellt. Diese Tabs bestehen wiederum aus einzelnen Konfigurationsfeldern.

Jedes dieser Felder besitzt im Übrigen ein kleines blaues Fragezeichen als Hilfestellung. Diese Hilfestellung erklärt dir das Feld noch einmal kurz und knapp, sodass du die Dokumentation bei späteren Anpassungen nicht erneut aufsuchen musst, falls du die genaue Funktion vergessen hast. Lass uns nun mit der Konfiguration beginnen! Fangen wir mit dem Tab "Allgemein" an.

Du hast dich für eine unserer Erweiterungen entschieden – Herzlichen Glückwunsch! Wir freuen uns dich als Teil der Community begrüßen zu dürfen.

Theme Nutzer

Für dich sehen viele Shops gleich aus? Nicht mit uns! Mittels modernem und vor allem durchdachtem Design erlebst du mit unserem Theme E-Commerce auf höchstem Niveau.

App Nutzer

Lass uns nicht lange um den heißen Brei reden und starten wir direkt mit der Einrichtung! Am linken Rand kannst du die entsprechende App wählen, um weitere Informationen zur Einrichtung zu erfahren.

Shopware Account verbinden

Nachdem du das Theme erfolgreich über den Shopware Store erworben hast, kannst du dich in die Administration deines Shopware 6 Shops bewegen.

Als nächstes begibst du dich zu "Erweiterungen > Meine Erweiterungen" und klickst auf den Tab "Shopware Account". Hier verbindest du zunächst deinen Shopware Account mit dem Shop.

Installation

Im nächsts Schritt klickst du auf den Tab "Themes". Dort solltest du das Theme wie folgt sehen können:

Mit Klick auf "Installieren" kannst du das Theme nun installieren. Anschließend aktivierst du das Theme über den Schalter-Button neben dem Icon am linken Rand.

Theme zuweisen

Klicke nun auf deinen Verkaufskanal und im oberen Teil der Seite auf "Theme". Nun kannst du mit dem "Theme ändern" Button auf das eben installierte Theme wechseln. Mit Klick auf "Theme übernehmen" bestätigst du den Wechsel. Abschließend drückst du auf "Speichern" am rechten oberen Bildschirmrand.

Übersicht

Konfiguration

Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".

2. Installiere und aktiviere die App.

3. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"

Übersicht

Dieser Abschnitt ermöglicht dir dein eigenes Logo in deinen Shopware Shop zu integrieren. Standardmäßig sind hier Platzhalter definiert, welche du einfach austauschen kannst. Hebe dafür die Bildverknüpfung einfach mit dem "✕" an der rechten Seite auf.

Konfiguration

Übersicht

Die Status-Ausgaben treten bei Interaktion mit dem Online Shop an unterschiedlichen stellen auf. Im Allgemeinen sind dies Meldungen, welche den Besucher über verschiedene Ereignisse in deinem Shopware Shop informieren. Im folgenden siehst du ein paar Beispiele:

Konfiguration

Übersicht

Mit dem Theme lassen sich deine Google Bewertungen vollkommen kostenlos in nur wenigen Schritten integrieren. Standardmäßig werden die Bewertungen in der Top Bar ausgegeben. Im folgenden Video zeigen wir dir alle notwendigen Schritte. Nachfolgend findest du die einzelnen Schritte inkl. Links ebenfalls noch in Textform aufgeführt.

Konfiguration

Übersicht

Die Farben, die du hier hinterlegst spiegeln sich an unterschiedlichen Stellen deines Shops wider.

Konfiguration

Übersicht

Konfiguration

Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".

2. Installiere und aktiviere die App.

3. Öffne die Konfiguration und nehme ggf. Anpassungen vor.

4. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"

AGB und Datenschutz

Stelle sicher, dass du AGB und Datenschutz unter "Einstellungen" > "Stammdaten" hinterlegt hast. Nur so funktionieren die entsprechenden Links im Pop-Up.

Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".

2. Installiere und aktiviere die App.

3. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"

4. Konfiguriere das Pop-Up unter "Kataloge" > "Produkte" > "[Produkt]" > "Spezifikationen" > "Zusatzfelder" > "Produkt (Cross Selling Pop-Up)" auf Produktebene.

Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".

2. Installiere und aktiviere die App.

3. Öffne die Konfiguration und nehme ggf. Designanpassungen vor.

4. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"

Die Einrichtung von Shopware Erweiterungen kann sehr komplex und zeitaufwändig werden. Wenn du Hilfe bei der Konfiguration benötigst, stehen wir dir gerne zur Verfügung. Wir wissen, dass es schwierig sein kann, alle Funktionen und Einstellungen zu verstehen und anzupassen.

Daher möchten wir sicherstellen, dass du die bestmögliche Unterstützung erhältst. Gerne unterstützen wir dich bei der Einrichtung deines Shopware Shops.

Wir möchten sicherstellen, dass unsere Erweiterungen so gut wie möglich funktionieren und deinen Online-Shop reibungslos betrieben werden kann. Wir arbeiten hart daran, unsere Themes und Apps zu optimieren und zu verbessern, um sicherzustellen, dass es deinen Bedürfnissen entspricht.

Allerdings wissen wir auch, dass keine Erweiterung perfekt ist und es manchmal zu Fehlern oder Problemen kommen kann. Wenn du also auf einen Fehler stößt oder Probleme bei der Verwendung hast, zögere bitte nicht, uns zu kontaktieren.

Übersicht

In diesem Abschnitt findest du alles was mit dem Schriftbild deines Online Shops zu tun hat. So kannst du hier Fließtext, Überschriften und Links nach deinen Vorstellungen anpassen.

Konfiguration

Übersicht

Der Layout-Abschnitt umfasst allgemeine Einstellungen, welche in deinem Shop global Anwendung finden.

Konfiguration

Übersicht

Der Footer Abschluss ist der letzte Abschnitt im Footer und bietet dir die nachstehenden Konfigurationsmöglichkeiten.

Grundeinstellungen

Abstände

Farben

Typografie

Häufig macht es Sinn besondere Vorteile bei Produkten hervorzuheben, um dem Kunden die Kaufentscheidung leichter zu gestalten. Die Features Erweiterung des Themes ist hierfür ein nützliches Werkzeug, um konkrete Einzelheiten markant auf der Produkt Detailseite zu präsentieren.

Features kannst du in deiner Shopware Administration unter "[Produkt] > Spezifikationen > Zusatzfelder > Produkt > Features" hinterlegen. Beachte hierbei, dass die einzelnen Features mit einem Semikolon semantisch getrennt werden müssen, damit eine entsprechende Listenansicht generiert werden kann. Eine korrekte Schreibweise sieht dabei wie folgt aus:

Erstes Feature;Zweites Feature;Drittes Feature

Standardmäßig wird vor jedem Listenpunkt ein Haken Icon angezeigt. Dies kannst du in der Theme Konfiguration unter "Buy Box" im Abschnitt "Features" neben weiteren Einstellungsmöglichkeiten auf deine Bedürfnisse anpassen und austauschen.

Übersicht

Neben Galerie, Buy Box und den Tabs, spielt auch das Cross Selling auf der Produkt Detailseite eine entscheidende Rolle, die zum Erfolg deines Online Shops beiträgt. Dir stehen hierfür nachstehende Konfigurationsoptionen zur Verfügung.

Konfiguration

Übersicht

Grundeinstellungen

Farben

Übersicht

Konfiguration

Gerade technische Produkte haben viel Erklärungsbedarf und benötigen häufig Anleitungen oder zusätzliche Informationen in Form von Datenblättern. Aus diesem Grund bietet dir das Theme von Haus aus die Funktion, bis zu vier Dokumente auf Produktebene in Form von Tabs auszuspielen.

Die Mediendateien werden hierfür unter "[Produkt] > Spezifikationen > Zusatzfelder > Datenblätter" verknüpft.

Sobald du eine oder mehrere Mediendateien hinterlegt hast, erscheint auf der Produkt Detailseite ein zusätzlicher Reiter mit dem Namen "Datenblätter". Als Titel für deine Dokumente wird standardmäßig immer der Dateiname herangezogen, mit dem du die Datei in Shopware hochgeladen hast.

Um dies ansprechender für deine Kunden zu gestalten, lässt sich ein Titel für jeden deiner Mediendateien pflegen. So kannst du unter "Inhalte > Medien > [Datei]" unter dem Abschnitt "Metadaten" einen eigenen Titel pflegen.

Voraussetzungen

Breadcrumb Element verwenden

Erstelle zunächst eine Erlebniswelt, in der du das Breadcrumb Element verwenden möchtest. Ziehe im nächsten Schritt einen beliebigen Block, der ein Element in voller Breite enthält, in eine Sektion. Wir verwenden dafür den Standard Shopware Text Block.

Als nächstes kannst du das Text Element innerhalb des Blocks über die zwei Pfeile am rechten oberen Rand des Elements austauschen. Anschließend öffnet sich ein Fenster mit allen verfügbaren Elementen. Wähle in dieser Ansicht das Element "Breadcrumb". Nun wurde das Text Element erfolgreich mit dem Breadcrumb Element ausgetauscht.

Breadcrumb ausblenden

Breadcrumb verschieben

Der Produktbild Hover ist ein beliebtes Feature, dass deinen Shop interaktiver gestaltet und letztendlich die Benutzerfreundlichkeit verbessern kann. So wechselt das Vorschaubild in jeder Produkt Box in deinem Shop auf ein zweites Bild, sobald du mit dem Mauszeiger darüber fährst.

Globale Einstellung

Hover Bild selbst festlegen

Möchtest du abweichend von der globalen Einstellung oder nur für spezifische Produkte eigene Hover Bilder definieren, so kannst du dies ebenfalls noch auf Produktebene festlegen. Unter "[Produkt] > Spezifikationen > Zusatzfelder > Produkt > Hover Bild" kannst du deine eigene Mediendatei verknüpfen.

Positive Bewertungen schaffen Vertrauen. Gerade Google Rezensionen zählen zu den wichtigsten Entscheidungsfaktoren, ob ein Kunde in deinem Online Shop bestellt oder nicht. Sie können nur schwer gefälscht oder gar beschönigt werden. Das wissen auch viele Besucher und verlassen sich häufig auf die Erfahrungen anderer.

Unter "Kataloge > Produkte > [Produkt] > Spezifikationen > Zusatzfelder > Produkt" hast du die Möglichkeit die Beschreibung und den Inhalt des zusätzlichen Tabs individuell für jedes Produkt zu definieren.

Mit dem Feld "Zusätzlicher Tab: Beschreibung" und "Zusätzlicher Tab: Inhalt" kannst du hier die entsprechenden Informationen für deine Produkte hinterlegen.

Übersicht

Konfiguration

Wenn du einen eigenen Online Shop aufbauen möchtest, kann die Welt des E-Commerce für Anfänger oft sehr überwältigend sein. Es gibt viele Fachbegriffe, die du kennen musst, um erfolgreich zu sein. Während du also deinen Online Shop einrichtest und das Theme konfigurierst, solltest du dich mit den entsprechenden Begriffen und Konzepten vertraut machen, damit du genau weißt, was du tust.

Indem du dich mit diesen Begriffen vertraut machst, kannst du sicherstellen, dass du die richtigen Entscheidungen fällst und eine fundierte Entscheidung darüber triffst, welche Tools und Erweiterungen du verwenden solltest, um deine Geschäftsziele zu erreichen.

Also nimm dir Zeit, um diese wichtigen Begriffe zu lernen, während du deinen Shop konfigurierst. Wir sind sicher, dass du dadurch in der Lage sein wirst, einen erfolgreichen und effektiven Shop aufzubauen, der deine Kunden begeistert und deinen Umsatz steigert.

Cross Selling bezieht sich auf die Praxis, Kunden Produkte oder Dienstleistungen zusätzlich zu dem anzubieten, was sie bereits ausgewählt oder in ihrem Warenkorb haben. Ziel des Cross Sellings ist es, den durchschnittlichen Bestellwert zu erhöhen und dem Kunden Produkte zu präsentieren, die seine aktuellen Interessen oder Bedürfnisse ergänzen.

Cross Selling Beispiele für deinen Shop sind:

1. "Kunden kauften auch": Dies zeigt dem Kunden Produkte an, die oft zusammen mit dem ausgewählten Artikel gekauft werden.

2. "Ähnliche Produkte": Ähnliche Produkte, die dem Kunden gefallen könnten, werden angezeigt, um Alternativen vorzuschlagen.

3. "Bundle-Angebote": Hierbei werden Produkte in einem Paket zu einem vergünstigten Preis angeboten. Zum Beispiel könnte ein Kunde, der ein Smartphone kauft, ein Bundle-Angebot für eine Schutzhülle und Kopfhörer sehen.

4. "Häufig zusammen gekauft": Dies zeigt Produkte an, die oft zusammen in den Warenkörben von Kunden landen.

Eine Ankündigungsleiste in einem Online-Shop ist ein horizontales Balkenelement, das normalerweise am oberen Rand der Website platziert wird und wichtige Mitteilungen oder Ankündigungen an die Besucher des Shops kommuniziert. Sie dient dazu, relevante Informationen hervorzuheben und die Aufmerksamkeit der Benutzer auf wichtige Nachrichten oder Aktionen zu lenken.

Die Ankündigungsleiste kann verschiedene Arten von Informationen enthalten, abhängig von den Zielen des Online-Shops. Hier sind einige gängige Verwendungszwecke einer Ankündigungsleiste:

1. Sonderangebote und Rabatte: Online-Shops nutzen oft die Ankündigungsleiste, um laufende Sonderangebote, Rabattaktionen oder Gutscheincodes zu bewerben. Durch das Hervorheben solcher Angebote können Besucher schnell darauf aufmerksam gemacht werden und ermutigt werden, diese zu nutzen.

2. Versand- und Lieferinformationen: Eine Ankündigungsleiste kann auch genutzt werden, um wichtige Informationen über Versandzeiten, Lieferoptionen, Rückgaberichtlinien oder Änderungen des Lieferprozesses aufgrund spezieller Umstände (wie beispielsweise Feiertage oder Lieferschwierigkeiten) mitzuteilen.

3. Neue Produkte oder Kollektionen: Wenn ein Online-Shop neue Produkte oder eine neue Kollektion einführt, kann die Ankündigungsleiste verwendet werden, um die Besucher darauf aufmerksam zu machen und sie zu erkunden. Dies kann dazu beitragen, die Neugier der Benutzer zu wecken und den Umsatz neuer Produkte anzukurbeln.

4. Wichtige Mitteilungen oder Ereignisse: Eine Ankündigungsleiste kann auch für allgemeine wichtige Mitteilungen oder Ereignisse verwendet werden, die den Shop oder die Benutzer betreffen. Dies kann beispielsweise die Ankündigung von Geschäftsschließungen, Wartungsarbeiten an der Website, neue Datenschutzrichtlinien oder andere relevante Informationen umfassen.

Der Checkout ist der letzte Schritt im Einkaufsprozess eines Kunden auf einem Online Shop.

Der Checkout-Prozess kann je nach E-Commerce-Plattform und Online-Shop variieren, aber im Allgemeinen umfasst er die folgenden Schritte:

2. Anmelden bzw. registrieren, häufig Checkout Registrierung genannt

3. Lieferadresse, Zahlungsmethode und Versandoptionen auswählen, häufig Checkout Bestätigung genannt

4. Bestellung überprüfen und schließlich die Bestellung abschließen, häufig Checkout Abschluss genannt

In einem Online-Shop bezieht sich der Begriff "Conversion" auf den Prozess, bei dem Besucher des Shops eine gewünschte Aktion ausführen, die zu einem vordefinierten Ziel führt. Es bezeichnet die Umwandlung eines Website-Besuchers in einen zahlenden Kunden.

Im Kontext eines Online-Shops können verschiedene Arten von Conversions identifiziert werden:

1. Kauf-Conversions: Die gängigste Form der Conversion in einem Online-Shop ist der eigentliche Kauf eines Produkts oder einer Dienstleistung durch einen Besucher. Eine Kauf-Conversion tritt ein, wenn ein Besucher den Checkout-Prozess durchläuft und erfolgreich einen Kauf abschließt.

2. Registrierungs-Conversions: Eine Registrierungs-Conversion tritt auf, wenn ein Besucher des Online-Shops sich für ein Benutzerkonto registriert. Dies kann es dem Besucher ermöglichen, zukünftige Einkäufe einfacher abzuschließen oder von speziellen Angeboten und Funktionen des Online-Shops zu profitieren.

3. Lead-Generierungs-Conversions: In einigen Fällen kann die Conversion darin bestehen, dass ein Besucher seine Kontaktdaten hinterlässt, wie beispielsweise seine E-Mail-Adresse oder Telefonnummer. Dies wird oft genutzt, um potenzielle Kunden zu erfassen und ihnen zukünftig Marketingbotschaften oder Angebote zukommen zu lassen.

4. Warenkorb-Conversions: Eine Warenkorb-Conversion tritt ein, wenn ein Besucher Produkte in den Warenkorb legt, auch wenn der Kauf noch nicht abgeschlossen wurde. Diese Art von Conversion kann ein Hinweis auf ein hohes Kaufinteresse sein und bietet die Möglichkeit, den Besucher dazu zu ermutigen, den Kaufvorgang abzuschließen.

Mit den Shopware Standard Blöcken, kann man mit individuellen Layouts in den Erlebniswelten schnell an seine Grenzen stoßen. Damit du einzigartige Landingpages, Shop-, Kategorie- und Produktseiten erstellen kannst, stellen wir dir mit dem Theme jede Menge neue, durchdachte Blöcke zur Verfügung.

Übersicht aller neuen Blöcke

Übersicht

Das Offcanvas Menü ist das zentrale Element der mobilen Navigation. Hierbei stehen dir die nachfolgenden Konfigurationsoptionen zur Verfügung.

Widgets

Übersicht

Um den Checkout abschließen zu können müssen zunächst die Kundendaten erfasst werden. In diesem Schritt kann der Kunde alle benötigten Daten für ein Kundenkonto hinterlegen oder sich mit seinen bestehenden Login-Daten anmelden. Für die Checkout Registrierung kannst du nachfolgende Optionen konfigurieren.

Konfiguration

Der Express Checkout ist die schnellstmögliche Option eine Bestellung abzuschließen. Verschiedene Zahlungsanbieter wie PayPal, Klarna oder Amazon bieten dir die Möglichkeit Express Checkout Buttons an unterschiedlichen Stellen in deinem Shop zu integrieren. Für die Checkout Registrierung gibt es mit diesem Feld die Option ein passendes Styling anzuwenden, damit die Express Checkout Buttons hervorgehoben werden. Dies kann zu einer verbesserten Conversion Rate in deinem Checkout beitragen.

Übersicht

Dieser Abschnitt enthält Konfigurationsmöglichkeiten, die sich auf das Layout deines gesamten Footers auswirken. Dir stehen dabei die nachfolgenden Optionen zur Verfügung.

Grundeinstellungen

Farben

Übersicht

Eine einfache Navigation ist ein essenzieller Bestandteil eines gut funktionierenden Shops. Sobald tiefere Hierarchiestrukturen entstehen, ist es schnell nicht mehr möglich alles über die Flyout Navigation abzubilden. So gibt es neben dem Unterkategorie-Navigations-Feature auch die Möglichkeit ein Navigations-Element direkt in die Sidebar zu integrieren. Das ganze lässt sich über die Erlebniswelten auf Kategorieseiten einbinden und über die Einstellungsmöglichkeiten in diesem Abschnitt weiter verfeinern.

Konfiguration

In Shopware 6 finden sich an unterschiedlichen Stellen die Anzeigemodi "Beinhalten" (manchmal auch "Strecken" gennant), "Füllen" und "Standard" wieder. Sie wirken sich dabei besonders auf die Darstellung, sowie die Skalierung eines Bildes aus. Damit du die drei Optionen besser verstehst, erklären wir dir die Begriffe nun etwas genauer.

Beinhalten / Strecken

Dieser Anzeigemodus streckt ein Bild auf die maximal verfügbare Breite. Damit das Bild nicht verzerrt wird, behält das Bild immer das ursprüngliche Seitenverhältnis bei.

Füllen

Für diesen Anzeigemodus ist die Angabe einer minimalen Höhe erforderlich. Das Bild streckt sich anschließend in alle Richtungen aus, um den entstehenden Bereich komplett zu füllen. Damit das Bild nicht verzerrt wird, werden die Seiten automatisch vom Browser zugeschnitten.

Standard

Bei diesem Anzeigemodus behält das Bild immer seine ursprüngliche, native Größe bei. Es wird weder gestreckt, noch zugeschnitten.

Eine Top-Bar in einem Online-Shop ist ein horizontales Balkenelement, das normalerweise über dem Header angezeigt wird, aber auch über dem Footer platziert werden kann. Die Top-Bar bietet zusätzlichen Platz für Informationen, Funktionen oder Navigationsmöglichkeiten, die prominent und leicht zugänglich sein sollen.

Die Inhalte und Funktionen, die in einer Top-Bar platziert werden können, variieren je nach den spezifischen Anforderungen des Shops. Hier sind einige gängige Verwendungen der Top-Bar:

1. Versandinformationen: Eine Top-Bar kann verwendet werden, um wichtige Informationen zum Versand zu kommunizieren. Dies können Hinweise über Mindestbestellwert, Lieferland oder ab welchem Bestellwert ein kostenloser Versand möglich ist, sein.

2. Bewertungen: Das Vertrauen deiner Kunden zu gewinnen ist heutzutage wichtiger denn je. Positive Rezensionen sind ein Aushängeschild und können deinem Shop den nötigen Conversion Schub geben. Lerne wie du deine Google Bewertungen über das Theme in deinen Shop einbindest.

3. Kontaktdaten: Eine Top-Bar kann auch genutzt werden, um Kontaktdaten des Online-Shops anzuzeigen, wie z. B. eine Telefonnummer oder eine E-Mail-Adresse. Dies ermöglicht es den Besuchern, schnell Kontakt aufzunehmen, falls sie Fragen oder Anliegen haben.

4. Schnelle Navigation: Eine Top-Bar kann als Navigationsleiste dienen, um den Benutzern den Zugriff auf wichtige Seiten des Online-Shops zu ermöglichen. Hier können Links zur Kontaktaufnahme, Standort eines Ladengeschäfts oder deinem Blog platziert werden.

Die Sidebar kann als zentrales Navigations- und Filterelement in deinem Shopware Shop genutzt werden. Die Sidebar kann dazu beitragen, die Benutzerfreundlichkeit zu steigern. Gerade häufig genutzte Filter kann man mit dem Theme noch präsenter gestalten und automatisch aufgeklappt darstellen.

Die Filter selbst angelegter Eigenschaften kannst du unter "Kataloge > Eigenschaften > [Eigenschaft] > Zusatzfelder > Eigenschaft > Sidebar-Filter im Listing geöffnet darstellen" konfigurieren.

Hersteller-, Bewertung- und Preisfilter sind von Shopware vorgegebene Filter. Diese lassen sich übrigens über das Listing-Element der Erlebniswelt aktivieren bzw. deaktivieren:

Möchtest du diese jedoch ebenfalls aufgeklappt darstellen, kannst du die Einstellung direkt über die Theme Konfiguration vornehmen. Unter der Sektion "Sidebar" der Filter kannst du den Zustand nach deinen Wünschen anpassen.

Im E-Commerce bezieht sich der Begriff "Footer" auf den unteren Teil deines Shops, der im Theme auf jeder Seite angezeigt wird. Einzige Ausnahme ist hierbei der Checkout.

Der Footer enthält in der Regel Links zu rechtlichen Informationen wie Impressum, Datenschutzerklärung, Widerrufsrecht, Versand- und Zahlungsbedingungen und AGB, Kontaktinformationen des Online-Shops wie Adresse, Telefonnummer und E-Mail-Adresse sowie Links zu Social-Media-Profilen.

Der Footer wird oft als "Abschluss" des Shops betrachtet und kann auch zusätzliche Navigationslinks und Quick-Links zu bestimmten Seiten oder Funktionen des Shops enthalten. Der Footer ist normalerweise weniger auffällig als der Header, da er nicht so prominent platziert ist, aber er ist dennoch ein wichtiger Bestandteil der Benutzerfreundlichkeit des Online Shops.

Ähnlich wie beim Header ist auch der Footer ein wichtiger Bestandteil der responsiven Webgestaltung. Der Footer kann auf kleineren Bildschirmen wie auf mobilen Geräten anders dargestellt werden als auf Desktop-Computern, z.B. durch Zusammenfassung der Links in einer Dropdown-Liste oder durch Stapelung der Elemente.

Widgets beziehen sich in deinem Shopware Shop bspw. auf "Sprachschalter", "Währungsschalter" und "Service Menü". Diese bieten verschiedene Funktionen oder Elemente in deinem Shop, die dazu dienen, die Benutzerfreundlichkeit und die Anpassungsmöglichkeiten für die Nutzer zu verbessern. Hier ist eine Erklärung für jeden Begriff:

1. Sprachschalter: Ein Sprachschalter ist eine Funktion in einem Online Shop, die es den Nutzern ermöglicht, die Anzeigesprache der Website zu ändern. Dies ist besonders wichtig für Shops, die international ausgerichtet sind und Kunden aus verschiedenen Ländern ansprechen möchten. Durch den Sprachschalter können Benutzer die Website in ihrer bevorzugten Sprache anzeigen lassen, was die Benutzererfahrung verbessert und die Kommunikation erleichtert.

2. Währungsschalter: Ein Währungsschalter ist eine Funktion, die es den Nutzern ermöglicht, die angezeigte Währung im Online Shop zu ändern. Dies ist hilfreich für internationale Kunden, die die Preise in ihrer eigenen Währung sehen möchten. Der Währungsschalter aktualisiert die Preise und zeigt sie in der ausgewählten Währung an, wodurch potenzielle Missverständnisse oder Unannehmlichkeiten vermieden werden.

3. Service Menü: Das Service Menü ist ein Navigations- oder Dropdown-Menü in einem Online Shop, das verschiedene Links und zusätzliche Funktionen enthält, die über den eigentlichen Produktverkauf hinausgehen. In diesem Menü können Nutzer auf verschiedene Kundendienstoptionen zugreifen, wie zum Beispiel Rückgabe- und Umtauschrichtlinien, Kontaktinformationen des Kundenservice, FAQs, Versandinformationen und mehr. Das Service Menü trägt dazu bei, dass Kunden leichter Informationen finden und Unterstützung erhalten können.

Im E-Commerce bezieht sich der Begriff "Header" auf den oberen Teil deines Shops, der im Theme auf jeder Seite angezeigt wird. Einzige Ausnahme ist hierbei der Checkout.

Der Header wird im Theme in vier Komponenten gegliedert:

1. Die Top Bar

2. Der eigentliche Header mit Shop-Suche, Logo oder Namen des Online-Shops, sowie wichtigen Aktionen wie Merkzettel, Kundenaccount oder Warenkorb-Symbol

3. Das Navigationsmenü, welches den Besucher zu unterschiedlichen Kategorien des Online Shops führt.

4. Die Ankündigungsleiste

In der Regel ist der Header auch ein wichtiger Bestandteil der responsiven Ausgestaltung deines Shops. Das bedeutet, dass der Header auf kleineren Bildschirmen wie auf mobilen Geräten anders dargestellt wird als auf Desktop-Computern. Auf mobilen Geräten können Teile des Headers beispielsweise in ein Menüsymbol umgewandelt werden, das angeklickt werden kann, um das vollständige Menü anzuzeigen.

Eine Breadcrumb in einem Online-Shop ist eine Navigationshilfe in Form einer hierarchischen Anzeige von Links, die den Pfad oder die Route anzeigen, die der Benutzer genommen hat, um zu einer bestimmten Seite zu gelangen. Die Breadcrumb-Navigation dient dazu, die Orientierung des Benutzers auf der Website zu verbessern, insbesondere wenn es sich um eine umfangreiche Website mit vielen Seiten und Produktkategorien handelt.

Die Breadcrumb wird normalerweise oben auf der Seite angezeigt und zeigt den hierarchischen Pfad der aktuellen Seite an, beginnend von der Hauptkategorie des Shops bis zur aktuellen Seite. Jeder Link in der Breadcrumb ist anklickbar und führt den Benutzer zurück zu der entsprechenden Seite oder Kategorie.

In dem oben ersichtlichen Beispiel zeigt die Breadcrumb dem Benutzer, dass er von der Kategorie "Katzenmöbel" schließlich zur spezifischen Kategorie für "Wandliegen" navigiert hat.

Die Breadcrumb-Navigation bietet mehrere Vorteile:

1. Orientierung: Sie hilft dem Benutzer, sich auf der Website zurechtzufinden, insbesondere wenn es viele Produkte oder Kategorien gibt. Der Benutzer kann leicht zur vorherigen Ebene der Hierarchie zurückkehren.

2. Vertrauen: Die Breadcrumb gibt dem Benutzer das Vertrauen, dass er den Pfad zurückverfolgen kann, den er genommen hat, und erleichtert es ihm, zu vorherigen Seiten zurückzukehren, wenn er seine Meinung ändert.

3. SEO: Suchmaschinen wie Google verwenden oft Breadcrumb-Strukturen, um die Hierarchie und Navigation einer Website besser zu verstehen. Dies kann sich positiv auf die SEO-Rankings auswirken.

4. Barrierefreiheit: Breadcrumbs sind auch für Menschen mit Behinderungen von Vorteil, da sie eine zusätzliche Navigationsmethode bieten.

Der Warenkorb (auch als Einkaufswagen, Shopping Cart oder Cart bezeichnet) ist ein virtueller Behälter in einem Online-Shop, in dem Besucher Produkte sammeln können, die sie kaufen möchten. Er stellt eine temporäre Sammlung von ausgewählten Artikeln dar, die der Kunde während des Einkaufens zusammenstellen kann, bevor er den Kauf abschließt.

Der Warenkorb ermöglicht es den Besuchern, ihre Einkäufe zu verwalten, die Anzahl der gewünschten Artikel anzupassen, Preise zu überprüfen und sich einen Überblick über den Gesamtbetrag ihres Einkaufs zu verschaffen. Die Funktion des Warenkorbs ist in der Regel in den meisten Online-Shops vorhanden und bietet den Benutzern eine komfortable Möglichkeit, ihre Einkäufe zu organisieren und den Bestellvorgang zu vereinfachen.

Typischerweise enthält der Warenkorb folgende Elemente:

1. Produktliste: Der Warenkorb zeigt eine Liste der ausgewählten Produkte an, normalerweise mit Produktbildern, Namen, Preisen, Mengen und gegebenenfalls Variationen wie Größe oder Farbe.

2. Mengenanpassung: Der Benutzer kann die Anzahl der einzelnen Produkte im Warenkorb erhöhen oder verringern, um die gewünschte Menge festzulegen.

3. Gesamtsumme: Der Warenkorb zeigt die Gesamtsumme aller ausgewählten Produkte an, einschließlich etwaiger Rabatte oder Versandkosten. Dies gibt dem Benutzer eine Übersicht über den finanziellen Aspekt seines Einkaufs.

4. Entfernen von Produkten: Der Benutzer kann Produkte aus dem Warenkorb entfernen, falls er seine Auswahl ändern oder Artikel löschen möchte.

5. Weiter zur Kasse: Der Warenkorb bietet eine Schaltfläche oder einen Link, um den Benutzer zum Checkout-Prozess weiterzuleiten, um den Kauf abzuschließen.

Eine Sidebar in einem Online-Shop ist ein vertikales Bereichselement, das sich in der Regel an der linken Seite des Hauptinhalts oder der Produktliste befindet. Die Sidebar enthält im Shopware Kontext zusätzliche Links, Filteroptionen, Widgets oder Navigationsmenüs, um die Benutzererfahrung und die Interaktion im Shop zu verbessern.

Dies sind die häufigsten Elemente und Funktionen, die in einer Sidebar zu finden sind:

1. Kategorien und Filter: Die Sidebar kann Kategorien oder Produktfilter anzeigen, die es dem Benutzer ermöglichen, die Produktliste nach bestimmten Kriterien wie Kategorie, Preis, Marke, Größe, Farbe und mehr zu filtern. Dies erleichtert es den Benutzern, gezielt nach bestimmten Produkten zu suchen.

2. Angebote und Werbeaktionen: Die Sidebar kann verwendet werden, um Sonderangebote, Rabatte oder Werbeaktionen hervorzuheben. Dies kann dazu beitragen, die Aufmerksamkeit der Benutzer auf laufende Aktionen zu lenken.

Der Hover Effekt in einem Online-Shop bezieht sich auf eine Designfunktion, bei der eine Aktion oder visuelle Veränderung auftritt, wenn ein Benutzer mit dem Mauszeiger über ein Element, wie zum Beispiel einen Button oder einen Link, fährt.

Der Hover Effekt wird verwendet, um die Benutzerinteraktion und das visuelle Feedback zu verbessern. Wenn der Benutzer mit dem Mauszeiger über ein Element schwebt, kann eine Reihe von Reaktionen ausgelöst werden. Hier sind einige häufige Arten von Hover Effekten in deinem Shopware Shop:

1. Farbänderung: Das Element kann seine Farbe ändern, um anzuzeigen, dass es interaktiv ist oder auf den Mauszeiger reagiert. Dies kann beispielsweise dazu dienen, einen Button hervorzuheben oder auf eine aktive Verknüpfung hinzuweisen.

2. Animation: Bei einem Hover Effekt können animierte Effekte auftreten, wie beispielsweise das Ein- und Ausblenden von Informationen oder das Verschieben von Elementen. Diese Animationen können dem Benutzer visuelles Feedback geben und die Interaktivität des Elements betonen.

3. Vergrößerung oder Zoom: Bei Produkten kann der Hover Effekt dazu verwendet werden, ein vergrößertes Bild des Produkts anzuzeigen, wenn der Benutzer mit dem Mauszeiger über das Produktbild fährt. Dies ermöglicht es dem Benutzer, das Produkt genauer zu betrachten und Details zu erkennen. Diese Funktion findest du bspw. auf der Produkt Detailseite.

4. Schatten oder Hervorhebung: Ein Element kann einen Schattenwurf erhalten oder hervorgehoben werden, wenn der Benutzer mit dem Mauszeiger darüber schwebt. Dadurch wird das Element betont und hebt sich visuell von anderen Elementen ab.

Übersicht

Das Such Overlay ist ein temporäres Suchfeld oder ein Suchfenster, das über den aktuellen Inhalt der Seite gelegt wird. Es ermöglicht dem Benutzer, direkt auf der aktuellen Seite nach Inhalten oder Produkten zu suchen, ohne die Seite zu verlassen.

Das Overlay verschwindet, wenn die Suche abgeschlossen ist oder der Benutzer es schließt. Es verbessert die Benutzerfreundlichkeit, da es eine schnelle und unkomplizierte Möglichkeit bietet, nach gesuchten Informationen zu suchen, ohne die Navigation deines Shops zu unterbrechen.

Konfiguration

Wiederkehrende Fragen von Kunden zu Produkten, Versand- und Zahlungsarten oder anderen Themen können schnell zur Regelmäßigkeit werden. Aus diesem Grund liefert dir das Theme ein vollumfängliches FAQ Modul. Wie du deine eigenen FAQs anlegst zeigen wir dir in diesem Beitrag.

FAQs anlegen

Im ersten Schritt müssen die Fragen und die dazugehörigen Antworten formuliert werden. Dazu steht dir im Theme das entsprechende Modul unter "Inhalte > FAQs & FAQ Gruppen > FAQs" zur Verfügung. Lege mit dem Button "FAQ anlegen" in der rechten oberen Ecke einen ersten FAQ an. In der darauf folgenden Maske steht dir das Feld "Frage" und "Antwort" zur Verfügung.

Sowohl Frage als auch Antwort kann über den Sprachschalter in der rechten oberen Ecke in all deine Shop Sprachen übersetzt werden. Es lassen sich dabei beliebig viele FAQs erstellen.

FAQ Gruppe anlegen

FAQs müssen immer in einer FAQ Gruppe zusammengefasst werden. Möchtest du unterschiedliche FAQs an unterschiedlichen Stellen in deinem Shop ausgeben, benötigst du daher auch mehrere unterschiedliche FAQ Gruppen.

Eine FAQ Gruppe kannst du unter "Inhalte > FAQs & FAQ Gruppen > FAQ Gruppen" erstellen. Über den Button "FAQ Gruppe anlegen" kannst du in der darauf folgenden Maske zunächst einen Namen für deine FAQ Gruppe vergeben. Dieser Name lässt sich später optional als Überschrift zur Gruppe anzeigen.

Sobald du den Namen deiner FAQ Gruppe eingegeben und gespeichert hast, steht dir im nächsten Schritt das Auswahlfeld "FAQs" zur Verfügung. Hier lassen sich alle zuvor angelegten FAQs mit der FAQ Gruppe verknüpfen. Wähle daher alle FAQs die du in dieser Gruppe zusammenfassen möchtest und bestätige deine Eingabe mit dem "Speichern" Button in der rechten oberen Ecke. Auch hier lässt sich der Name deiner FAQ Gruppe in all deine Shop Sprachen über den Sprach Schalter in der rechten oberen Ecke übersetzen.

FAQ Gruppe in der Erlebniswelt verwenden

Erstellen wir daher zunächst unser Erlebniswelten Layout. Welchen Layout-Typen du dabei verwendest, bleibt vollkommen dir überlassen. Im ersten Schritt ziehen wir einen beliebigen Block unserer Wahl in die Sektion. In diesem Beispiel verwenden wir den Standard Shopware Text Block.

Nachdem sich der Text Block in der Sektion befindet, lässt sich das Text Element über die zwei Pfeile in der rechten oberen Ecke innerhalb des Block austauschen. Anschließend öffnet sich ein Fenster mit allen verfügbaren Elementen. Hier wählen wir das Element "FAQ Gruppe".

Nachdem sich das Element ausgetauscht hat, können wir erneut mit der Maus über das Element fahren. Hier erscheint nun neben den zwei Pfeilen ebenfalls ein Zahnrad. Mit Klick auf das Zahnrad öffnen sich die Element-Einstellungen der FAQ Gruppe.

An dieser Stelle lässt sich nun mit dem Schalter "FAQ Gruppen Name anzeigen" der vergebene Name im FAQ Gruppen Modul ein- bzw. ausblenden. Die FAQ Gruppe selbst können wir im nächsten Auswahlfeld "FAQ Gruppe" verknüpfen. Hier stehen uns alle im FAQ Gruppen Modul angelegten Gruppen zu Verfügung. Nachdem wir mit den Einstellungen fertig sind bestätigen wir unsere Eingaben mit dem "Fertig" Button in der rechten unteren Ecke des Fensters. Nun wird auch in der Erlebniswelt selbst der Name unserer FAQ Gruppe über dem Element angezeigt, sofern die Einstellung "FAQ Gruppen Name anzeigen" aktiv geschaltet ist.

Wissenswertes

Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".

2. Installiere und aktiviere die App.

3. Öffne die Konfiguration und aktiviere die gewünschten Funktionen.

4. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"

Varianten URLs generieren

1. Begebe dich zu "Einstellungen" > "Shop" > "SEO"

2. Füge folgendes Template in das Feld "Produktdetailseite" ein und speichere deine Eingaben:

Du kannst die Vorlage selbstverständlich noch an deine Bedürfnisse anpassen.

1. Aktualisiere deinen Index unter "Einstellungen" > "System" > "Caches & Indizes" > "Indizes aktualisieren".

Sitemap URLs

Aktualisiere deinen Index unter "Einstellungen" > "System" > "Caches & Indizes" > "Indizes aktualisieren".

Canonical URLs

Hierfür ist keine weitere Konfiguration nötig.

Weitere Optionen

Globale Einstellungen aus der App Konfiguration wie die Verlinkung aus Produkt Boxen, sowie die Canonical-URL Setzung kannst du unter "Kataloge" > "Produkte" > "[Produkt]" > "Spezifikationen" > "Zusatzfelder" > "Produkt (SEO URL Manager)" auf Produktebene überschreiben.

FAQ's

Übersicht

Produkte pro Zeile

Produkte pro Zeile (Sidebar-Layout)

Abstände

Eine Produkt Detailseite (auch als Produktseite, Artikelseite oder Einzelproduktseite bezeichnet) ist eine spezifische Seite in einem Online-Shop, auf der detaillierte Informationen über ein bestimmtes Produkt angezeigt werden. Sie bietet den Besuchern alle relevanten Informationen, um eine fundierte Kaufentscheidung zu treffen.

Die Produkt Detailseite enthält normalerweise folgende Elemente:

1. Produktbild(er): Auf der Produkt Detailseite werden hochwertige Bilder des Produkts angezeigt, um den Besuchern eine visuelle Vorstellung davon zu geben, wie das Produkt aussieht. Oft werden verschiedene Ansichten oder Zoom-Funktionen bereitgestellt, um die Details genauer zu betrachten.

2. Produktdetails: Es werden umfassende Informationen über das Produkt bereitgestellt, wie Produktname, Marke, Modell, Material, Abmessungen, Gewicht, Farbe und andere technische Spezifikationen. Zusätzliche Produktattribute wie Verfügbarkeit, Lieferzeit und Kundenbewertungen können ebenfalls angezeigt werden.

3. Produktbeschreibung: Eine Beschreibung des Produkts wird bereitgestellt, um den Besuchern weitere Informationen über die Eigenschaften, Funktionen, Verwendungsmöglichkeiten und Vorteile des Produkts zu geben. Eine gute Produktbeschreibung soll die Besucher überzeugen und ihnen helfen, zu verstehen, warum das Produkt für sie relevant ist.

4. Preisinformationen: Der Preis des Produkts wird auf der Produkt Detailseite angezeigt, möglicherweise zusammen mit Rabatten, Angeboten oder anderen preisbezogenen Informationen. Gegebenenfalls können auch Optionen für verschiedene Varianten des Produkts, wie Größe oder Farbe, angezeigt werden, die den Preis beeinflussen können.

6. Verwandte Produkte oder Empfehlungen: Oft werden auf der Produkt Detailseite auch verwandte Produkte oder Empfehlungen angezeigt, die dem Benutzer weitere Optionen bieten oder alternative Produkte vorschlagen, die für ihn von Interesse sein könnten.

Eine Kategorieseite in einem Online-Shop ist eine Seite, auf der Produkte basierend auf ihrer Kategorie oder ihres Typs gruppiert und präsentiert werden. Sie dient dazu, Besuchern des Online-Shops eine strukturierte Übersicht über die verfügbaren Produktkategorien zu bieten und ihnen die Navigation und Auswahl zu erleichtern.

Die Kategorieseite kann verschiedene Elemente enthalten, um die Navigation und das Browsen zu verbessern. Hier sind einige häufige Merkmale einer Kategorieseite:

1. Filter- und Sortieroptionen: Um die Suche nach Produkten weiter zu verfeinern, bietet eine Kategorieseite oft Filter- und Sortieroptionen. Benutzer können zum Beispiel nach Preis, Marke, Größe, Farbe oder anderen spezifischen Merkmalen filtern, um die Auswahl entsprechend ihren Präferenzen einzuschränken.

2. Seitenzahlen oder Scroll-Funktion: Wenn die Kategorieseite eine große Anzahl von Produkten enthält, kann die Darstellung auf mehrere Seiten aufgeteilt sein. Der Benutzer kann zwischen den Seiten wechseln oder kontinuierlich scrollen, um alle verfügbaren Produkte in der Kategorie zu sehen.

3. Anzeige von Produktattributen: Neben den grundlegenden Informationen zu jedem Produkt können Kategorieseiten auch spezifische Produktattribute oder -merkmale anzeigen. Zum Beispiel können Farboptionen, Hersteller oder Kundenbewertungen angezeigt werden, um den Benutzern zusätzliche Informationen zu bieten. Erfahre wie du die unterschiedlichen Farboptionen deiner Produkte auf Kategorieseiten mit dem Theme anzeigen kannst.

Übersicht

Die Breadcrumb ist ein grundlegendes Navigationselement auf deinen Kategorie- und Produkt Detailseiten. So kann sie einerseits über die nachfolgenden Konfigurationsfelder weiter personalisiert werden. Andererseits kann man sie jedoch auch über das Breadcrumb Feature des Themes seitenspezifisch verschieben oder auch komplett deaktivieren.

Typografie

Abstände

Farben

Übersicht

In diesem Abschnitt kannst du globale Einstellungen für deinen gesamten Checkout Prozess vornehmen. Alle Konfigurationsoptionen wirken sich dabei gleichermaßen auf Registrierung, Bestätigung und Abschluss aus.

Grundeinstellungen

Medien

Farben

Übersicht

Grundeinstellungen

Typografie

Farben

Einheitliche Icons ziehen sich in einem roten Faden durch jeden guten Online Shops. Mit unserem Download erhältst du kostenlose Icons für die gängigsten Zahlungs- und Versandarten in passendem Design:

Eine guter Shop zeichnet sich durch eine intuitive und gut strukturierte Flyout Navigation aus. Da aber nicht jeder Shop seine Flyouts komplett mit Kategorien füllen kann, helfen wir an dieser Stelle mit dem Theme etwas nach. So kannst du mit nur wenigen Klicks eine schickes Flyout erstellen.

Grundsätzlich hast du fünf Möglichkeiten um dein Flyout aufzupeppen:

1. Kategorien

2. Icons

3. Strukturkategorien & Links

4. Bilder mit Untertitel

5. Beschreibung

1. Kategorien

Das erste und womit auch offensichtlichste sind die ganz normalen Kategorien. Diese kannst du wie gewohnt im Admin erstellen.

Solltest du bisher noch keine Berührungspunkte mit den Kategorien in Shopware 6 gemacht haben empfehlen wir dir zunächst dich mit den Basics zu befassen. Folgendes Video eignet sich hierfür hervorragend:

2. Icons

Für jede Kategorie im Flyout lässt sich ein eigenes Icon hinterlegen. Diese werden automatisch vor dem Kategorienamen platziert.

Das Icon selbst kannst du unter "Kataloge > Kategorien > [Kategorie] > Tab Allgemein > Zusatzfelder > Flyout > Icon" hinterlegen.

3. Strukturkategorien & Links

Sollte dein Flyout jedoch immer noch relativ leer sein, hast du mit dem Anlegen von Strukturkategorien & Links eine von vier weiteren Möglichkeiten dein Flyout weiter aufzufüllen.

Jeder Shop hat Bestseller oder beliebte Kategorien. Wieso diese also nicht direkt dem Besucher über die Navigation präsentieren? Strukturkategorien & Links eignen sich hierfür ausgezeichnet. Du erstellst mit dieser Methode sinnvolle interne Links, ohne deinen Shop unnötig mit Dummy Kategorien aufzublasen.

Wie gehen wir also am besten vor? Im Prinzip legst du die einzelnen Elemente exakt wie die Kategorien aus Schritt 1 an. Es gibt nur einen entscheidenden Unterschied. Nehmen wir hierzu den Screenshot von oben genauer unter die Lupe:

So kann es sich bei "Accessoires & Zubehör" um ein Strukturelement handeln. Sie ist selbst nicht aufrufbar und dient, wie der Name schon vermuten lässt, nur zur Struktur. Daher ändern wir bei dieser Kategorie den Kategorietyp zu "Strukturelement / Einstiegspunkt":

Nun folgen noch die einzelnen Links unterhalb des Strukturelements "Accessoires & Zubehör". Diese Kategorien versehen wir nun mit dem Kategorietyp "Link". Direkt darunter öffnet sich nun eine weitere Konfigurations-Möglichkeit für den benutzerdefinierten Link:

Hierbei verwenden wir für Produktverlinkungen den Linktyp "Intern", die Entität "Produkt" und das entsprechende Produkt. Wie du siehst kannst du sowohl interne als auch externe Verlinkungen setzen. Neben Produktverlinkungen kannst du aber auch Kategorien und Landingpages verlinken. Dir steht also eine breite Vielfalt an Möglichkeiten offen.

4. Bilder mit Untertitel

Zusätzlich bietet dir das Theme noch die Möglichkeit bis zu drei verlinkbare Bilder inkl. Untertitel im Flyout einzubinden. Hierbei eigenen sich auch wieder besonders Produkt- oder Kategorieverlinkungen mittels Szenebilder. Die Konfiguration findest du hierfür unter "Kataloge > Kategorien > [Kategorie] > Tab Allgemein > Zusatzfelder > Flyout".

Für jedes der drei Bilder gibt es folgende drei Konfigurationsmöglichkeiten:

Sobald ein Bild hinterlegt ist, wird es entsprechend im Flyout angezeigt. Links und Untertitel sind dabei optional.

5. Beschreibung

Eine kurze Kategoriebeschreibung inkl. Call-To-Action ist eine weitere Möglichkeit dein Flyout schicker zu gestalten. Das ganze ist auch super simpel! Verwende hierzu einfach den Editor "Beschreibung" in der jeweiligen Hauptkategorie und der Inhalt wird automatisch im Flyout ausgegeben.

Übersicht

Filter sind ein essenzieller Bestandteil von Kategorieseiten. Sie ermöglichen es dem Besucher die vorgeschlagenen Produkte auf eine von ihm definierte Anzahl an Kriterien zu reduzieren. Dabei gibt es im Shopware Standard über die Erlebniswelten zwei verschiedene Möglichkeiten deine Filter darzustellen. Standardmäßig über dem Listing oder links daneben innerhalb der Sidebar. Zusätzlich lassen sich spezifische Filter über ein Theme Feature und die nachstehende Konfiguration standardmäßig immer geöffnet darstellen.

Grundeinstellungen

Gerade bei vielen Filteroptionen ist es für den Besucher häufig übersichtlicher, wenn man Optionen, die keine Ergebnisse liefern, deaktiviert.

Mit der nachfolgenden Theme Konfigurationsoption hast du die Möglichkeit deaktivierte Filteroptionen aber auch komplett auszublenden. Dies erleichtert dem Besucher sich bei vielen Filteroptionen besser zurecht zu finden. Hierbei werden nur noch möglich kombinierbare Optionen zur Verfügung stehen. Die Filterkombinationen werden dabei immer Ergebnisse liefern.

Farben

Sidebar

In dieser Sektion kannst du u.A. festlegen die standardmäßigen Shopware Filter "Hersteller", "Bewertung" und "Preis" aufgeklappt darzustellen. Selbst angelegte Filter lassen sich über ein Theme Feature geöffnet darstellen.

Übersicht

Die Footer Zeile befindet sich unterhalb der Spalten und kann auf ähnliche Weise konfiguriert werden. So bietet dir die Theme Konfiguration eine zusätzliche Möglichkeit deinen Footer ganz auf deine Bedürfnisse zuschneiden.

Elemente zuweisen

Für die Footer Zeile stehen dir vier Elemente zur Verfügung:

Über die nachfolgenden Felder kannst du die gewünschten Elemente entsprechend deiner Vorstellung und Reihenfolge verknüpfen. Das erste und zweite Element wird dabei auf der linken Seite und das dritte und vierte Element auf der rechten Seite der Zeile dargestellt. Mit der Option "Keins" kannst du ein oder mehrere Element(e) leer lassen, sodass du nicht gezwungen bist alle verfügbaren Elemente zu verwenden. Beachte dabei, dass jedes Element nur einmal in der Footer Zeile angezeigt werden kann.

Zahlungs- und Versandarten

Farben

Abstände

Übersicht

Grundeinstellungen

Medien

Farben

Typografie

Übersicht

In diesem Tab lässt sich individueller Code im Theme integrieren. Häufig erfordern Bewertungssiegel oder Trackingdienste einen eingebunden <script> Tag, damit die Anwendung korrekt funktioniert. Aber auch wenn man eigenen CSS Code integrieren möchte, hilft dir dieser Abschnitt weiter.

Einstellungen

Übersicht

Die Tabs enthalten alle wichtigen Produktinformationen. Dazu gehören u.A. Beschreibung und Eigenschaften, aber auch die verfügbaren Zahlungs- und Versandarten in deinem Shop. Hierbei bietet dir das Theme unterschiedliche Konfigurationsmöglichkeiten deine Tabs auf deine Bedürfnisse zuzuschneiden.

Grundeinstellungen

Qualitätssiegel

Über die nachfolgende Konfiguration lassen sich bis zu zwei Qualitätssiegel unterhalb der Produkt Beschreibung integrieren. Zu jedem Qualitätssiegel lässt sich dabei ein passender Text pflegen.

Nur für die Positions-Einstellung "Buy Box"

Nur für die Positions-Einstellung "Unterhalb der Galerie"

Typografie

Farben

Die Flyout Navigation in einem Online-Shop ist eine spezielle Art von Navigationsmenü, das in der Regel in einer horizontalen oder vertikalen Leiste angezeigt wird, wenn der Benutzer mit dem Mauszeiger über einen bestimmten Navigationspunkt oder eine Schaltfläche fährt oder klickt. Das Flyout-Menü "fliegt" oder "klappt" aus, um zusätzliche Unterpunkte oder Optionen anzuzeigen, die dem Benutzer eine detailliertere Navigation ermöglichen.

Hier sind einige wichtige Merkmale und Verwendungszwecke einer Flyout Navigation:

1. Erweiterte Navigation: Flyout-Menüs werden oft verwendet, um die Navigation zu erweitern und dem Benutzer eine Hierarchie von Links oder Optionen anzuzeigen. Dies ist besonders nützlich, wenn ein Online-Shop viele Kategorien oder Unterkategorien hat.

2. Platzersparnis: Da Flyout-Menüs ausgeblendet werden, wenn sie nicht benötigt werden, sparen sie Platz auf der Webseite und ermöglichen eine sauberere Benutzeroberfläche.

3. Mehrebenen-Navigation: Flyout-Menüs unterstützen häufig mehrere Ebenen von Unterpunkten. Benutzer können über einen Hauptpunkt fahren, um eine Liste von Unterpunkten anzuzeigen.

4. Schnelle Navigation: Flyout-Menüs ermöglichen es Benutzern, schnell zwischen verschiedenen Bereichen der Website zu wechseln, ohne die Hauptnavigation zu verlassen.

5. Visuelles Feedback: Die Anzeige eines Flyout-Menüs beim Überfahren eines Navigationspunkts mit dem Mauszeiger bietet dem Benutzer visuelles Feedback, dass es weitere Optionen gibt.

Beispiele für die Verwendung von Flyout Navigationen in einem Online-Shop können das Anzeigen von Produktkategorien und Unterkategorien, das Hervorheben von Sonderangeboten oder Werbeaktionen sowie das Anbieten von Links zu wichtigen Seiten sein.

Ein Icon bezieht sich auf ein grafisches Symbol oder eine kleine Bildrepräsentation, die eine bestimmte Aktion, Funktion oder Information repräsentiert. Icons werden häufig in Online Shops und Webseiten verwendet, um Benutzern visuelle Hinweise zu geben und die Benutzererfahrung zu verbessern.

Icons dienen dazu, komplexe Informationen auf eine kompakte und visuell ansprechende Weise darzustellen. Sie können verschiedene Formen, Farben und Symbole haben und werden auch teilweise in Verbindung mit Text verwendet, um eine bestimmte Bedeutung zu vermitteln. Hier sind einige Beispiele für Icons in deinem Shopware Shop:

1. Aktionssymbole: Icons können verwendet werden, um bestimmte Aktionen darzustellen, wie z. B. ein Taschen-Symbol für "Warenkorb anzeigen", ein Herz-Symbol für "Zur Wunschliste hinzufügen" oder ein Lupen-Symbol für "Suche aufrufen". Diese Icons ermöglichen es Benutzern, schnell und intuitiv auf bestimmte Funktionen in deinem Shop zuzugreifen.

2. Social-Media-Verknüpfungen: Icons für soziale Medien wie Facebook, Instagram, Twitter oder YouTube werden häufig verwendet, um Benutzern die Möglichkeit zu geben, den Online-Shop in den sozialen Medien zu verfolgen oder Inhalte zu teilen.

4. Zahlungsmethoden: Icons werden oft verwendet, um verschiedene akzeptierte Zahlungsmethoden darzustellen, wie z. B. Visa, Mastercard, PayPal oder Apple Pay. Diese Icons vermitteln den Benutzern Vertrauen und zeigen, welche Zahlungsoptionen verfügbar sind.

Eine Landingpage in einem Online-Shop ist eine spezielle Webseite, die erstellt wurde, um Besucher gezielt auf ein bestimmtes Produkt, eine Aktion, eine Kampagne oder eine Zielsetzung hinzuweisen und zu lenken. Im Gegensatz zu den üblichen Kategorieseiten oder Produktseiten ist eine Landingpage darauf ausgerichtet, eine klar definierte Aktion oder Conversion-Ziel zu fördern.

Hier sind einige häufige Zwecke und Ziele von Landingpages in einem Online-Shop:

1. Produktpromotion: Eine Landingpage kann erstellt werden, um ein bestimmtes Produkt oder eine Produktlinie hervorzuheben. Sie enthält in der Regel detaillierte Informationen über das Produkt, Bilder, Preise und einen klaren Call-to-Action (CTA), um den Kauf anzuregen.

2. Angebote und Aktionen: Landingpages werden oft für zeitlich begrenzte Angebote oder Sonderaktionen erstellt. Sie informieren die Besucher über das Angebot und ermutigen sie, es in Anspruch zu nehmen, indem sie beispielsweise einen Rabattcode verwenden oder sich für den Erhalt von Sonderangeboten registrieren.

3. Lead-Generierung: Landingpages können auch dazu verwendet werden, Leads zu generieren. Dies geschieht oft durch das Anbieten von Inhalten von Wert, wie z. B. E-Books, Whitepapers oder E-Mail-Abonnements, im Austausch gegen die Kontaktdaten des Besuchers.

4. Veranstaltungen oder Webinare: Wenn ein Online-Shop Veranstaltungen oder Webinare anbietet, kann eine Landingpage erstellt werden, um die Besucher über das Event zu informieren und sie zur Anmeldung oder zum Kauf eines Tickets zu ermutigen.

5. Produktlaunch: Eine Landingpage kann auch für den Launch eines neuen Produkts oder einer neuen Kollektion erstellt werden. Sie erzeugt Aufmerksamkeit und Neugierde bei den Besuchern und führt sie zur Produktseite, um mehr zu erfahren oder den Kauf abzuschließen.

Eine effektive Landingpage zeichnet sich durch folgende Merkmale aus:

• Klare Botschaft: Die Hauptbotschaft und das Ziel der Seite sind sofort erkennbar.

• Überzeugende Inhalte: Die Seite bietet überzeugende und relevante Informationen, um den Besucher zur Aktion zu bewegen.

• Auffälliger CTA: Der Call-to-Action-Button oder das Formular, das die gewünschte Aktion auslöst, ist prominent platziert und ansprechend gestaltet.

• Minimalistisches Design: Die Seite sollte frei von Ablenkungen sein und sich auf das Hauptziel konzentrieren.

• Responsive Design: Die Landingpage ist für verschiedene Geräte und Bildschirmgrößen optimiert, um sicherzustellen, dass sie auf allen Plattformen gut funktioniert.

Ein Offcanvas im Online-Shop bezieht sich auf eine Design- und Benutzeroberflächen-Technik, bei der zusätzlicher Inhalt außerhalb des sichtbaren Bildschirmbereichs platziert wird und bei Bedarf eingeblendet werden kann. Dabei wird der zusätzliche Inhalt in der Regel seitlich oder unten außerhalb des Hauptinhaltsbereichs positioniert.

Der Zweck eines Offcanvas besteht darin, zusätzliche Informationen bereitzustellen, ohne dass der Hauptinhalt der Seite verdeckt wird. Wenn der Benutzer auf einen speziellen Button oder ein Icon klickt, wird das Offcanvas animiert und der zusätzliche Inhalt wird sichtbar. Durch Klicken auf einen Schließen-Button oder außerhalb des Offcanvas-Bereichs kann das Element wieder ausgeblendet werden.

In Shopware wird ein Offcanvas beispielsweise für folgende Zwecke verwendet:

1. Warenkorbvorschau: Ein Offcanvas-Warenkorb zeigt dem Benutzer eine Vorschau auf den aktuellen Inhalt seines Warenkorbs, ohne dass er die Seite verlassen muss. Der Benutzer kann den Warenkorb öffnen, um den Inhalt anzuzeigen, Artikel hinzuzufügen oder zu entfernen und den Checkout-Prozess zu starten.

2. Mobile Navigation: Auf kleinen Bildschirmen wie Smartphones wird das Offcanvas-Menü als Alternative zur herkömmlichen horizontalen Navigationsleiste genutzt. Es ermöglicht eine platzsparende und zugleich leicht zugängliche Navigation für mobile Benutzer.

3. Zusätzliche Filteroptionen: In einer Kategorie Seite kann ein Offcanvas-Menü verwendet werden, um erweiterte Filteroptionen anzuzeigen. Der Benutzer kann das Offcanvas-Element öffnen, um spezifischere Filter wie Preisbereiche, Farben, Größen usw. auszuwählen, ohne den Hauptinhalt der Seite zu überladen.

Übersicht

Der Bestellabschluss ist die letzte Seite, die der Kunde im Checkout Prozess sieht. An dieser Stelle wird der Bestelleingang bestätigt. Nun kann der Kunde alle relevanten Daten zu seiner Bestellung wie Liefer- und Rechnungsadresse, Zahlungs- und Versandart, sowie weitere Informationen zur Bestellung einsehen. Die nachfolgenden Konfigurationsmöglichkeiten stehen dir für diese Seite zur Verfügung.

Konfiguration

Übersicht

Grundeinstellungen

Typografie

Farben

Übersicht

In diesem Abschnitt kannst du Einstellungen für deine Produktgalerie vornehmen. Die Galerie lässt sich hierbei in zwei Abschnitte unterteilen. Die Vorschau Navigation und das ausgewählte Bild.

Grundeinstellungen

Linke Vorschau Navigation

Darunterliegende Vorschau Navigation

Dabei haben wir uns layouttechnisch am bewährten Shopify Checkout orientiert, der zu den best konvertierenden Checkouts aller Shopsysteme zählt. Einfaches Design, gepaart mit optimierter Usability für Desktop, Tablet und mobilen Endgeräten, verleiht deinem Shop mit dem Theme einen klaren Vorteil zu herkömmlichen Shopware Shops.

So gibt es zunächst Layout-Anpassungen im Warenkorb:

Eine komplette Überarbeitung findet erstmals in der Checkout Registrierung statt. So wird das Login Formular ersichtlicher, Registrierungs-Formularfelder übersichtlicher zusammengefasst und die Eingabe von Gutscheincodes ermöglicht:

Auch die Checkout Bestätigung wurde grundlegend neugestaltet. Liefer- und Rechnungsadresse, sowie die Zahlungs- und Versandarten werden übersichtlicher präsentiert. Die Zustimmung der AGBs findet direkt am "Zahlungspflichtig bestellen" Button statt, sodass der Besucher nicht noch einmal zum Start der Seite scrollen muss. Die Warenkorbpositionen bleiben außerdem dauerhaft für den Besucher ersichtlich. Ebenfalls ist auch hier ist die Eingabe von Gutscheincodes möglich:

Abschließend wurde auch der Bestellabschluss optimiert. Informationen zur Bestellung werden kompakter zusammengefasst und die Warenkorbpositionen befinden sich nach wie vor bis zum Ende an der selben Stelle:

Übersicht

Die Navigation ist das Hauptnavigationselement in deinem Shop. Den Inhalt bzw. die einzelnen Links pflegst du über das Kategorie Modul von Shopware. Anschließend definierst du den Einstiegspunkt der Hauptnavigation in den Grundeinstellungen deines Verkaufskanals.

Grundeinstellungen

Abstände

Typografie

Farben für die Navigation innerhalb des Headers

Farben für die Navigation unterhalb des Headers

Übersicht

In diesem Abschnitt kannst du grundlegende Layout Einstellungen vornehmen, die sich auf die komplette Produkt Detailseite auswirken.

Konfiguration