E-Commerce

Schritt für Schritt den eigenen Online-Shop erstellen – Teil 4: Individuelles Design

Robert Brandl

Von Robert

Um Tooltester kostenlos anbieten zu können, verwenden wir Affiliate Links. Falls Sie darüber eines der besprochenen Produkte kaufen, erhalten wir unter Umständen eine Provision. Der Preis den Sie zahlen, verändert sich dadurch nicht.

templateDiese Serie beschreibt die Entstehung des LISICHKA Online Shops. Ich möchte Ihnen damit einen Schritt für Schritt Leitfaden an die Hand geben, wie Sie mit kleinem Budget einen eigenen Online-Shop erstellen können. Hier finden Sie die Themenübersicht.

Um einen Online Shop zu betreiben, der von den Kunden gut angenommen wird, muss der Gesamteindruck stimmen. Das Design macht einen großen Teil dieses Eindrucks aus.

Generell gibt es zwei Wege, wie man das Design eines Homepage-Baukasten Online Shops individualisieren kann:

  • Option 1: man wählt ein vorgebenes Design (Template) aus und passt es an
  • Option 2: man lässt ein komplett individuelles Design anfertigen, das dann programmiert wird

Ein klassisches Template-Layout hat z.B. folgende Struktur (siehe Grafik):
jimdo template
Bei Option 1 kann man sein Logo, die Bannergrafik, Schriftarten sowie Farben soweit anpassen, dass sie zum Unternehmensbild passen – sofern man bereits über ein Firmendesign verfügt. Ein Beispiel für eine angepasste Version eines bestehenden Jimdo-Layouts ist Shopmusic.

Es gibt aber auch Dinge, die man dann aber nicht ohne weiteres ändern kann: die Breite des Gesamt-Layouts oder der Seitenspalte, die Positionierung der Navigationslinks oder der Einsatz kompletter Eigenkreationen wie bei Bobsmade (siehe Bannerbereich und Fußzeile). Häufig ist unter den vorgegebenen Layouts aber bereits etwas passendes dabei.

In unserem Falle wählten wir für den LISICHKA Shop dennoch Option 2. Für Tatianas Online-Shop war das von Anfang an unser Ziel, da das Layout der Lisichka-Handtaschen Homepage genauso wenig von von der Stange kommen soll, wie ihre mühsam ausgearbeiteten, handgefertigten Modeaccessoires.

Erstellung eines Jimdo Templates

Da wir uns in Teil 3 bei der Wahl der Shopsoftware für Jimdo entschieden hatten, werde ich daran die Template-Erstellung erklären. Vielleicht fragen Sie sich, was Template bedeuten soll. Ein Template ist nichts anderes als eine Designvorlage, welche das Aussehen der verschiedenen Elemente der Homepage strukturiert und ordnet (siehe Grafik oben).

In der Regel folgt eine Template-Erstellung grundsätzlich diesen Schritten:

  • Klärung von technischen Grundfragen – was ist möglich, was nicht?
  • Erstellung eines Designs als Grafikdatei (z.B. Photoshop)
  • Programmierung des Templates in HTML und CSS

Anhand des Lisichka Online-Shops können wir diese Schritte ganz praktisch durchlaufen:

Jimdo Designvorlage: technische Grundfragen

Grundsätzlich wichtig ist zu verstehen, dass es folgende Bereiche in einem Jimdo Template gibt:
Content, Sidebar, Navigation und den Footer. Das zeigt die Grafik oben.

Jeder dieser Bereiche muss in Ihrem Template abgebildet sein. Theoretisch können Sie einzelne Bereiche, wie die Sidebar oder den Footer auch ausblenden, das macht allerdings nur in den wenigsten Fällen Sinn.

Jimdo hat ein paar Besonderheiten, über die man schon vor der Anfertigung eines Layouts Bescheid wissen sollte: z.B. kann man momentan noch keine Drop-Down Menüs erstellen. Außerdem ist die seitliche Spalte (Sidebar) auf allen Seiten vorhanden und zeigt grundsätzlich immer den gleichen Content an.

Erstellung des Designs als Grafikdatei

Der nächste Schritt für uns war es, die Gestaltung auf einem Portal für Designwettbewerbe einzustellen. Da wir noch keinen Haus-Grafiker hatten, erschien uns das als die beste Möglichkeit einen Grafiker zu finden, der genau Tatianas Geschmack trifft.

Die genauen Details über den Ablauf der Ausschreibung können Sie hier nachlesen – inklusive Briefingdokument zum Download.

Programmierung des Templates

htmlNachdem man die Grafikdatei – in unserem Falle eine Photoshop Datei – bekommen hat, muss man diese programmieren lassen. Wenn der Programmierer ein Experte in Sachen HTML und CSS ist, dann sollte es relativ problemlos funktionieren.

Ein paar Runden für Fehlerkorrekturen sollte man aber einplanen, falls es das erste mal ist, dass der Programmierer ein Jimdo Template erstellt. Der Programmierer sollte seinen Code auf jeden Fall direkt in Jimdo testen, andernfalls besteht die Möglichkeit, dass Fehler in der Darstellung passieren.

Falls Sie an der Erstellung eines Templates durch uns interessiert sind, können Sie uns gerne für ein Angebot kontaktieren. Wir können Sie bei folgenden Systemen unterstützen: Jimdo, 1&1 Do-It-Yourself Homepage und Weebly.

Für die Programmierung eines von Ihnen bereitgestellten Templates im Photoshop Format müssten Sie mit ca. 300-500 Euro rechnen (je nach Komplexität). Falls Sie auch das Design benötigen, fragen Sie bitte ein individuelles Angebot an.

 


Verwandter Content zum Thema Online Shop

Per Designwettbewerb zum Homepage-Layout – unsere Erfahrungen

Schritt-für-Schritt den eigenen Online Shop erstellen – Einführung

Robert Brandl

Gründer und Geschäftsführer

Servus, ich bin der Gründer von Tooltester! Ursprünglich aus München startete ich mein Berufsleben als Projektmanager in einer digitalen Marketingagentur in Frankfurt, wo ich immer derjenige war, der neue Web-Tools testete. Glücklicherweise konnte ich dieses Hobby im Jahre 2010 in meinen Beruf verwandeln. Ich freue mich von Ihnen zu hören. Sie finden mich auch auf LinkedIn.

Mehr über uns

Hinter den Kulissen dieses Artikels.

Dieser Artikel wurde von unserem Expert:innenteam geschrieben und folgt einem genauen Verfahren..

So arbeiten wir

Kommentare

DE ebook cover

Der Homepage-Kurs für Einsteiger

Wenn Sie sich erst mal mehr Grundlagen anlesen möchten, dann sollten Sie in unserer „Homepage-Anleitung für absolute Beginner“ schmökern. Hier zeigen wir Ihnen Schritt-für-Schritt die einzelnen Schritte beim Aufbau einer eigenen Homepage. Das Beste: das alles kostet Sie keinen Cent.