Shopware 6 Ratgeber
Shopware

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

Luca Hollenbach 25. November 2021

Mit dem Atloss Produkt Konfigurator für Shopware 6 kannst du viele verschiedene Produkte individuell anpassen und nach Belieben personalisieren. 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.

  1. Funktionsumfang und Darstellung
  2. App erwerben
  3. Installation
  4. Erste Schritte
  5. Felder erstellen
  6. Praxisbeispiel
  7. Design Anpassungen
  8. E-Mail-Template
  9. Tipps und Tricks

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

Donari - Posterkonfigurator

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!

2. 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 hier. Falls du noch keinen laufenden Onlineshop hast, helfen wir dir natürlich auch gerne weiter 😉. Wir freuen uns auf deine Nachricht!

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

Shopware 6 - Erweiterungen

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.

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

Produkt Konfigurator - Übersicht

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.

Produkt Konfigurator erstellen

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.

Hinweis:

Solltest du später Bilder in den Dropdown Feldern hinterlegen, werden diese Bilder anstelle des hier hinterlegten Bildes angezeigt. Solltest du garkeine Bilder hinterlegen, wird standardmäßig das Produkt Anzeigebild verwendet.

Abschließend klickst du auf Speichern.

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.

Produkt Konfigurator Produkt Zuordnung

Hinweis:

Wie du ein Produkt in Shopware 6 anlegst, wird dir im folgenden Video ausführlich erklärt:

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.

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


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


Tab Medien

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

Hinweis:

Hinterlegst du ein Bild für ein Dropdown Feld, muss ein Bild für alle Dropdown Felder angelegt werden. Ansonsten wird das Bild des Produkt Konfigurators verwendet. Ist dort ebenfalls kein Bild hinterlegt, wird das Produkt Anzeigebild verwendet.

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.


Tab Typographie

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.

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 leider sehr technisch ist, können wir dir an dieser Stelle vorerst nur folgenden Beitrag für die Integration von eigenen Schriftarten empfehlen.

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.


Tab Tooltip

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.

Produkt Konfigurator Tooltip
Tab Ausrichung (Nur mit aktiver Seiten Synchronisation freigeschaltet)

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.

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

Produkt Konfigurator Basisinformationen

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:

Produkt Konfigurator Felder

Im Tab Ausrichtung haben wir folgendes hinterlegt:

Produkt Konfigurator Felder

Nun noch die Typographie des Feldes "Geburtsdatum":

Produkt Konfigurator Felder

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

Produkt Konfigurator Felder

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! So schnell und ganz ohne Programmierkenntnisse!

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

8. E-Mail-Template

Falls du die Felder in der Bestellbestätigung für deine Kunden auflisten möchtest, kannst du folgendes Template 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 #}
{% set productConfigurator = lineItem.payload.atlProductConfigurator %}
{% if productConfigurator is defined and productConfigurator|length >= 1 %}
    {% for input in productConfigurator|sort((a, b) => a.position <=> b.position) %}
        <div>
            {{ input.label }}: {{ input.value }}
        </div>
        <br>
    {% 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.

9. 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 Produktdetailseite 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 die besten Erfahrungen machen können.

Luca Hollenbach
Entwickler und Content-Autor bei Atloss. Süchtig nach Shopware, Musik, Sushi und Tacos.