Konfigurieren des Instant Site-Designs (alt)

Sie können eine responsive Instant Site-Vorlage verwenden, um schnell mit dem Verkauf Ihrer Produkte online zu beginnen. Ihre Website wird auf allen Geräten, Desktops, Tablets und Handys professionell aussehen. Sie können das Erscheinungsbild der Instant Site ganz unkompliziert an Ihre Vorstellungen anpassen. Wenn Sie keine technisch versierte Person sind, können Sie aus den voreingestellten Darstellungsoptionen unter Shop-Verwaltung → Website wählen. Erfahrene Benutzer mit Programmierkenntnissen können CSS-Änderungen vornehmen, um dem Shop ein einzigartiges Aussehen zu verleihen.

Reihenfolge der Abschnitte

Instant Site besteht aus den folgenden Abschnitten:

• Titelbild (die erste Kachel)
• Shop
• Mission des Unternehmens (Warum Sie sich für uns entscheiden sollten)
• Info
• Kundenempfehlungen
• Standort
• Kontaktinformationen 

Sie können alle Abschnitte der Instant Site ausblenden und ihre Reihenfolge auf die gewünschte Art und Weise ändern. Gehen Sie dazu zu Ihrer Shop-Verwaltung → Website, klicken Sie auf Bearbeiten und klicken Sie dann auf Abschnitte sortieren:

Wenn Sie zum Beispiel nur Ihren Shop einrichten, können Sie den Abschnitt Kundenmeinungen ausblenden, bis Sie Feedback von Ihren Kunden erhalten. Wenn Ihr Geschäft saisonaler Natur ist, können Sie den Shop-Teil innerhalb Ihrer Instant Site einfach aus- und dann wieder einblenden, wenn Sie wieder eröffnen. Falls Sie Ihr Titelbild niedriger anzeigen möchten, können Sie es unter einen anderen Abschnitt Ihrer Instant Site verschieben usw.

Themen für das Titelbild

Der Titelbild-Abschnitt stellt Ihren Kunden den Shop vor. Sie können eines von 79 Designs für Ihr Shop-Titelbild auswählen. Gehen Sie dazu in Ihrer Shop-Verwaltung zu Website → Erscheinungsbild der Website→ und klicken Sie auf Bearbeiten → Themen. Wählen Sie das Thema, das Ihrem Unternehmen am nächsten kommt:

Sie können das ausgewählte Thema auch jederzeit bearbeiten: Laden Sie Ihr eigenes Titelbild hoch, ändern Sie die Typografie usw. Möglich ist dies in den entsprechenden Abschnitten des Instant Site Editors. 

Cover-Hintergrund

Unter Hintergrundoptionen können Sie aus den Hintergrundtypen Farbe, Verlauf, Bild oder Video für die erste Kachel Ihrer Instant-Site wählen:

Die Option Farbe eignet sich gut für ein minimalistisches Aussehen oder für eine Kombination mit einem Titelbild (siehe Titelbild-Layouts unten). Sie können jede Farbe als Titelbildhintergrund festlegen:

Für einen fantastischen Look probieren Sie den Typ Verlauf als Titelhintergrund aus. Sie können einen Verlauf aus der Galerie auswählen oder eine Mischung aus zwei Farben mit einem bevorzugten Winkel anwenden:

Für Titelbild können Sie ein Bild von Ihnen oder Ihrem Shop-Team hochladen, ein Bild mit Ihren Waren oder einem anderen Bild, das potenzielle Kunden anlockt, und ihnen einen positiven Eindruck über Ihr Geschäft vermittelt. Die empfohlene Dateigröße für das Titelbild beträgt 1.400 x 1050 Pixel oder größer im JPG-, PNG- oder GIF-Format:

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

Sie können problemlos ein Youtube/Vimeo Video als Titelbildhintergrund hinzufügen, um so Ihre besten Produkte zu präsentieren oder um Ihre Instant Site für ein Ereignis zu animieren – einfach den Link für Ihr Video in das Textfeld setzen, die Änderungen speichern und das Video wird in Ihrem Titelbildhintergrund lautlos abgespielt:

Vielleicht möchten Sie Ihrem Hintergrundvideo ein Overlay hinzufügen, sodass der Text im Video leicht zu lesen ist. Sie können eine vorgeschlagene verwenden oder wählen Sie eine beliebige Farbe oder einen Verlauf für ein Overlay aus.

Titelbild-Layout

Unter Titelbild-Layout können Sie wählen, welchen Teil der ersten Kachel Ihr Titelbild einnehmen soll. Es stehen sechs Optionen zur Auswahl:

Wenn Sie ein Halbbild oder ein Seitenleistenlayout mit einem Titelbild im Hintergrund wählen, beträgt die empfohlene Größe für das Titelbild 1.800х700 px oder 1.200х1200.

Wenn Sie kein Titelbild auf Ihrer Seite benötigen, wählen Sie die Option „Oberes Menü“, um es in eine schmale Kopfzeile zu verwandeln.

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

Call to Action-Schaltfläche

Die Call-to-Action-Schaltfläche bringt Kunden direkt zur Produktliste. Standardmäßig ist sie aktiviert und heißt „Jetzt einkaufen“:

Sie können den Text im Feld Beschriftung der Schaltfläche ändern und einen Namen Ihrer Wahl verwenden. Wenn Sie zum Beispiel Tickets online verkaufen, können Sie sie „Jetzt buchen“ nennen. Für digitale Produkte wie E-Books, Bilder oder andere herunterladbare Materialien kann die Schaltfläche „Jetzt herunterladen“ heißen.

Typografie im Titelbild

Wenn Sie eine andere Farbe und Größe 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 im Menü Typografie vornehmen, das als Nächstes erscheint. Die Schriftfarbe passt sich automatisch der gewählten Schaltflächenfarbe an, damit die Beschriftung gut abgelesen werden kann.

Darüber hinaus können Sie unter Typografie ändern, wie die Überschrift und die Beschreibung der Instant Site aussehen – wählen Sie die gewünschte Schriftart aus einer Dropdown-Liste mit über 60 vorgeschlagenen Schriftarten, erhöhen und reduzieren Sie ihre Schriftgröße und wählen Sie eine beliebige Schriftfarbe aus.

Shop-Logo

Sie können ein Logo hochladen, das auf Ihren Schaufenster-Seiten angezeigt wird. Dieses Logo wird standardmäßig auch in Ihren E-Mail-Benachrichtigungen, Rechnungen und als Favicon verwendet.

Das Store-Logo sollte nicht weniger als 140 x 140 px groß sein (oder mindestens 280 x 280 px für eine gute Darstellung auf Retina). Sie können ein größeres Bild hochladen. In diesem Fall wir wird die Größe automatisch an den Logoblock von 480 x 140 px anpassen.

Die unterstützten Bildformate sind JPEG, PNG, GIF.

So fügen Sie Ihrem Schaufenster ein Logo hinzu: 

1. Rufen Sie von Ihrer Shop-Verwaltung aus Website auf und klicken Sie auf „Bearbeiten“.
2. Klicken Sie auf der geöffneten Seite auf Überschrift & Titelbild.
3. Scrollen Sie nach unten und klicken Sie auf Shop-Logo. 
4. Klicken Sie auf Logo hochladen.
5. Wählen Sie im Dropdown-Menü -Logo-Position aus, wo das Logo angezeigt werden soll. Es gibt auch die Möglichkeit, das Logo auszublenden und es nur für das Favicon zu verwenden.
6. Wenn Sie Ihr Logo rund machen möchten, aktivieren Sie die Option Rundes Logo.
   
   
   

Wenn Sie das Favicon verwenden und das Logo ausblenden möchten, können Sie dies mit CSS-Code tun:

1. Rufen Sie von Ihrer Shop-Verwaltung aus Gestaltung auf.
2. Klicken Sie auf Thema bearbeiten, wenn Sie ein aktives benutzerdefiniertes CSS-Thema haben oder scrollen Sie zum Ende der Seite und klicken Sie auf Thema erstellen → Neues CSS-Thema hinzufügen.
3. Fügen Sie den folgenden Code in Ihr CSS-Thema ein:
   

   div.cover__logo { display: none;}

4. Speichern Sie Ihre Änderungen.

Aktualisieren Sie Ihre Schaufenster-Seite, um die Änderungen zu sehen.

Scroll-Pfeil

Im Menü Scroll-Pfeil können Sie den Pfeil ausblenden, der die Besucher der Seite in den Shopbereich bringt oder einen Text hinzufügen, der die Besucher animieren soll, Ihren Shop zu besuchen:

Top-Menü 

Unter Oberes Menü können Sie das Aussehen der oberen Leiste Ihrer Instant Site anpassen und auswählen, welche Informationen Sie in der Kopfzeile anzeigen möchten: Telefonnummer, Öffnungszeiten, Standort, Links zu sozialen Medien usw.

Um die Überschrift zu ändern und dieser ein traditionelleres Aussehen zu geben, aktivieren Sie die Option Navigation anzeigen. Die Navigation enthält Links zu den folgenden Abschnitten Ihrer einseitigen Instant Site: Speichern, Über uns, Standort, Kontakt:

Voreingestellte Designoptionen für Ihren Shop

Sie können das Aussehen Ihres Shops ändern und es so anpassen, dass dieser Ihre Marke am besten widerspiegelt. So gelangen Sie zu den Designeinstellungen:

Sie können Miniaturbildröße, Seitenverhältnis, Textausrichtung und Rand um die Produktkarte mithilfe der entsprechenden Optionen steuern:

Große Bilder eignen sich ideal, um selbst das kleinste Detail Ihrer Produkte in den Vordergrund zu rücken. Mittelgroße Bilder eignen sich für die meisten Produkte, kleine Bilder haben den Vorteil, dass mehr Produkte auf eine Seite passen. Mit mehreren Optionen für das Seitenverhältnis stehen Ihnen flexible Möglichkeiten zur optimalen Darstellung horizontaler, vertikaler oder quadratischer Bilder zur Verfügung.

Produktlisten und -kategorien

Erweitern Sie das Menü Produktliste &Kategorien, um das Erscheinungsbild der Seiten, auf denen Ihre Produkte aufgelistet werden, anzupassen. Sie können die Sichtbarkeit von Produktname, Preis, SKU, „Jetzt kaufen“-Schaltfläche und Zusätzliches Produktbild ändern:

Falls auf der Shop-Startseite Kategoriekarten angezeigt werden, können Sie die Position des Kategorienamens anpassen.

Unter dem Block Navigation können Sie die Optionen Brotkrümel und „Sortieren nach“ ein- und ausschalten:

Unten können Sie die Option Bildhintergrund abdunkeln aktivieren, um sie im Hintergrund des Shops mehr hervorstechen zu lassen.

Produktseite

Unter dem Menüpunkt Produktseite finden Sie voreingestellte Designoptionen, mit denen Sie das Erscheinungsbild von Seiten mit detaillierten Informationen über Ihre Produkte anpassen können. Hier können Sie die Elemente Seitenlayout, Layout der Bildergalerie und Seitenleiste ändern:

Wenn Sie die Reihenfolge der Blöcke in der Seitenleiste ändern möchten, können Sie die Elemente in der Liste ziehen und ablegen.

Verschiedenes

Unter dem Menüpunkt Verschiedenes können Sie die Sichtbarkeit der Symbole einstellen, die unter Ihren Produktlisten erscheinen. Sie können das Fußzeilenmenü, den „Anmeldelink“ und Brotkrümel deaktivieren:

Insgesamt geben Ihnen die Darstellungsoptionen viel Freiheit beim Aufbau einer einzigartigen professionell aussehenden Website, die Ihre Produkte auf bemerkenswerte Weise präsentiert.

Verwandte Artikel

Verbinden einer Domain mit Instant Site