Erste Schritte / Schnellanleitung

In diesem Guide gehen wir die ersten Schritte durch, die erforderlich sind um eine neue CMS Seite zu erstellen. Als Voraussetzung muss das Plugin zunächst als Kauf- oder Testversion installiert werden.

Weitere Informationen hierzu finden Sie unter: Lizenzierung und Installation von lizenzpflichtigen Plugins

Neue Seite erstellen

Nachdem Sie das Plugin installiert haben, muss das Backend zunächst neu gestartet werden. Anschließend kann das Modul über den Menüeintrag Inhalte >> Shopware CMS geöffnet werden.

Klicken Sie hier auf die Schaltfläche Seite hinzufügen

Generelle Einstellungen

Definieren Sie anschließend eine Bezeichnung für Ihre CMS Seite. Diese Bezeichnung dient lediglich für die interne Verwaltung. Optional kann die Seite an dieser Stelle bereits auf aktiv gesetzt werden. In diesem Fall wird sie - einer Zuweisung vorausgesetzt - dem Kunden bereits angezeigt.

Zuweisung einer Kategorie / Artikel

Speichern Sie anschließend Ihre Einstellungen. Sobald Sie dies getan haben, haben Sie die Möglichkeit die CMS Seite einer oder mehrerer Kategorien bzw. Artikeldetailseiten zuzuweisen.

Zuweisung als Landingpage

Alternativ zu den Kategorie- und Artikelzuweisungen kann eine CMS Seite auch als Landingpage definiert werden. In diesem Fall muss eine Url definiert werden, unter der diese anschließend zur Verfügung stehen soll. 

CMS-Seite-als-Landingpage-zur-Verfugung-stellen

In diesem Fall würde die Langingpage unter der folgenden Url zur Verfügung stehen:
http://[IHRE-SHOP-DOMAIN]/Testseite-zur-Demonstration-der-ersten-Schritte

Erstes Inhaltselement hinzufügen

Nachdem die Einstellungen / Zuweisungen gespeichert wurden, wechseln Sie auf den Tab-Reiter Inhaltselemente

Inhaltselemente-des-Shopware-CMS-Systems

Hier kann mit einem Klick auf die Schaltfläche Inhaltselement hinzufügen ein neues Inhaltselement hinzugefügt werden.

Inhaltselement-hinzufugen

Als ersten Test fügen wir hierbei ein Inhaltselement des Typs Text mit Bild ein. Das Feld Beschreibung kann optional definiert werden. Hierbei handelt es sich um eine interne Beschreibung für die Baumansicht.

Text-mit-Bild-Element-hinzufugen

Nachdem das Inhaltselement über die Schaltfläche Speichern hinzugefügt wurde, kann die Bearbeitung über das Stift-Icon gestartet werden.

Inhaltselement-bearbeiten

Anschließend definieren wir die Überschrift sowie einen Blindtext als Inhalt. Ist dies erledigt, speichern wir die Inhalte über die gleichnamige Schaltfläche.

Blindtextelement-setzen

Live-Vorschau der Seite starten

Im nächsten Schritt starten wir die Live-Vorschau, um den aktuellen Stand sowie die zukünftigen Veränderungen der Seite Live zu betrachten. Klicken Sie hierzu auf die Schaltfläche Live-Vorschau der Seite

Live-Vorschau-starten

In dem folgenden Dialog kann die Konfiguration der Vorschau vorgenommen werden. Diese belassen wir zunächst einmal so und klicken auf Vorschau starten. Sollten Sie nur mit einem Monitor arbeiten empfiehlt es sich stattdessen auf Vorschau in neuem Tab starten zu klicken.

Live-Vorschau-der-Seite

Die Vorschau wird hierbei als Pop-up geöffnet, damit das Fenster - bei Verwendung von zwei Bildschirmen - neben dem Shopware Backend Browser-Fenster plaziert werden kann. Da Pop-ups von den meisten Browsern standardmäßig blockiert werden, muss diese Funktion - in den meisten Fällen - erst einmal für Ihre Shopdomain einmalig erlaubt werden.

Shopware-CMS-Pop-up-blockiert

Im Fall des Google Chrome Browsers reicht es bspw. aus, auf das Icon oben rechts in der Adresszeile zu klicken und hierrüber die Pop-ups für die Seite zu erlauben.

Popups-erlauben

Über die Live-Vorschau können anschließend die verschiedenen Devicegrößen simuliert werden. Sobald ein neues Inhaltselement hinzugefügt oder ein bestehendes aktualisiert wird, findet eine automatische Aktualisierung der Live-Vorschau statt.

Beispiel-Live-Vorschau

Darstellung per Spalten-Layout

Im Folgenden wollen wir das aktuelle Beispiel unter Verwendung des Struktur-Inhaltselements Spalten-Layout erweitern. Hierzu fügen wir dieses zunächst über die Schaltfläche Inhaltselement hinzufügen hinzu. 

Spalten-Layout-fur-Shopware-CMS-Schritt-1

Nachdem Sie das Inhaltselement Spalten-Layout hinzugefügt haben, erscheint auch dieses in der Baumansicht.

Bei diesem Inhaltselement handelt es sich um ein Element, was andere Elemente beinhalten kann. Da wir unser bereits hinzugefügtes "Bild mit Text"-Element über das Spalten-Layout darstellen wollen, verschieben wir dieses in das Spalten-Layout. Klicken Sie hierzu mit der linken Maustaste auf das "Text mit Bild"-Element und halten Sie die Maustaste gedrückt. Fahren Sie mit der Maus anschließend über das Spalten-Layout Element und lassen Sie Maustaste los.

Spalten-Layout-fur-Shopware-CMS-Schritt-2

Bestätigen Sie den folgenden Dialog

Spalten-Layout-fur-Shopware-CMS-Schritt-3

Zur besseren Verdeutlichung der Funktion des Spalten-Layouts duplizieren wir das "Text mit Bild"-Element zwei mal. Klicken Sie hierzu auf die auf das duplizieren-Icon und legen Sie entsprechend zwei Duplikate an.

Spalten-Layout-fur-Shopware-CMS-Schritt-4

Anschließend sollte Ihre Baumansicht wie folgt aussehen

Spalten-Layout-fur-Shopware-CMS-Schritt-5

Klicken Sie nun auf das Stift-Icon, um das Spalten-Layout zu bearbeiten

Spalten-Layout-fur-Shopware-CMS-Schritt-6

An dieser Stelle hinterlegen wir die folgende Beispiel-Konfiguration

Beispielkonfiguration-Spalten-Layout-1

Nachdem die Konfiguration gespeichert wurde, kann das folgende Verhalten in der Live-Vorschau nachgestellt werden.

Ansicht im Desktop und Tablet Landscape Größenbereich

Beispielkonfiguration-Spalten-Layout-2

Darstellung bei Tablet Portrait und Mobile Landscape

Beispielkonfiguration-Spalten-Layout-3

Darstellung mit einer Spalte im Mobile Portrait Größenbereich

Beispielkonfiguration-Spalten-Layout-4