Während ich neulich meinem Freund mit seinem OpenCart-Shop geholfen habe, habe ich mich entschlossen, eine nützliche Anleitung für diejenigen zu erstellen, die ihren eigenen E-Shop mit dieser Plattform starten wollen. OpenCart ist eine wirklich sehr gute Wahl, also wenn Ihr glaubt, dass Ihr nicht genug Erfahrung in Webentwicklung habt, werdet Ihr feststellen, dass Ihr spezielle Progammierkenntnisse in diesem Fall gar nicht braucht.
TM als Unternehmen bemüht sich ständig mit einem ziemlich großen Sortiment an E-Commerce-Vorlagen Euch die Webseitenerstellung so gut wie es geht näherzubringen und die besten OpenCart Vorlagen, die wir in unserem Portfolio haben, möglichst zeitnah zu präsentieren.
Hier sind die fantastischen 4, die wir Euch gern ans Herz legen möchten:
Responsive OpenCart Vorlage für Pizza
Responsive OpenCart Vorlage für Car Audio Produkte
Responsive OpenCart Vorlage für Möbel
Responsive OpenCart Vorlage für Lebensmittelgeschäft
Lasst uns nun die grundlegenden Schritte zur Erstellung eines OpenCart-Shops ansehen!
Wie installiert man OpenCart CMS
Öffnet einen Browser und gebt den OpenCart-Verzeichnispfad in die Browser-Adressleiste ein (z. B. http://your_domain_name/opencart). Ihr werdet die OpenCart-Installationsseite sehen:
- Installationslizenz
- Vorinstallation
- Konfiguration
- Fertig!
Installationslizenz
Überprüft eine OpenCart-Lizenzvereinbarung und klickt auf die “Continue”-Schaltfläche, wenn Ihr damit einverstanden seid.
Vorinstallation
Im zweiten Schritt wird OpenCart CMS prüfen, ob Eure Hosting-Einstellungen mit den erforderlichen Einstellungen übereinstimmen und ob die Dateien und Ordner-Berechtigungen korrekt sind.
Konfiguration
Im Konfigurationsschritt müsst Ihr Eure Datenbankdetails eingeben. Die MySQL-Datenbank wurde während der Vorinstallation erstellt, jetzt müsst Ihr die von Ihnen verwendeten Details eingeben:
- Datenbankserver;
- Datenbankname;
- Datenbankbenutzername.
Wenn es irgendwelche Probleme mit den Datenbankdetails gibt, wendet Euch an Euren Hosting-Provider. Ihr müsst den Administratorbenutzer für Euren Laden erstellen. Gebt den Namen, Passwort und Administrators E-Mail-Adresse ein. Die Details, die Ihr eingebt, werden zur Anmeldung in Eurem Shop-Backend verwendet.
Fertig!
Dies ist der letzte OpenCart-Installationsschritt. Ihr seht 2 Optionen: Ihr könnt zu Eurer OpenCart-Website oder zum OpenCart-Admin-Panel umgeleitet werden.
Wichtig: Entfernt den Ordner "install" von Eurem Server. Ihr könnt den E-Shop nicht mehr öffnen, solange der Ordner auf dem Server bleibt. Die Installation ist abgeschlossen. Um die Shop-Seite zu öffnen, gebt den Domain-Namen in die Browser-Adressleiste ein. Um auf das OpenCart Admin-Panel zuzugreifen, gebt domain_name/admin ein.
So installiert man eine OpenCart Vorlage
Falls Ihr bereits einen fertigen OpenCart-Shop habt und ihn nur mit Hilfe des Themes ändern möchtet, verwendet die folgende Installationsmethode.
- Um eine OpenCart-Vorlage zu installieren, müsst Ihr die Dateien auf den Server hochladen. Ihr findet das "themeXXX (update) .zip" Archiv im OpenCart Ordner, es sollte auf Eurem Computer entpackt werden.
- Danach ladet die entpackten Dateien in das Stammverzeichnis der OpenCart-Installation hoch. Ihr könnt die detaillierten Videoanweisungen zum Hochladen von Dateien auf den Server als Hilfe nutzen.
- Öffnet Eure Website mit einem Browser und fügt am Ende Eure Website-URL in die Browser-Adressleiste ein (z. B. http://your_domain_name/opencart/install).
- Klickt auf die Schaltfläche “Continue”. Es kann einige Zeit dauern.
- Geht zum Administrationsfenster, navigiert zu “Extensions>Extension” Installer und ladet die themeXXX (extensions) Archivdateien hoch. Wenn alle Dateien hochgeladen sind, navigiert zu “Extensions > Modifications” und drückt auf “Aktualisieren” in der oberen rechten Seite des Bildschirms.
- Im nächsten Schritt navigiert zu “System” > “Settings”, geht zur Shop-Registerkarte (Store tab ) und wählt themeXXX template im Template-Feld.
Wie installiert man OpenCart-Module
Der Modulinstallationsprozess umfasst mehrere Schritte. Navigiert zu Ihrem Administrationsbereich (fügt das Wort “Admin” Euer Website-URL in der Browser-Adressleiste - www.yoursite.com/admin hinzu).
Navigiert zu "Extension"> "Extension".
Wählt “Modules” (Module) aus der “Extension type” Dropdown-Liste.
Ihr werdet die Liste der installierten und einbaufertigen Module sehen. Wenn Ihr den “Uninstall”-Button neben einem Modul sieht, bedeutet dies, dass das Modul bereits installiert ist.
Ihr könnt die Moduleinstellungen ändern, indem Ihr auf “Edit” klickt.
Wenn Ihr auf die Schaltfläche “Installieren” klickt, wird der Modulinstallationsvorgang gestartet.
Um das Modul zu entfernen, müsst Ihr auf die Schaltfläche “Deinstallieren” klicken, damit das Modul gelöscht wird.
Wenn die Installation abgeschlossen ist, müsst Ihr das Modul konfigurieren. Die Einstellungen können je nach Modul variieren, aber das Feld “Status” ist für alle gleich - das Feld erlaubt Euch, das Modul ein- oder auszuschalten.
Um das Modul einer bestimmten Seite hinzuzufügen, müsst Ihr die Seitenliste aufrufen.
Navigiert zu Design>Layout im Seitenmenü.
Wählt in der Seitenliste die Seite aus, auf der Ihr das Modul platzieren möchtet und klickt auf “Edit”.
Ihr könnt eine Liste der Module und Modulpositionen sehen, die bereits der Seite hinzugefügt wurden.
Folgende Modulpositionen stehen Euch zur Verfügung:
- “Header Top” (unter dem Header-Bereich);
- Column-left (linke Seitenleiste);
- Column-right (rechte Seitenleiste);
- Content-top;
- Content-bottom;
Das Feld “ Sort Order” zeigt die Reihenfolge der Module, die der gleichen Position zugeordnet sind. Um ein Modul zu einer Seite hinzuzufügen, klickt auf “Add Module”. Wählt die gewünschte Modul und Modulposition aus und klickt auf “Save”. Die Modulinstallation ist abgeschlossen.
Verfügbare Einstellungen:
- “Module Name” — Modulname;
- “Width” — Modulbildbreite;
- “Height” — Modulbildhöhe;
- “Blur” — Aktivierung/Deaktivierung des Verwischens des Bildes, wenn seine Größe zu klein ist;
- “Direction” — legt die Richtung der Parallaxenbewegung fest. “Normal” - Parallax-Scrolling bewegt sich in die entgegengesetzte Richtung, “Inverse” - parallel dazu;
- “Speed” — setzt das Geschwindigkeitsverhältnis für Parallax, bezogen auf die Basisrate. Wert: von 0 bis 2;
- “Status” — Modulstatus (enabled/disabled) bzw. aktiviert/deaktiviert.
So aktiviert man das Megamenü
Mit dem “TM Megamenu” Modul könnt Ihr komplexe Menüs erstellen. Es bietet die Möglichkeit, ein einzelnes Element (ohne Untermenüs), ein Element mit einem Untermenü und ein Element mit dem mehrreihigen und mehrspaltigen Untermenüblock anzuzeigen. Dieses Modul kann in den verschiedenen Positionen angezeigt werden, aber mit dem gleichen Inhalt.
Um Megamenü zu aktivieren, navigiert zu “Extensions > Modules > TM Megamenu page”, drückt die “Edit”-Schaltfläche neben dem entsprechenden Eintrag und wählt die Option “Enabled” im neuen Fenster.
So wird das Megamenü konfiguriert
Megamenü-Elemente. Die wichtigsten Punkte im Menükern.
Megamenü-Bearbeitung beginnt hier. Um Megamenü-Parameter zu bearbeiten, öffnet bitte Euer Website-Admin-Panel und navigiert zu ”Extensions > Modules > TM Megamenu > TM Megamenu page”, wie auf dem Screenshot unten. Auf der nächsten Seite könnt Ihr Menüpunkte erstellen, entfernen und bearbeiten.
Klickt auf einen der Menüpunkte, um die Bearbeitung zu starten. Füllt die folgenden Felder aus:
“Menu Item type” — Menütyp (“regular/megamenu”);
Für 'Custom' Option:
- “Menu title” — Menübezeichnung;
- “Menu link” — Menü-Link;
- “Show megamenu” — Megamenü anzeigen;
Wenn die Option "Megamenü anzeigen" (3) auf "Ja" gesetzt ist, werden die folgenden zusätzlichen Felder angezeigt. Füllt bitte diese Felder aus:
- “Columns count” — Spaltenanzahl;
- “Columns per row” — Anzahl der Spalten pro Zeile;
- “Background image” — Hintergrundbild;
- “Background image width” — Breite des Hintergrundbildes;
- “Background image height” — Höhe des Hintergrundbildes;
Nach dem Ausfüllen des Feldes "Columns count" stehen folgende Optionen zur Verfügung: "Column N". Füllt bitte die Registerkarten aus:
- “Column width” — Säulenbreite;
- “Columns content “— Spalteninhalt;
- “Categories(Products) limit” — maximale Anzahl von Kategorien oder Produkte in der Spalte;
- “Module” — Modulname;
- “Category name” — Kategoriename;
- “Show Category name” — Kategorienamen anzeigen;
Für 'Kategorie' Option:
- “Menu item submenu type” — Untermenü-Typ;
Nach dem Auswählen des Typs "Megamenu" im Feld "Menu Item type" stehen folgende zusätzliche Megamenü-Einstellungen zur Verfügung:
- “Columns count” — Spaltenanzahl;
- “Columns per row” — Anzahl der Spalten pro Zeile;
- “Background image” — Hintergrundbild;
- “Background image width” — Breite des Hintergrundbildes;
- “Background image height” — Höhe des Hintergrundbildes;
Nach dem Ausfüllen des Feldes "Columns count" stehen folgende Optionen zur Verfügung: "Column N". Füllt bitte die Registerkarten aus:
- “Column width” — Säulenbreite;
- “Columns content “— Spalteninhalt;
- “Categories(Products) limit” — maximale Anzahl von Kategorien oder Produkte in der Spalte;
- Module — Modulname;
So ändert man das Logo in einer OpenCart-Vorlage
Navigiert zu “Extensions” >”Extensions”.
Wählt “Modules” aus der “Extension type” Dropdown-Liste.
Findet das Logo-Modul. Drückt die “Edit”-Taste, um das Modul zu konfigurieren.
Ihr werdet zum Einstellungen-Fenster weitergeleitet:
Verfügbare Einstellungen:
- “Module Name” — Modulname;
- “Width” — Logo-Bildbreite in Pixel;
- “Height” — Logo-Bildhöhe in Pixel.
- “Status” — Modul-Status (aktiviert/deaktiviert).
Layouts verwalten und erstellen
Navigiert zu “Extensions” > “Extensions”.
Wählt “Modules” aus der “Extension type” Dropdown-Liste.
Findet den Abschnitt “Layout Builder”. Drückt die “Edit”-Taste, um das bestehende Modul zu konfigurieren.
Ihr werdet zum Einstellungen-Fenster weitergeleitet:
Grundeinstellungen eines Moduls:
- “Status” — Modul-Status (aktiviert/deaktiviert);
- “Module Name” — Modulname;
- “Module Class” — Modulklasse;
- “Module ID” — ID eines Moduls.
Um ein neues Layout zu erstellen, drückt den “New Layout View”-Button.
Das Modul verfügt über mehrere Schaltflächen, die den Bearbeitungsvorgang wesentlich erleichtern. Schauen wir sie genauer an:
- Drückt “Add Column”. Nach dem Klicken auf diese Schaltfläche könnt Ihr die Zeilen hinzufügen. Diese Option hat mehrere Abschnitte:
- Fügt nach dem Hinzufügen einer Spalte eine Zeile ein. Um Zeilen hinzuzufügen, drückt auf die “Add Row”-Schaltfläche. Die Anzahl der Spalten in der Zeile ist unbegrenzt und Ihr könnt so viele Spalten hinzufügen, wie Ihr möchtet. Die Breite der Spalten kann direkt nach dem Hinzufügen mit Hilfe der Drag-and-Drop-Funktion durch Ziehen des rechten Randes der Spalte eingestellt werden.
- Mit der Schaltfläche "Delete" könnt ihr unnötige Spalten entfernen.
- Nach dem Klicken auf den “Edit”-Button werdet Ihr ein Popup-Fenster mit einem großartigen Anpassungstool sehen, mit dem Ihr den Spalten- / Zeilenstil ändern könnt. Es kann Euch helfen, den Hintergrund festzulegen und die Randwerte für Eure Blöcke zu ändern.
- Nach dem Hinzufügen der Spalten solltet Ihr sie mit Inhalten (Modulen) ausfüllen. Um ein Modul hinzuzufügen, klickt auf die “Add Widget“-Schaltfläche und wählt das gewünschte Dropdown-Menü aus. Ihr bekommt Zugang zum Interface mit Modul-Einstellungen über den Layout-Builder, indem ihr im Modulblock die Schaltfläche "Edit" drückt.
- Verwendet “Delete”-Buton, um die Spalte zu entfernen, die Ihr nicht benötigt.
- Mit der Schaltfläche "Edit" könnt Ihr den Spaltenstil anpassen. Wir haben es oben erwähnt.
- Das Duplizieren ist ein großartiges Werkzeug, mit dem Ihr Spalten duplizieren könnt, ohne sie manuell kopieren zu müssen.
- Die Sortieroption lässt Euch die Spaltenreihenfolge ändern.
Nach dem Einrichten aller Zeilen, Spalten und Module speichert das Builder-Modul und zeigt es in einer der Positionen auf der Hauptseite des E-Shops an.
Wie richtet man einen Warenkorb ein?
“Cart Module” ist die Erweiterung, die es Euch erlaubt, den Warenkorb auf Eurer Website anzuzeigen.
Navigiert zu “Extensions” > “Extensions”.
Wählt “Modules” aus der “Extension type” Dropdown-Liste.
Findet das “TemplateMonster Cart”-Modul. Drückt die Edit-Taste, um das Modul zu konfigurieren.
Ihr werdet zum Einstellungen-Fenster weitergeleitet:
Wählt “Disable” aus der “Status option” Dropdown-Liste, um das Modul zu deaktivieren.
Wie man Links im Footer verwaltet
- Navigiert zu “Extensions” > “Extensions”.
- Wählt “Modules” aus der “Extension type” Dropdown-Liste.
- Findet den “TM Footer Link”-Abschnitt. Drückt die Edit-Taste, um das bestehende Modul zu konfigurieren.
- Ihr werdet zum Fenster mit Einstellungen geleitet:
- “Module Name” — Modulname;
- “Links Group” — wählt eine Link-Gruppe zur Darstellung im Footer;
- “Status” — definiert den Modul-Status (aktiviert/deaktiviert).
Frontend:
- “Module Name” — TM Footer Links Information;
- “Links Group” — Information;
- “Status” — aktiviert.
Fazit
OpenCart ist eine dieser großartigen Plattformen, die Euch es ermöglichen, Euren eigenen E-Shop zu kreieren und ein erfolgreiches Geschäft aufzubauen, ohne eine einzige Codezeile zu schreiben. Ansonsten seid Ihr immer willkommen in unserem gesamten Premium-Sortiment zu stöbern.