Wie erstellt man eigenen Magento Onlineshop

Von Jahr zu Jahr gewinnt der Internethandel weltweit zunehmend an Gewicht. Heutzutage wird fast die Hälfte aller Geschäfte online gemacht. Laut Prognosen der Marktforscher wird sich die ansteigende Tendenz in der nächsten Zukunft fortsetzen. Vor diesem Hintergrund sind die Onlineverkäufe nach wie vor zu aussichtsreichen und lukrativen Geschäftsideen zu zählen.

Trotz jeder Menge Hilfsinformationen im Weltnetz bleibt die Frage “Wie eröffne ich den Onlineshop von Grund auf“ immer noch aktuell. Deshalb werden wir uns in diesem Artikel mit der Installation und Einstellungen von Magento CMS auseinandersetzen.


Magento Installation

Jedes CMS sieht es vor, vor der Installation die Dateien auf den Hosting hochzuladen. Nachdem Ihr mit dem Hochladen fertig seid, könnt Ihr mit der Installation von Magento beginnen. Öffnet Euren Browser und gebt in die Adressleiste 'Domainnamen/Pfad zum Magento Verzeichnis' ein. Ihr seht die Startseite des Installationsassistenten angezeigt. Bitte, folgt den nachstehenden Anweisungen zur Installation von Magento.

Füllt alle Informationen über den Host und die Datenbank aus.

Falls Ihr die AGB akzeptiert, klickt auf "Agree and Setup Magento", um die Installation fortzusetzen. Klickt auf "Start Readiness Check", um zu prüfen, ob die gegebenen Servereinstellungen mit Anforderungen für Magento 2 kompatibel sind.

Nachdem der Vorgang abgeschlossen ist, klickt auf "Next".


Hier habt Ihr Details und einige Grundeinstellungen in die Datenbank einzutragen. Legt die Datenbank an - tragt den Host- und Datenbanknamen, Namen des Datenbankbenutzers und das Passwort ein. Fehlen Euch notwendige Details, wendet euch an den Webhoster. Stellt sicher, dass die Datenbank für die Installation von Magento angelegt ist. Vergesst nicht, sie muss leer sein und keine Tabellen enthalten.

Ist alles korrekt, klickt auf "Next".


Hier könnt Ihr die URL des Magento-Backends und des Shop-Frontends ändern. Andere Einstellungen kann man unverändert lassen. Wenn Ihr damit fertig seid, drückt den Button "Next“. Legt die zutreffende Zeitzone, bevorzugte Währung und Sprache des Onlineshops fest. Ihr könnt dabei im Bereich Advanced Modules Configurations Standardmodule abgeben, die installiert/nicht installeirt werden sollen. Wir empfehlen Euch, diesen Punkt unverändert zu lassen.
Da sollt Ihr persönliche Details für den Onlineshopbetreiber eintragen. Ihr habt auch die Login-Daten für den Webmaster anzugeben.

Die Konfiguration des Onlineshops ist abgeschlossen. Drückt den "Install Now Button", um die Installation des Onlineshops zu starten.

Das ist der letzte Installationsschritt. Kopiert den generierten Chiffrierschlüssel und speichert ihn.


Das Theme aktivieren

Ruft das Magento-Backend auf und navigiert zu Content > Menü Configuration.

In der Liste der Onlineshops habt Ihr auf der Global-Main Website "edit" zu klicken. Habt Ihr bestimmte Shopansicht, könnt Ihr sie also redigieren.

In Default Theme klickt auf das Drop-Down-Menü, wählt das gewünschte Theme aus und speichert die Konfiguration, indem der Button "Save Configuration" gedrückt wird.


Logo Konfiguration

Bitte, befolgt diese Schritte bei der Einrichtung des im Paket integrierten Logo-Bildes.[Vorschau erzeugen kann man auf Live Demo page]. Ruft das Magento Backend-Panel und wählt im Seitenmenü Content > Configuration aus.

In der Liste der Onlineshops habt Ihr auf der Global-Main Website "edit" zu klicken.

Ruft die Registerkarte "Header" auf und ladet Euer Logo hoch.


Klickt auf den Button "Save Config".

Um das Logo von Eurem Unternehmen unterzubringen, ladet entsprechendes Bild in den Odner /images Eures Magento Themes. Ihr könnt das Logo über das Modul Theme Options ändern. Um das Logo zu ändern, klickt auf Stores > Settings > Configuration. Dann wählt TEMPLATEMONSTER > Theme Options im Seitenmenü links aus und ruft das Interface der Moduleinstellungen auf. Navigiert zur Registerkarte General > Logo Settings. Die Moduleigenschaften von Theme-Einstellungen werden weiter im Anschnitt TM Extensions Settings behandelt.


Seitenkonfiguration

Damit Euer Theme genauso wie unser Live Demo aussieht, habt Ihr Shopseiten bestimmterweise einzurichten. Wir stellen alle Dateien mit Quellcodes bereit. Ihr sollt sie zum Magento Backend hinzufügen, indem Ihr wie folgt auf die Einstellungstabelle zugreift. Die Einstellungstabelle ist auf der Seite Technical details auf der Theme-Vorschauseite untergebracht. Die Dokumentationsdatei enthält den Link zu dieser Seite:

Das betrifft hauptsächlich die Homepage der Vorlage. Gewöhnlich besteht sie aus folgenden Elementen: Banner, Slider, Galerie usw. Aus dem Hauptmenü wählt Content > Pages aus. Hier sind alle Shopseiten zu finden. Homepage, Über uns, Kundendienst sollen bereits verfügbar sein, deshalb muss man sie nicht hinzufügen. Ihr braucht nur die HTML-Seiten und XML-Inhalte zu aktualisieren. Öffnet einen davon, um den Zugriff zu Inhalten zu bekommen.

Öffnet die Seite und wählt den Reiter Content aus. Darin ist der HTML-Code der Seite vorhanden. Ihr findet den TML-Code der Seite dem entsprechenden Quelldatei entnehmen. Ihr könnt das Quelldatei-Verzeichnis in Template Settings integriert auf der Vorschauseite Eures Themes finden. Kopiert den Code aus der Quelldatei und fügt sie in die Content-Zeile ein.

Seid Ihr mit dem HTML-Code fertig, wechselt zur Registerkarte "Design". Sie verfügt über den HTML-Code der Seite. Der XML-Code erlaubt statische Blöcke und Widgets in die Magento-Seite einzufügen. Den XML-Code hat man ebenfalls wie HTML-Code aus der Quelldatei. Fügt den XML-Code in die Zeile "Layout Update XML".

Vergesst nicht, die gültige Layout-Einstellung auszuwählen. Wollt Ihr eine neue Seite hinzufügen, klickt auf den Button "Add New Page" in der rechten oberen Ecke.


Statische Blöcke konfigugieren

Nachdem Ihr die Seiteneinstellungen abgeschlossen habt, sollt Ihr statische Blöcke konfigurieren. Der Vorgang ist ähnlich: einen Code aus der Quelldatei kopieren und ihn in entsprechende Felder im Magento Backend einfügen. Ihr sollt eine ähnliche Tabelle für die statische Blöcke nutzen.

Der ID-Block kann in Eurer Magento Installation variieren. Ihr könnt den korrekten ID-Block dem Abschnitt Content > Blocks im Backend entnehmen.

Im Hauptmenü navigiert zu Content > Blocks. In der oberen rechten Ecke klickt auf den Button "Add New block", um einen neuen statischen Block hinzufügen.

Gebt den Blocknamen an und ordnet der Identifikation zu. Ihr könnt die Blocksdetails der Tabelle auf der Konfigurationsseite des Templates entnehmen [einen Teil der Konfigurationsseite überprüfen]. Öffnet die Block-Quelldatei und fügt den HTML-Code in den Contentbereich.

Anmerkung: einige Templates verfügen über keine statischen Blöcke, so kann die Tabelle leer sein.


Wie werden Blöcke mit statischem Inhalt angezeigt?

Navigiert im Haupmenü zu Content > Widgets. In der oberen rechten Ecke klickt auf den Button "Add Widget" und fügt das neue Widget ein.

Gebt als Widget-Typ CMS Static Block und das Theme an, zu dem Ihr das Widget hinzufügen möchtet. Klickt auf den Button "Continue".

Auf der nächsten Seite wählt den Widgetnamen, der im Backend angezeigt ist.Im Feld Assign to Store Views wählt die Shopansicht, die das Widget anzeigen wird. Im Block Layout Updates klickt auf den Button Add Layout Update. Im Feld Display On könnt Ihr die Seiten auswählen, die das Widget anzeigen werden. Abhängig davon, welche Seiten ausgewählt wurden, könnt Ihr Zusatzfelder ausfüllen.

Klickt in der rechten Sidebar die Registerkarte "Widget Options" und wählt den gewünschten statischen Block. Vergesst nicht Änderungen zu speichern.

Nach dem Konfigurieren der Seiten und Blöcke ist die Magento Installation abgeschlossen.


Theme-Einstellungen

Um das Modul anzupassen, klickt auf Stores > Settings > Configuration.

Danach wählt TEMPLATEMONSTER > Theme Options in der linken Seitenmenü und Ihr erreicht das Moduleinstellungen-Interface.

Klickt auf Store View: Default Config.

Wählt Store View aus der Dropdown-Liste aus.

Bestätigt die Umschaltung im Pop-Up-Fenster über den Button "OK".


Danach sehen wir den neuen Tab "Theme color settings" unter "General".


Die Registerkarte verfügt über die folgende Struktur

Lasst uns die verfügbaren Optionen betrachten:

  • Logo Image - Ihr könnt Euer Logo-Bild hochladen [Erlaubte Dateitypen: png, gif, jpg, jpeg, svg].
  • Logo Image Width - die Bildbreite in Pixeln angeben.
  • Logo Image Height - die Bildhöhe in Pixeln angeben.
  • Logo image alt text - den Alternativtext fürs Logo-Bild angeben.
  • Welcome text - Ihr könnt den Begrüßungstext individualisieren.
  • Favicon icon - erlaubt alle Dateitypen: ico, png, gif, jpg, jpeg, apng, svg.
  • Site title - bringt den Webseitennamen auf die Homepage unter.
  • Default description - Ihr könnt die Standardbeschreibung für Euren Laden eingeben.
  • Default keywords - Gebt Schlüsselwörter für Euren Shop ein.
  • Copyright - Gebt Hinweise zum Urheberrecht an.


Farbeinstellungen des Themes

Um das Layout zu ändern, entfernt durch Anklicken das Häckchen fürs Feld "Use Website".

Hier könnt Ihr Farben und Hintergründe in Eurem Shop ändern. Alles ist genauso einfach wie der Einsatz des WordPress tools zur Anpassung. Ihr könnt mit ein paar Klicks jede Farbe und Hintergrundbilder verändern.


Header und Footer ändern

In der Header-Tab gibt es Verlinkungen zu sozialen Netzwerken.


Ihr könnt Eure Website mithilfe eines Schrift- und Bildsymbols mit Eurer Facebook-Seite verlinken. Um die URL mit einem Bild hinzufügen, muss man die URL eines Sozialnetzes, Bildbreite, einen alternativen Text für das Bild und das Bild hochladen.

Um die URL mit dem Schriftzeichen einzubinden, habt Ihr ein Bildzeichen einer CSS-Klasse, die URL eines Sozialnetzes hinzuzufügen, die Schriftgröße und Zeilenhöhe anzugeben.


Lasst uns nun die Footer-Einstellungen betrachten.

Im Footer könnt Ihr einen Link zu sozialen Netzwerken hinzufügen und die Position angeben. Um die URL mit einem Bild hinzuzufügen, hat man die URL eines Sozialnetzwerkes, Bildbreite, einen alternativen Text für das Bild und das Bild hochzuladen.

Um die URL mit dem Schriftzeichen einzubinden, habt Ihr ein Bildzeichen einer CSS-Klasse, die URL eines Sozialnetzwerkes hinzuzufügen, die Schriftgröße und Zeilenhöhe anzugeben.


Anpassung der Seitenleiste

Durch das Theme-Einstellungen von TemplatMonster könnt Ihr die Sidebar an Eure Bedürfnisse anpassen. Ihr könnt auswählen, was in der Sidebar angezeigt wird und was die Besucher Eures Shops sehen werden.

Magento СMS ist eine gute Lösung für Euren Onlineshop. Das Standardpaket verfügt über alle Module, die für erfolgreiche Verkäufe unerlässlich sind. Dank offener Quelldatei könnt Ihr Euren Kunden mehr anbieten. Wenn Ihr euch für ein Theme aus unserem Shop entscheiden, könnt Ihr mit der Dokumentation und unserer Unterstützung rechnen. Wagt diesen Schritt und wir stehen immer bereit, Euch zu unterstützen!

Da ist eine kurze Liste von unseren Bestsellern unter Premium Magento Themes:

Magetique - Das umfangreichste multifunktionelle Magento 2 Theme

Vorschau | Kaufen

Decorta - Responsives Magento 2 Theme für Wohndekor

Vorschau | Kaufen

Delveti - Sanitärtechnik Magento Theme

Vorschau | Kaufen

Motor - Autowerkstatt Magento Theme

Vorschau | Kaufen

Wenn es zu Euren Plänen nicht gehört, einen eigenen Onlineshop zu eröffnen, was haltet Ihr vom Portfolio oder Landingpage für Eure Firma? Ihr könnt einen Blick auf unsere Premium Themes werfen. Da findet Ihr sicher etwas nützliches für Euch.

Der Artikel ist ursprünglich auf dem TemplateMonster.com-Blog erschienen und wurde aus dem Englischen übersetzt


Olga Kulmann

Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing über E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und geprüftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.