Bearbeitung des Startseite-Designs

Sie können eine ansprechende einseitige Vorlage für die Startseite verwenden, um schnell mit dem Verkauf Ihrer Produkte online zu beginnen. Ihre Website wird auf allen Geräten, Desktops, Tablets und Mobilgeräten professionell aussehen. Sie können das Aussehen der Startseite ganz einfach nach Ihren Wünschen ändern. Wenn Sie eine nicht technisch versierte Person sind, können Sie aus den voreingestellten Erscheinungsoptionen wählen oder ein vorgefertigtes Design eines Drittanbieters verwenden. Erfahrene Benutzer mit Programmierkenntnissen können in CSS-Modifikationen eintauchen, um ein einzigartiges Erscheinungsbild des Shops zu schaffen.

In diesem Artikel:

Erscheinungsoptionen für Ihr Startseiten-Cover
Vordefinierte Designoptionen für Ihr Geschäft
Vorgefertigte Themen und Apps
Benutzerdefinierte CSS-Themen

Erscheinungsoptionen für Ihr Startseiten-Cover

Sie können eine ganze Reihe von voreingestellten Designoptionen verwenden, um den Cover-Hintergrund Ihrer Starter-Site zu ändern und Elemente zu bearbeiten, die auf ihr erscheinen. Sie finden sie im MyCOMMERCE Konto → Starterseite, klicken Sie auf Inhalt bearbeiten, den Abschnitt Kopfzeile & Cover.

Design Startseite

Hintergrund

Im Menü Hintergrundeinstellungen können Sie zwischen den Hintergrundtypen Farbe, Verlauf, Bild oder Video für die erste Kachel Ihrer Startseite wählen:

Design Startseite Hintergrund

Die Option Farbe eignet sich für einen minimalistischen Look oder für eine Kombination mit einem Coverbild (siehe unten beschriebene Cover-Layouts). Sie können eine beliebige Farbe als Cover-Hintergrund festlegen:

Design Startseite Hintergrundfarbe

Für einen fantasievollen Look probieren Sie den Overlay-Typ als Cover-Hintergrund aus. Sie können damit einen Farbverlauf aus der Galerie auswählen oder eine Mischung aus zwei beliebigen Farben mit einem bevorzugten Winkel erstellen:

Design Startseite Hintergrund Verlauf ohne Bild

Für ein Titelbild können Sie ein Bild von sich selbst oder Ihrem Filialteam, ein Bild mit Ihren Waren oder ein anderes Bild hochladen, das Ihre potenziellen Kunden anzieht und ihnen einen positiven Eindruck von Ihrem Unternehmen vermittelt. Die empfohlene Dateigrösse für das Cover-Bild beträgt 1000 x 667 Pixel oder grösser, im JPG-, PNG- oder GIF-Format:

Design Startseite Hintergrund ändern

Tipp: Wenn Sie keine guten Bilder für das Cover-Bild haben, können Sie einige tolle Fotos auf Websites mit Stockbildern finden, wie Shutterstock, Stock.Adobe und andere.

Wenden Sie ein Overlay auf Ihr Hintergrundbild an, um den Text gut lesbar zu machen (und eine bestimmte Stimmung zu erzeugen). Es kann ein einfarbiges Overlay oder ein Farbverlauf mit einem benutzerdefinierten Winkel sein:

Sie können ganz einfach ein Youtube/Vimeo-Video als Cover-Hintergrund hinzufügen, um Ihre besten Produkte zu präsentieren oder Ihre Startseite für ein Event zu animieren - legen Sie einfach den Link für Ihr Video in das Textfeld, speichern Sie die Änderungen und das Video beginnt in Ihrem Cover-Hintergrund zu spielen:

Design Startseite Hintergrund Verlauf mit Video

Sie können Ihrem Hintergrundvideo ein Overlay (Farbe darüberlegen) hinzufügen, damit der Text leicht lesbar ist. Sie können eine vorgeschlagene Farbe verwenden oder eine beliebige Farbe oder einen beliebigen Verlauf für ein Overlay auswählen.


Cover-Layout

Im Cover-Layout können Sie wählen, wie das Coverbild in die Seite überfliessen soll. Es stehen sechs Optionen zur Auswahl:

Seitenleiste Hintergrund

Wenn Sie kein Cover auf Ihrer Website benötigen, wählen Sie die Option Top Menu, um es in eine schmale Kopfzeile zu verwandeln.

Sie können auch die Überschrift und die Beschreibung positionieren und ausrichten, um den besten Platz für sie auf Ihrem Cover zu finden.


Aufruf-zu-Aktion-Knopf

Der Call to Action-Knopf führt den Kunden direkt zur Produktliste. Standardmässig ist dieser aktiviert und sagt "Jetzt einkaufen":

Call to action button

Sie können den Wortlaut im Feld Beschriftung des Buttons ändern und einen anderen Namen Ihrer Wahl verwenden. Wenn Sie beispielsweise Tickets online verkaufen, können Sie es "Jetzt buchen" nennen. Für digitale Produkte wie E-Books, Bilder oder andere herunterladbare Materialien kann der Button "Jetzt herunterladen" lauten.


Typografie

Wenn Sie eine andere Farbe und Grösse für die Call-to-Action-Schaltfläche festlegen und eine andere Schriftart für die Beschriftung verwenden möchten, können Sie diese Änderungen unter dem Menü Typografie vornehmen, das als nächstes erscheint. Die Schriftfarbe passt sich automatisch der gewählten Schaltflächenfarbe an, um das Etikett gut lesbar zu machen.

Ausserdem können Sie unter Typografie ändern, wie die Überschrift und die Beschreibung der Startseite aussehen sollen - wählen Sie die gewünschte Schriftart aus einem Dropdown-Menü mit über 60 vorgeschlagenen Schriftarten, vergrössern oder verkleinern Sie deren Schriftgrösse und wählen Sie eine beliebige Schriftfarbe.

Schriftart

Shop-Logo

Unter dem Menü Store-Logo können Sie ein Logo hochladen, das den Kunden auf den Shop-Seiten angezeigt wird. Ihr Original-Logo kann ziemlich gross sein. MyCOMMERCE passt es automatisch an den Block von 480 x 140 px an. Aber es sollte nicht weniger als 140 x 140 px (oder mindestens 280 x 280 px sein, um auf der Retina gut zu rendern). Die unterstützten Bildformate sind JPEG, PNG, GIF.

Tipp: Sie können auch ein Logo für Rechnungen hochladen. Es wird auch in Ihren Bestellbenachrichtigungen angezeigt.

Nachdem Sie Ihr Logo hochgeladen haben, können Sie es durch Aktivieren der Option Rundes Logo in die richtige Richtung lenken:

Logo aendern

Scrollpfeil

Unter dem Scroll-Pfeil-Menü können Sie den Pfeil ausblenden, der die Besucher der Website zum Shop-Bereich führt, oder einen Text hinzufügen, der die Besucher zum Besuch Ihres Shops auffordert:

Scroll Pfeil

Top-Menü

Unter Top Menu können Sie das Aussehen der oberen Leiste Ihrer Startseite anpassen:

  • Wählen Sie, ob Sie Ihre Telefonnummer in der Kopfzeile oder auf dem Cover anzeigen möchten:
Telefonnummer
  • Wählen Sie aus, ob Ihre Social Media-Links in der Kopfzeile oder auf dem Cover der Starter Site erscheinen sollen:
Social Media Link

Sie können auch wählen, ob sie nicht in der ersten Kachel angezeigt werden sollen - in diesem Fall werden die sozialen Links nur in der Fusszeile Ihrer Website angezeigt.

  • Zeigen Sie die Links "Wegbeschreibung erhalten" und "Öffnungszeiten" im Cover an, indem Sie die Schaltflächen für die Optionen Ort anzeigen und Öffnungszeiten aktivieren (beide führen zum Bereich Standort Ihrer  Startseite):
Location auf Hintergrund
  • Zeigen Sie die Navigation in der Kopfzeile, um ihr einen traditionellen Look zu verleihen. Die Navigation enthält die Links zu den folgenden Abschnitten Ihrer einseitigen Startseite: Shop, Über uns, Standort, Kontakt:
Navigation anzeigen
  • Sie können das Warenkorb-Symbol anzeigen aktivieren, um das anklickbare Warenkorb-Symbol in der oberen rechten Ecke des oberen Menüs anzuzeigen:
Warenkorb anzeigen

Nach dem Anklicken öffnet sich die Seite Einkaufswagen Ihres Shops, wo Kunden zur Kasse gehen oder den Einkauf fortsetzen können.

Vordefinierte Designoptionen für Ihr Geschäft

Sie können das Aussehen Ihres Ladens ändern und ihm den Look verleihen, der Ihre Marke am besten widerspiegelt. Sie können auf die Shop-Design-Optionen im MyCOMMERCE Konto → Starterseite zugreifen, klicken Sie auf Inhalt bearbeiten, dann auf Store.

Store-Design anpassen

Hinweis: Die Shop-Design-Optionen replizieren die Einstellungen in Ihrem MyCOMMERCE Konto → Gestaltung. Die Änderungen, die Sie hier vornehmen, wirken sich auf alle Ihre Shopanzeige aus.

Sie können Miniaturbildgrösse, Seitenverhältnis, Textausrichtung und Produktkartenrand mit Hilfe der entsprechenden Optionen steuern:

Store Design

Grosse Bilder sind eine gute Wahl, um Ihre Produkte bis ins kleinste Detail zu präsentieren. Mittlere Bilder sind für die meisten Produkte geeignet, während Sie mit kleinen Bildern mehr Produkte pro Seite einfügen können. Mehrere Seitenverhältnis-Optionen bieten eine flexible Möglichkeit, horizontale, vertikale oder quadratische Bilder optimal darzustellen.


Produktliste und Kategorien

Erweitern Sie das Menü Produktliste & Kategorien, um das Aussehen der Seiten, auf denen Ihre Produkte aufgelistet sind, anzupassen. Sie können die Sichtbarkeit von Produktname, Preis, SKU, Schaltfläche "Jetzt kaufen" und Bild des zusätzlichen Produkts ändern:

Produktanzeige

Tipp: Wenn Sie einen luftigeren Look wünschen, können Sie die Schaltflächen SKU-Nummer und Jetzt kaufen deaktivieren oder sie nur beim Darüberfahren mit der Maus anzeigen.

Falls Sie Kategorienkarten auf der Shop-Homepage angezeigt bekommen, können Sie die Position der Kategorienamen anpassen.

Unter dem Navigationsblock können Sie die Optionen Breadcrumbs und "Sortieren nach" ein- und ausschalten:

Navigation

Unten können Sie die Option Hintergrund der Bilder verdunkeln aktivieren, um sie auf dem Hintergrund des Ladens stärker hervorzuheben.


Produktseite

Unter dem Menü Produktseite finden Sie voreingestellte Designoptionen, mit denen Sie das Aussehen der Seiten mit detaillierten Informationen zu Ihren Produkten anpassen können. Hier können Sie das Seitenlayout, das Layout der Bildergalerie und die Elemente der Seitenleiste ändern:

Produktanzeigen aendern

Wenn Sie die Reihenfolge der Blöcke in der Sidebar ändern möchten, können Sie die Elemente in der Liste per Drag & Drop (Ziehen und Ablegen) verschieben.

Tipp: Sie können zusätzliche Produktbilder hochladen, um Ihren Artikel aus dem besten Blickwinkel zu präsentieren. Für Galeriebilder können Sie gezoomte Bilder mit den wichtigsten Details des Artikels, Seiten- und Rückansicht, Bilder von passenden Produkten oder weiteres Zubehör hochladen.

Verschiedenes

Im Menü Verschiedenes können Sie die Sichtbarkeit der Symbole anpassen, die unter Ihren Produktlisten angezeigt werden. Sie können das Fusszeilenmenü, den Link "Anmelden" und die Breadcrumbs deaktivieren:

Diverses

Insgesamt bieten Ihnen die voreingestellten Erscheinungsoptionen viel Freiheit beim Aufbau einer einzigartigen, professionell gestalteten Webseite, die Ihre Produkte auf bemerkenswerte Weise präsentiert.

Vorgefertigte Themen und Apps

Sie können ein fertiges Design-Thema von Drittanbietern integrieren oder eine Anwendung aus dem MyCOMMERCE App Markt installieren, die Ihnen hilft, Ihr Shopanzeige anzupassen, Farben, Schriften, Schaltflächen zu ändern, zusätzliche Elemente zur Seite hinzuzufügen und vieles mehr.

Mit der Imajize App können Sie die 360°-Ansichten Ihrer Produkte hochladen, die Ihre Waren aus allen Blickwinkeln zeigen. Die Decorator App hilft Ihnen, Ihren Shop ohne CSS-Kenntnisse neu zu gestalten.

Gehen Sie zu Ihrem MyCOMMERCE Konto → Andwendungen→ Store Design, um die Liste der vorgefertigten Designs, erschwinglichen Design-Tools und Add-ons zur Verbesserung des Look and Feel Ihrer Startseite zu sehen.

Benutzerdefinierte CSS-Themen (erweitert)

Wenn Ihr Shopansicht eine erweiterte Anpassung erfordert und Sie mit CSS vertraut sind, können Sie Ihr eigenes CSS-Thema von Grund auf neu erstellen oder fertige CSS-Tweaks aus dem MyCOMMERCE Hilfecenter verwenden, z.B. Buttons in Ihrem MyCOMMERCE Shop ändern. Um mehr über benutzerdefinierte CSS-Themen zu erfahren, lesen Sie mehr über benutzerdefiniertes Design.