You have chosen one of our extensions - congratulations! We look forward to welcoming you as part of the community.

Theme users

Our themes are all based on the same configuration basis and are characterized by continuous further development, a variety of configuration options and features already included, as well as excellent expandability with third-party apps.

Do many stores look the same to you? Not with us! With our theme, you can experience e-commerce at the highest level thanks to a modern and, above all, sophisticated design.

Let's start straight away with the setup! However, please note that technical terms will crop up throughout the documentation. So that you can make the best use of the documentation, we recommend that you familiarize yourself with the necessary technical terms via our Academy. These are linked at every point in the documentation. This will enable you to make optimum use of the theme configuration and understand the effects on your online store even better.

App users

Let's not beat about the bush and get straight to setting up! You can select the relevant app on the left-hand side to find out more information about the setup.

Ü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

Basic configuration

1. Go to "Extensions" > "My extensions" in your admin.

2. Install and activate the app.

3. Clear the cache under "Settings" > "System" > "Caches & indexes" > "Clear caches"

Ü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

Konfiguration

Ü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

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

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.

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.

Übersicht

Konfiguration

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.

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.

Setting up Shopware extensions can be very complex and time-consuming. If you need help with the configuration, we are happy to help. We know that it can be difficult to understand and customize all functions and settings.

That's why we want to make sure that you receive the best possible support. We are happy to help you set up your Shopware store.

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.

Ü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

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.

Häufig benötigt man eine zusätzliche Option um weitere Informationen auf der Produkt Detailseite darzustellen. Hierbei kann ein ergänzender Tab in vielen Fällen Aushilfe verschaffen.

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.

Mit dem Theme hast du außerdem die Möglichkeit, deine Tabs auf der Produkt Detailseite an zwei verschiedenen Positionen darzustellen: Neben oder unterhalb der Produktbild-Galerie. Über die Theme Konfiguration kannst du dies nach deinen Vorstellungen anpassen.

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 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.

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.

Ein Button ist interaktives Element, das dazu dient, bestimmte Aktionen auszuführen. Typischerweise handelt es sich um eine grafische Schaltfläche, die den Benutzer dazu auffordert, auf sie zu klicken, um eine bestimmte Funktion oder Aktion auszulösen.

Grundlegend können Buttons verschiedene Funktionen haben, je nachdem, auf welcher Seite sie platziert sind und welches Ziel sie verfolgen. Hier sind einige häufige Arten von Buttons in deinem Shopware Shop:

3. Anmelde- oder Registrierungs-Button: Dieser Button wird verwendet, um Benutzer zur Anmeldung oder Registrierung auf der Website aufzufordern. Er kann mit Texten wie "Anmelden", "Registrieren" oder ähnlichem beschriftet werden.

Ü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

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

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

Übersicht

Grundeinstellungen

Farben

Erlebniswelten Element verwenden

Erstelle zunächst eine Erlebniswelt für deine Kategorie unter "Inhalte > Erlebniswelten". Wichtig ist, dass du den Layout-Typen "Kategorieseite" wählst. Ziehe anschließend einen beliebigen Block mit Element voller Breite in deine Sektion. Wir nehmen in diesem Beispiel den Standard Shopware Text Block.

Nun kannst du das Element über die zwei Pfeile am rechten oberen Rand des Text Elements austauschen. Daraufhin öffnet sich ein ein Fenster mit allen verfügbaren Elementen. Wähle in dieser Ansicht das Element "Unterkategorie-Navigation". Nachdem du das Element gewählt hast, schließt sich das Fenster wieder und das Unterkategorie-Navigations-Element wurde erfolgreich mit dem Text Element ausgetauscht.

Unterkategorie-Navigation konfigurieren

Sobald du mit der Maus erneut über das soeben ausgetauschte Element fährst erscheint neben den zwei Pfeilen ein Zahnrad Symbol. Per Klick auf das Zahnrad öffnen sich die Element-Einstellungen der Unterkategorie-Navigation.

Solltest du dich für die Bild-Darstellung entscheiden, erscheinen zusätzliche Einstellungsmöglichkeiten. Mit dem Feld "Anzahl Spalten" kannst du definieren, wie viele Bilder in einer Reihe nebeneinander angezeigt werden sollen. Außerdem kannst du über das Feld "Seitenverhältnis der Bilder" die Größe der Bilder entsprechend anpassen. Je größer das Seitenverhältnis, desto schmaler wird auch das Bild. Bei dem Seitenverhältnis "1" entsteht ein Quadrat.

Anzeigebild in der Kategorie hinterlegen

Damit du mit der Bild-Darstellung aus einer Kategorie auf die entsprechenden Unterkategorien verlinken kannst, ist immer ein Anzeigebild für die jeweiligen Unterkategorien notwendig. Verknüpfe daher unter "Kataloge > Kategorien > [Kategorie] > Menü-Einstellungen > Anzeigebild" deine Bilder, die du verwenden möchtest.

Übersicht

Grundeinstellungen

Abstände

Farben

Typografie

Übersicht

Produkte pro Zeile

Produkte pro Zeile (Sidebar-Layout)

Abstände

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.

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.

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

Basic configuration

1. Go to "Extensions" > "My extensions" in your admin.

2. Install and activate the app.

3. Open the configuration and make any design adjustments.

4. Clear the cache under "Settings" > "System" > "Caches & indexes" > "Clear caches"

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:

Basic configuration

1. Go to "Extensions" > "My extensions" in your admin.

2. Install and activate the app.

3. Clear the cache under "Settings" > "System" > "Caches & indexes" > "Clear caches"

4. Configure the pop-up under "Catalogues" > "Products" > "[Product]" > "Specifications" > "Custom fields" > "Product (Cross Selling Pop-Up)" at product level.

Basic configuration

1. Go to "Extensions" > "My extensions" in your admin.

2. Install and activate the app.

3. Open the configuration and make any necessary adjustments.

4. Clear the cache under "Settings" > "System" > "Caches & indexes" > "Clear caches"

GTC and data protection

Make sure that you have saved the terms and conditions and data protection under "Settings" > "Basic information". Only then will the corresponding links in the pop-up work.

We want to make sure that our extensions work as well as possible and that your online store runs smoothly. We work hard to optimize and improve our themes and apps to make sure it meets your needs.

However, we also know that no extension is perfect and sometimes errors or problems can occur. So if you come across a bug or have problems using it, please don't hesitate to contact us.

Übersicht

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

Konfiguration

Übersicht

In diesem Bereich kannst du die wichtigsten E-Commerce Farben in deinem Shop definieren. Dazu gehören deine Preisauszeichnungen, sowie die Kaufen-Buttons, welche an unterschiedlichen Stellen in deinem Shop vorkommen.

Konfiguration

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.

Ü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

Übersicht

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

Konfiguration

Übersicht

Grundeinstellungen

Medien

Farben

Übersicht

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

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

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.

Neben den umfassenden Einstellungsmöglichkeiten über die Theme Konfiguration bietet dir das Theme auch noch viele weitere Funktionen die über den Leistungsumfang von herkömmlichen Themes hinausgehen. So enthält das Theme neben einer idealen SEO Ausgangsbasis und weiteren nützlichen Features, auch bspw. die Werkzeuge, um einen vollumfänglichen Blog in deinem Shop zu integrieren. Auf dich warten viele kostenlose Funktionen, für die du i.d.R. weitere Apps aus dem Shopware Store erwerben müsstest.

Ü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

Die Flyout Navigation öffnet sich, sobald man mit dem Mauszeiger über ein Hauptnavigationselement fährt und dieses weitere Unterkategorien besitzt.

Grundeinstellungen

Typografie

Farben

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 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:

1. Warenkorb anzeigen

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

Ü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

Du wirst in der Theme Konfiguration hin und wieder auf Farb-Variablen stoßen. Damit du eine jeweilige Farbe nur einmal verwalten musst, hast du über die entsprechende Variable die Möglichkeit diese an unterschiedlichen Farb-Feldern in der Theme Konfiguration wieder zu verwenden. So musst du bei Änderung einer Farbe nicht alle Farb-Felder mit derselben Konfiguration erneut aufsuchen.

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.

Ü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

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.

5. Call-to-Action: Auf der Produkt Detailseite befindet sich normalerweise ein eindeutiger Aufruf zum Handeln (Call-to-Action), der den Benutzer dazu ermutigt, das Produkt zu kaufen. Dies kann beispielsweise ein "In den Warenkorb legen"-Button, ein "Jetzt kaufen"-Button oder ein "Angebot anfordern"-Button sein, der den Besucher zur Conversion führt.

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.

Übersicht

An dieser Stelle hinterlegst du die Links zu deinen Social Media Profilen. Die Icons für die Plattformen können dabei an unterschiedlichen Stellen in deinem Shop eingeblendet werden. So kannst du sie über die nachfolgenden Konfigurationen bspw. im Header, Footer oder mobilen Offcanvas-Menü anzeigen. Standardmäßig werden diese ohne weitere Konfiguration an den meisten Stellen automatisch integriert.

Konfiguration

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 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.

Übersicht

Grundeinstellungen

Farben

Basic configuration

1. Go to "Extensions" > "My extensions" in your admin.

2. Install and activate the app.

3. Open the configuration and activate the desired functions.

4. Clear the cache under "Settings" > "System" > "Caches & indexes" > "Clear caches"

Generate variant URLs

1. Go to "Settings" > "Shop" > "SEO"

2. Paste the following template into the "Product detail page" field and save your entries:

You can of course adapt the template to your needs.

1. Update your index under "Settings" > "System" > "Caches & Indexes" > "Update indexes".

Sitemap URLs

Update your index under "Settings" > "System" > "Caches & Indexes" > "Update indexes".

Canonical URLs

No further configuration is required for this.

Further options

Global settings from the app configuration such as the linking from product boxes and the canonical URL setting can be overwritten at product level under "Catalogues" > "Products" > "[Product]" > "Specifications" > "Custom fields" > "Product (SEO URL Manager)".

FAQ's

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.

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

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.

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:

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.

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.

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:

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.

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.

Im E-Commerce-Bereich bezieht sich die Storefront auf die visuelle Gestaltung und das Layout eines Online Shops. Es umfasst das Design der Homepage, Kategorieseiten, Produkt Detailseiten, Warenkorb und Checkout. Eine ansprechende und benutzerfreundliche Storefront ist entscheidend, um das Vertrauen der Kunden zu gewinnen, die Conversionsrate zu steigern und den Erfolg des Online-Shops sicherzustellen.

Übersicht

Neben der Top Bar für den Header, bietet dir das Theme in diesem Abschnitt ebenfalls die Möglichkeit eine Top Bar für den Footer zu konfigurieren. Diese wird standardmäßig direkt über dem eigentlichen Footer dargestellt.

Du hast hierbei die Möglichkeit ein Newsletter Formular präsent in deinem Shop zu integrieren. Außerdem können zusätzliche Besonderheiten und Alleinstellungsmerkmale mittels Textbausteinen und Medien angefügt werden.

Grundeinstellungen

Medien

Farben

Typografie

Ü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

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

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.

Den Namen "Datenblätter" des Tabs kannst du wie gewohnt über die Textbausteine nach deinem Belieben anpassen. Der Name des Textbausteins hierfür lautet: detail.tabsDataSheet

Die Theme Konfiguration bietet dir eine breite Vielfalt an Einstellungsmöglichkeiten für deinen Shop. Alle Anpassungen beziehen sich dabei auf die Storefront.

Nachdem du die Einrichtung erfolgreich abgeschlossen hast, steht dir das Theme in der Administration am linken Rand unter "Inhalte > Themes" zur Verfügung.

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.

Übersicht

Konfiguration

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

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.

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.

Übersicht

Die Top Bar befindet sich immer ganz oben in deinem Shop und lässt sich durch individuelle Einstellungsmöglichkeiten exakt auf deine Wünsche anpassen.

Grundeinstellungen

Labels

Icons

Widgets

Typografie

Farben

Ü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

Der Header beschreibt den inneren Teil zwischen Top Bar und Navigation und lässt sich durch unterschiedliche Einstellungen einfach und schnell umgestalten.

Grundeinstellungen

Typografie

Farben

Ü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

Der Hauptinhalt des Footers kann in Spalten untergliedert werden. So kann ein Einstiegspunkt der Footer Navigation über die Grundeinstellungen des Verkaufskanals vorgenommen werden, um rechtliche Seiten wie Impressum, AGB, etc. zu verlinken. Zusätzlich können weitere Informationen wie Kontakt- oder FAQ-Seiten verknüpft werden.

Neben diesen Möglichkeiten bietet dir das Theme jedoch noch weitere sinnvolle Elemente, um den Footer nach deinen Wünschen zu konfigurieren.

Elemente zuweisen

Insgesamt stehen dir fünf Elemente für deine Footer Spalten zur Verfügung:

Gegebenenfalls kannst du über die Option "Keins" die Zuweisung für ein Element aufheben bzw. überspringen. Somit bist du nicht gezwungen alle verfügbaren Elemente zu verwenden.

Durch die nachfolgende Konfiguration kannst du die Elemente, sowie deren Reihenfolge innerhalb des Footers festlegen. Beachte jedoch, dass die Mehrfachauswahl eines Elements nicht möglich ist. Jedes Element kann nur einmal als Footer Spalte verwendet werden.

Grundeinstellungen

Service-Hotline

Newsletter

Zahlungs- und Versandarten

Qualitätssiegel

Typografie

Farben

Abstände