Wie lässt sich ein OpenCart-Shop in Eigenregie erstellen?

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

OpenCart Vorlage für Pizza

Live-Demo | Jetzt kaufen


Responsive OpenCart Vorlage für Car Audio Produkte

OpenCart Vorlage für Car Audio Produkte

Live-Demo | Jetzt kaufen


Responsive OpenCart Vorlage für Möbel

OpenCart Vorlage für Möbel

Live-Demo | Jetzt kaufen


Responsive OpenCart Vorlage für Lebensmittelgeschäft

OpenCart Vorlage für Lebensmittelgeschäft

Live-Demo | Jetzt kaufen

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:

  1. Installationslizenz
  2. Vorinstallation
  3. Konfiguration
  4. Fertig!

Installationslizenz

Überprüft eine OpenCart-Lizenzvereinbarung und klickt auf die “Continue”-Schaltfläche, wenn Ihr damit einverstanden seid.

OpenCart-Lizenzvereinbarung


 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.

 Vorinstallation


 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.

Konfiguration


 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.

Fertige Installation

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

Modulinstallationsprozess

Wählt “Modules” (Module) aus der “Extension type” Dropdown-Liste.

Modules

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.

Pinterest-Kontakt

Ihr könnt die Moduleinstellungen ändern, indem Ihr auf “Edit” klickt.

Pinterest-Edit

Wenn Ihr auf die Schaltfläche “Installieren” klickt, wird der Modulinstallationsvorgang gestartet.

Pinterest-Install

Um das Modul zu entfernen, müsst Ihr auf die Schaltfläche “Deinstallieren” klicken, damit das Modul gelöscht wird.

Cookie

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.

Account

Um das Modul einer bestimmten Seite hinzuzufügen, müsst Ihr die Seitenliste aufrufen.

Navigiert zu Design>Layout im Seitenmenü.

Design-Layouts

Wählt in der Seitenliste die Seite aus, auf der Ihr das Modul platzieren möchtet und klickt auf “Edit”.

Layout-Name

Ihr könnt eine Liste der Module und Modulpositionen sehen, die bereits der Seite hinzugefügt wurden.

Edit-Layout

Folgende Modulpositionen stehen Euch zur Verfügung:

  1. “Header Top” (unter dem Header-Bereich);
  2. Column-left (linke Seitenleiste);
  3. Column-right (rechte Seitenleiste);
  4. Content-top;
  5. 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.

Modulpositionen
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ü-Konfiguration
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.

Megamenü-Bearbeitung

Klickt auf einen der Menüpunkte, um die Bearbeitung zu starten. Füllt die folgenden Felder aus:

Megamenü-Modul
“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:

Menütyp

  • “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;

Spaltenanzahl

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:

Untermenü-Typ

  • “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:

Spalte-N

  • “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”.

Erweiterungen

Wählt “Modules” aus der “Extension type” Dropdown-Liste.

OpenCart-Module
Findet das Logo-Modul. Drückt die “Edit”-Taste, um das Modul zu konfigurieren.
Logo-Modul

Ihr werdet zum Einstellungen-Fenster weitergeleitet:
Logo-Modul bearbeiten
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

Layouts-Verwaltung
Navigiert zu “Extensions” > “Extensions”.
Erweiterungen

Wählt “Modules” aus der “Extension type” Dropdown-Liste.

Modules
Findet den Abschnitt “Layout Builder”. Drückt die “Edit”-Taste, um das bestehende Modul zu konfigurieren.

Layout-Builder

Ihr werdet zum Einstellungen-Fenster weitergeleitet:

Einstellungen

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:

  1. Drückt “Add Column”. Nach dem Klicken auf diese Schaltfläche könnt Ihr die Zeilen hinzufügen. Diese Option hat mehrere Abschnitte:
    1. 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.
    2. Mit der Schaltfläche "Delete" könnt ihr unnötige Spalten entfernen.
    3. 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.
    4. 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.
    5. Verwendet “Delete”-Buton, um die Spalte zu entfernen, die Ihr nicht benötigt.
  2. Mit der Schaltfläche "Edit" könnt Ihr den Spaltenstil anpassen. Wir haben es oben erwähnt.
  3. Das Duplizieren ist ein großartiges Werkzeug, mit dem Ihr Spalten duplizieren könnt, ohne sie manuell kopieren zu müssen.
  4. 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.
Warenkorb
Navigiert zu “Extensions” > “Extensions”.
Erweiterungen
Wählt “Modules” aus der “Extension type” Dropdown-Liste.

OpenCart-Module

Findet das “TemplateMonster Cart”-Modul. Drückt die Edit-Taste, um das Modul zu konfigurieren.
Warenkorb-Anpassung
Ihr werdet zum Einstellungen-Fenster weitergeleitet:
Warenkorb-Modul
Wählt “Disable” aus der “Status option” Dropdown-Liste, um das Modul zu deaktivieren.

Modul-Deaktivierung


Wie man Links im Footer verwaltet

  1. Navigiert zu “Extensions” > “Extensions”.
  2. Wählt “Modules” aus der “Extension type” Dropdown-Liste.
  3. Findet den “TM Footer Link”-Abschnitt. Drückt die Edit-Taste, um das bestehende Modul zu konfigurieren.
  4. 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:

Information

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