Ein umfassender Ratgeber für den Shopware 6 Produkt Konfigurator von Atloss

Die im Shopware Store erhältliche App ist nach kurzer Einarbeitungsphase nutzbar und beliebig erweiterbar.

Für die Konfiguration der Produkte benötigst du keinerlei Entwicklerkenntnisse. Aufgrund der übersichtlichen Administrationsoberfläche und einfachen Produkt Zuordnung lassen sich individuelle Konfiguratoren im Handumdrehen umsetzen.

Funktionsumfang und Darstellung

Im Gegensatz zu gängigen Produkt Konfiguratoren arbeitet die App mit einem sogenannten “Modal-Fenster”. Dieses Fenster ermöglicht dir ein schlichtes, übersichtliches Design, ohne eine viel zu lange Produktdetailseite in Kauf nehmen zu müssen. Durch ein Dropdown Menü und Text Felder lassen sich viele Personalisierungs Anforderungen einfach und skalierbar realiseren.

Du interessierst dich für den Produkt Konfigurator oder hast dich bereits für die App entschieden? Dann lass uns gemeinsam mit den ersten Schritten beginnen!

App erwerben

Die App ist als Kauf- und Mietversion im Shopware Store erhältlich.

Um die App zu erwerben benötigst du einen Shopware Account, sowie eine laufende Shopware 6 Installation. Da du dich für die App interessierst gehen wir davon aus, dass du alle notwendigen Schritte bereits erledigt hast. Solltest du noch keinen Shopware Account haben, dann registriere dich zunächst.

Installation

Du hast die App erfolgreich erworben? Dann lass uns gemeinsam mit der Installation des Produkt Konfigurators beginnen.

Begib dich zuerst in deine Shopware 6 Administration unter domain.de/admin. Rufe im nächsten Schritt deine Erweiterungen unter:

Erweiterungen > Meine Erweiterungen

in der linken Navigationsleiste auf. Hier gelangst du zur Übersicht deiner Apps.

In der Regel sollte der Produkt Konfigurator in dieser Übersicht direkt erscheinen. Sollte dies nicht der Fall sein, stelle sicher, dass du deine Account Daten im Tab “Shopware Account” hinterlegt hast.

Installiere nun die App indem du auf die drei Punkte am rechten Rand klickst und “Installieren” auswählst. Sobald die App installiert ist, musst du nur noch den Schalter am linken Rand aktivieren.

Herzlichen Glückwunsch! 🎉 Du hast den Atloss Produkt Konfigurator für Shopware 6 erfolgreich installiert und aktiviert. Nun können wir mit den ersten Schritten beginnen.

Erste Schritte

Nach der Installation steht dir in der linken Navigationsleiste

unter dem Reiter “Kataloge” der Punkt “Produkt Konfiguratoren”

zur Verfügung. Hier findest du eine Übersicht aller Produkt Konfiguratoren, die du in Zukunft erstellen und verwalten wirst.

Um einen neuen Produkt Konfigurator zu erstellen klickst du einfach auf den blauen Button “Konfigurator anlegen”. Anschließend öffnet sich eine neue Maske, in der die Basisinformation des Produkt Konfigurators hinterlegt werden muss.

Bei der Eingabe Name trägst du den Namen deines Produkt Konfigurators ein. Die zweite Eingabe CSS-Klassen gibt dir die Möglichkeit optionale CSS-Klassen für den kompletten Produkt Konfigurator zu hinterlegen. Mit dieser CSS-Eingabe bist du in der Lage den Produkt Konfigurator individuell an deine optischen Vorlieben anzupassen.

Unter Bild im Modal Fenster kannst du ein entsprechendes Bild für den Produkt Konfigurator hinterlegen. Dieses Bild dient bspw. als Muster für die Personalisierung.

Abschließend klickst du auf Speichern.

Anschließend kannst du weitere Einstellungen für die Produkt Detailseite treffen:

So kannst du entscheiden, ob du dem Kunden eine Mengenauswahl am Konfigurator präsentieren möchtest. Somit kann man einen konfigurierten Artikel direkt mehrfach in den Warenkorb legen, wie man es von regulären Produkten gewohnt ist. Standardmäßig ist dies jedoch deaktiviert.

Ebenfalls lässt sich ein absoluter Aufpreis für die Konfiguration definieren. Wähle hierzu den zutreffenden Steuersatz, sowie den entsprechenden Preis einer Personalisierung. Solltest du keinen Aufpreis verwenden wollen, kannst du das Feld einfach überspringen oder wieder eine "0" eintragen.

Außerdem kannst du mit der Einstellung "Optional", den Kunden entscheiden lassen, ob er ein Produkt personalisieren muss oder dies auch unkonfiguriert in den Warenkorb legen kann. Sofern diese Option aktiviert ist, muss der Kunde einer Personalisierung immer zunächst zustimmen, bevor er mit der Konfiguration beginnen kann.

Im nächsten Schritt kannst du die Produkte auswählen, die du als Basis für deine Produkt Konfiguration verwenden möchtest. Vorher ist es also notwendig ein bzw. mehrere Produkte in Shopware anzulegen.

Wichtig zu erwähnen ist, dass nur jeweils ein Produkt für einen Produkt Konfigurator verwendet werden kann. Solltest du einem Produkt bereits einen Produkt Konfigurator zugewiesen haben, ist das entsprechende Produkt nicht mehr auswählbar.

Felder erstellen

In der Karte Felder kannst du nun die ersten Felder für deinen neu angelegten Produkt Konfigurator erstellen.

Für das Dropdown Menü kannst du im Tab Dropdown eine entsprechende Bezeichnung des Menüs angeben. Diese Bezeichnung sieht der Kunde später über dem Dropdown.

Im folgenden Abschnitt werden wir auf die Felder Dropdown und Text Felder detailliert eingehen. Möchtest du lediglich unserem Praxisbeispiel weiter folgen, kannst du zum Punkt 6. Praxisbeispiel springen.

Mit Klick auf Dropdown Feld erstellen / Text Feld erstellen öffnet sich ein Fenster für die Konfiguration des entsprechenden Feldes.

Allgemeine Einstellungen

Bezeichnung
Beide Feldtypen benötigen eine Bezeichnung. Beim Dropdown Menü ist es die auswählbare Option, beim Text Feld die Überschrift des Feldes.

Position
Die Position gibt die Reihenfolge vor, in welcher die Felder angezeigt werden.

Dropdown Feld

Hier lässt sich ein Bild der entsprechenden Dropdown Option zuweisen. Wechselt der Kunde zwischen den Optionen werden die dazugehörigen Bilder angezeigt.

Text Feld

Mit Text Feldern ermöglichst du deinen Kunden eine eigenständige Eingabe von Texten. Gerade für die Personalisierung von Produkten ist dies ideal.

Mit Seiten Bild synchronisieren
Mit dem Aktivieren des Schalters ist der Kunde in der Lage auf dem von dir hinterlegten Bild zu schreiben. Dabei wird die Eingabe im Text Feld in Echtzeit auf das Bild übertragen. Zusätzlich werden mit dem Aktivieren der Option weitere Einstellungen freigeschaltet.

Großbuchstaben
Wenn du dem Kunden nur die Eingabe von Großbuchstaben erlauben möchtest, kannst du diese Option aktivieren.

Nur Buchstaben erlauben
Mit dieser Einstellung kannst du die Eingabe des Kunden in diesem Feld auf ausschließlich Buchstaben limitieren.

Nur Zahlen erlauben
Mit dieser Einstellung kannst du die Eingabe des Kunden in diesem Feld auf ausschließlich Zahlen limitieren.

Schriftgröße
Die Schriftgröße spiegelt sich bei Eingabe auf dem Bild wider. Ein Beispiel wären “16px”.

Schriftstärke
Hier steht dir die gängige Auswahl zu Verfügung. Je höher der Wert, desto dicker die Schriftart, sofern dies auch von der Schriftart unterstützt wird.

Schriftfarbe
Gibt die Schriftfarbe auf dem Bild vor.

Schriftart
Durch die Integration eigener Schriftarten, kannst du hier die entsprechende Schriftart auswählen, die auf dem Seitenbild verwendet werden soll. Da dies ohne eine weitere App aus dem Shopware Store leider sehr technisch ist, können wir dir an dieser Stelle vorerst nur folgenden Beitrag für die händische Integration von eigenen Schriftarten empfehlen. Hierzu werden jedoch gewisse Entwickler Kenntnisse benötigt.

Zeichenabstand
Gibt den Abstand zwischen den Zeichen auf dem Seitenbild an. Ein Beispiel wäre “1px”.

Maximale Zeichenanzahl
Möchtest du die Eingabe deiner Kunden limitieren, kannst du hier die entsprechende Zahl eingeben. Mit “30” werden automatisch 30 Zeichen maximal erlaubt sein.

Beschreibung
Der Tooltip ist ein optionaler Hinweis für deine Kunden. Sollten deine Text Felder Erklärungsbedarf benötigen, kannst du diesen in der Beschreibung des Tooltips hinterlegen. Da hier ein Editor verwendet wird, bist du in der Lage, Text, Bilder und Videos für deine Kunden zu verwenden, um das Konfigurations Erlebnis so einfach wie möglich zu gestalten.

Tooltip unterhalb des Icons anzeigen
Standardmäßig wird der Tooltip über dem Icon angezeigt. Mit dem aktivieren des Schalters wird dieser unterhalb des Icons gepackt.

Vertikale & Horizontale Ausrichtung
Ermöglicht die Auswahl zwischen Zentrierung und benutzerdefinierter Eingabe. Mit der Auswahl “Benutzerdefiniert” öffnet sich jeweils ein weiteres Feld, welches den entsprechenden Abstand von oben bzw. links definieren lässt.

Praxisbeispiel

Da du nun bestens über die beiden Feldtypen Bescheid weißt, können wir loslegen und gemeinsam einen Produkt Konfigurator erstellen. Als Beispiel nehmen wir den Produkt Konfigurator der Firma Donari. Hierbei handelt es sich um einen Produkt Konfigurator für Hunde Poster. Hier kannst du dir das Endergebnis live ansehen.

Legen wir also einen neuen Produkt Konfigurator an. Der Name bleibt dir hierbei natürlich selbst überlassen, wir nennen ihn "Konfigurator für Hunde Poster". CSS-Klassen sowie ein Bild im Modal Fenster benötigen wir nicht. Letzteres legen wir über die Dropdown Felder an.

Ein Basisprodukt mit der Variante "A3" und "A4" haben wir bereits erstellt. Daher können wir den Produkt Konfigurator nun auch dem Produkt zuweisen. Das ganze sieht dann wie folgt aus:

Im nächsten Schritt legen wir die Bezeichnung des Dropdown Menüs fest. Wir nennen es "Hunderasse". Nun können wir die verschiedenen Hunderassen als Dropdown Felder erstellen.

Dafür klicken wir auf Dropdown Feld erstellen und legen Bezeichnung und Bild für jedes Feld fest.

Anschließend fehlen uns nur noch die Textfelder. Mit einem Klick auf den Tab Text Felder wechseln wir zur entsprechenden Anlage. Hier entscheiden wir uns für die Felder "Name" und "Geburtsdatum", welche später für jedes Poster konfigurierbar sein sollen. Die Einstellungen im Tab Typographie beim Feld "Name" sehen dabei wie folgt aus:

Im Tab Ausrichtung haben wir folgendes hinterlegt:

Nun noch die Typographie des Feldes "Geburtsdatum":

Und der Tab Ausrichtung für das Feld "Geburtsdatum":

Yaay! 🎉 Wir haben soeben unseren ersten funktionierende Produkt Konfigurator erstellt. Nun dürfen wir das Speichern nicht vergessen. Prüfen wir noch schnell ob die Bild Zuweisung sowie die Text Felder im Shop richtig funktionieren. Sieht super aus!

Design Anpassungen

Möchtest du weitere Designanpassungen für deinen Produkt Konfigurator vornehmen? Dann hast du die Möglichkeit den Produkt Konfigurator mit CSS-Klassen zu versehen und somit ein auf dich zugeschnittenes Design zu erstellen.

E-Mail-Template

Falls du die Felder in der Bestellbestätigung für deine Kunden auflisten möchtest, kannst du folgendes Template für Shopware 6.4 verwenden:

{# ... #}

{% if lineItem.payload.options is defined and lineItem.payload.options|length >= 1 %}
    {% for option in lineItem.payload.options %}
        {{ option.group }}: {{ option.option }}
        {% if lineItem.payload.options|last != option %}
            {{ " | " }}
        {% endif %}
        <br>
    {% endfor %}
{% endif %}

{# Produkt Konfigurator #}
{% if lineItem.payload.atlProductConfigurator is defined and lineItem.payload.atlProductConfigurator|length >= 1 %}
    {% for input in lineItem.payload.atlProductConfigurator|sort((a, b) => a.position <=> b.position) %}
        <div>
            {{ input.label }}: {{ input.value }}
        </div>
        <br>
    {% endfor %}
{% endif %}
{# Produkt Konfigurator #}

{# ... #}

Solltest du Shopware 6.5 verwenden benötigst du folgendes Code Snippet:

{# ... #}

{% if nestedItem.payload.options is defined and nestedItem.payload.options|length >= 1 %}
    <div>
        {% for option in nestedItem.payload.options %}
            {{ option.group }}: {{ option.option }}
            {% if nestedItem.payload.options|last != option %}
                {{ " | " }}
            {% endif %}
        {% endfor %}
    </div>
{% endif %}

{# Produkt Konfigurator #}
{% if nestedItem.payload.atlProductConfigurator is defined and nestedItem.payload.atlProductConfigurator|length >= 1 %}
    {% for input in nestedItem.payload.atlProductConfigurator|sort((a, b) => a.position <=> b.position) %}
        <div>
            {{ input.label }}: {{ input.value }}
        </div>
    {% endfor %}
{% endif %}
{# Produkt Konfigurator #}

{# ... #}

Hierbei handelt es sich um einen Ausschnitt des Shopware 6 Standard-Templates. Zwischen den {# Produkt Konfigurator #}-Tags befindet sich die Anpassung, welche alle Positionen der Bestellung anzeigen wird.

Tipps und Tricks

Je mehr Dropdown Felder du für deinen Produkt Konfigurator erstellst, desto öfter hast du auch die Option Bilder zu hinterlegen. Damit die Ladezeit der Produkt Detailseite nicht unnötig verlangsamt wird, empfehlen wir dir eine Lazy Loading App zu installieren. Wie du in unserem SEO-Ratgeber Beitrag erfährst, tragen Bilder maßgeblich zu langsamen Ladezeiten bei.

Mit einer Lazy Loading App werden die Bilder erst beim Öffnen der jeweiligen Dropdown Option geladen und somit ein starker Performance Boost erzielt. Wir können dir an dieser Stelle die App von isento ECommerce Solutions empfehlen. Damit haben wir für unterschiedliche Kundenprojekte schon gute Erfahrungen machen können.