Designvorlage benutzerdefiniert anpassen

Eine Designvorlage ist eine Vorlage, die das Look&Feel der Storefront festlegt. Unterschiedliche Designvorlagen haben verschiedene Stile und Layouts und bieten Ihren Kunden unterschiedliche Erfahrungen.

uStore NG umfasst eine vordefinierte Designvorlage, die speziell für Ihre Onlineshops entworfen wurde. Mit dem WYSIWYG Theme-Editor können Designvorlagen innerhalb von Sekunden an die Markenrichtlinien Ihres Unternehmens angepasst werden, ohne dass Sie dafür Code bearbeiten müssen.

Mit dem Theme-Editor lassen sich Design-Elemente wie Schriftarten, Farben und Bilder leicht steuern. Sie können die verschiedenen Einstellungen ausprobieren und gemäß Ihren Präferenzen anpassen. Sehen Sie sich die Vorschau an und sobald Sie mit dem Design zufrieden sind, veröffentlichen Sie es im Onlineshop.

Wenn Sie über die vordefinierten Einstellungen hinaus noch Änderungen machen möchten, können Sie den CSS-Code im Editor bearbeiten. Mit den in CSS vorhandenen Variablen können Sie mit nur einer Änderung mehrere Elemente der Benutzeroberfläche gleichzeitig anpassen.

Die Änderungen werden während der Eingabe automatisch als Entwurf gespeichert. Auch wenn der Editor geschlossen wird, bleiben die Änderungen erhalten.

AquaBlue, die Standard-Designvorlage von uStore, ist eine flexible, responsive Vorlage, die für alle Shops geeignet ist. Mit AquaBlue können Sie schnell und einfach einen Shop einrichten und mit dem Verkauf starten. AquaBlue schaut auch ohne benutzerdefinierte Anpassungen auf jedem Gerät gut aus.

Hinweis: Die Designvorlagen werden pro Shop angepasst. Das heißt, die benutzerdefinierten Einstellungen werden nur für den ausgewählten Shop übernommen.

Bearbeiten der Designvorlage-Einstellungen

Im linken Bereich des Theme-Editors können die Einstellungen der Designvorlagen geändert werden und es gibt einen Vorschaubereich. Während des Arbeitens können Sie im Vorschaubereich durch die einzelnen Seiten des Shops navigieren und sehen, wie sich die Änderungen auf den verschiedenen Seiten im Shop auswirken und zwar in der mobilen wie auch in der Desktop-Ansicht. Wählen Sie "Entwurf-Vorschau", um die Entwurf-Version in einem neuen Tab anzusehen.
Wenn der Entwurf in einem neuen Tab geöffnet wird, muss bei jeder Änderung an der Designvorlage der Tab aktualisiert werden.

So passen Sie eine Designvorlage benutzerdefiniert an:

1.       Öffnen Sie den Shop, dessen Designvorlage Sie bearbeiten möchten.

2.       Klicken Sie auf Shop-Einstellungen > Designvorlage anpassen.

3.       In den nachfolgenden Fenstern bearbeiten Sie die Einstellungen der Designvorlage.
Die Änderungen werden während der Eingabe automatisch als Entwurf gespeichert und im Vorschaubereich angezeigt.

      Schriftbild

      Farbe and Stil

      Header und Footer

      Startseiten-Banner

      Assets

      CSS Variablen

      Custom CSS

      Widgets

4.       Wenn Sie auf die Standardeinstellungen des Designs zurück wechseln möchten, wählen Sie Rückgängig > Löschen und zu Designvorlage-Standard wechseln.
Alle Werte des Entwurfs werden gelöscht und der Editor wird mit den Standardwerten für die Designvorlage ausgefüllt.

5.       Wenn Sie auf die veröffentlichten Einstellungen des Designs zurück wechseln möchten, wählen Sie Rückgängig > Zurück zu veröffentlichten Einstellungen.
Alle Werte des Entwurfs werden gelöscht und der Editor wird mit den veröffentlichten Einstellungen für die Designvorlage ausgefüllt.

6.       Sobald Sie fertig sind, treffen Sie aus Folgendem eine Auswahl:

      Klicken Sie auf Veröffentlichen, um alle Änderungen in der Storefront zu übernehmen.

      Den Editor schließen. Die neuen Einstellungen werden gespeichert und beim nächsten Öffnen des Editors angezeigt.

Wenn Sie die Designvorlage weiter ausbauen möchten - Inhalt, Logik, Funktionen hinzufügen oder andere Änderungen am Design vornehmen, die nicht über den Editor möglich sind - tun Sie dies über die Designvorlagenverwaltung.