Wo? Überblick aller Funktionen Startseite gestalten Diashow Zugangscode Eingabefeld Galerieansicht Ansicht der Einzelbilder Mobil Favicon Eigene Schriftarten Weiteres Eigene CSS

Mit dem Shopdesigner gestaltest du die Kundenansicht deines Onlineshops. Probier dich gern aus, Änderungen werden in Echtzeit im Hintergrund angezeigt. So kannst du sofort entscheiden, ob dir gefällt, was du siehst. Sichtbar werden die Einstellungen erst nach dem Veröffentlichen. Im Folgenden möchten wir dir kurz zeigen, welche Möglichkeiten dir dabei zur Verfügung stehen.

Der Shopdesigner ist in der Desktop-Ansicht nutzbar, nicht in der mobilen Ansicht.

Zu diesem Thema hilft dir auch unser Video-Tutorial auf Youtube:

Wie funktioniert der Shopdesigner? (2:40 Min.)

So gelangst du zum Shopdesigner

Nach dem Einloggen gelangst du zur Übersichtsseite. Klicke danach auf den Button mit dem Auge oben links, um zur Kundenansicht deines Shops zu wechseln.

Klicke dann auf die rotfarbene Schaltfläche "Shopdesigner" am unteren Bildrand.

Überblick aller Funktionen

Der Shopdesigner gliedert sich in die Bereiche Startseite, Galerieansicht, Einzelbild und Weiteres. Klicke auf den Stift zum Bearbeiten oder auf das i für weitere Informationen und Beispiele. Mittels der Pfeile kannst du die Reihenfolge der Komponenten verändern (vgl. Komponenten auf der Startseite). Die Einstellungen, die du vornimmst, kannst du in Echtzeit im Shop sehen und überprüfen. Wenn du damit zufrieden bist, klicke unten rechts auf "Veröffentlichen". Direkt neben den Buttons unten rechts findest du die Pin-Nadel: Diese verhindert das Ausblenden des Shopdesigners, sodass dieser so lange sichtbar bleibt, bis du mit deinen Einstellungen fertig bist und die Änderungen veröffentlichst oder den Shopdesigner schließt.

Startseite gestalten

Bei der Gestaltung deiner Startseite kannst du deiner Kreativität freien Lauf lassen: Wähle für den Kopfbereich einen Text (z. B. Shopname) oder dein Logo aus und gestalte den Hintergrund in einer individuellen Highlightfarbe oder mit einem Foto. Deine Highlightfarbe zieht sich als roter Faden durch dein Shopdesign und ist auch beim Bestellvorgang für deine Kund*innen sichtbar.

Des Weiteren kannst du im Shopdesigner bei den Einstellungen für deine Startseite zwischen verschiedenen Komponenten wählen: 

Diashow, Startseitengrafik, Begrüßungstext oder ein Eingabefeld für Zugangscodes für deine Kund*innen: Alles ist möglich und individuell einstellbar. 
Wenn du den "Like-Button" aktivierst, kann der Shop von Facebook-Nutzern geliket werden. Wenn du die Komponente "Instagram-Link" aktivierst, dann wird dein Instagram-Profil auf der Shop-Startseite verlinkt.

Für die Darstellung der Galerieübersicht hast du verschiedene Designs zur Auswahl und kannst wählen, ob alle Obergalerien oder nur ausgewählte Galerien auf der Startseite erscheinen sollen.

Diashow

Im Shopdesigner kannst du eine Diashow auf deiner Startseite zeigen. Lade dazu beliebige Fotos hoch. Idealerweise haben die Fotos alle dasselbe Seitenverhältnis. Die Fotos werden nach Dateiname sortiert. Die Diashow ist in verschiedenen Layouts verfügbar - diese kannst du im Shopdesigner einstellen. Die Diashow wird auch auf der mobilen Seite des Shops angezeigt.

Suche/Zugangscode: Eingabefeld auf der Startseite

Ein zusätzliches und auffälliges Eingabefeld für die Suche auf der Startseite empfiehlt sich, wenn deine Kunden die Suche regelmäßig nutzen. Dies ist z.B. der Fall, wenn du 

• QR-Code-Fotografie nutzt,
• regelmäßig Passwörter vergibst,
• Galerien hast, in denen die Startnummernsuche aktiviert ist. 

Um das Eingabefeld auf der Startseite anzuzeigen, öffne im Shopdesigner auf der Startseite die "Komponenten" und bearbeite den Menüpunkt "Suche/Zugangscode".

Hier eine Videoanleitung:

Tipp:
Wenn du nur mit zugangsgeschützten Galerien arbeitest, empfehlen wir, das Eingabefeld für den Zugangscode besonders prominent auf deiner Startseite zu präsentieren und möglichst wenig andere Komponenten zu aktivieren. Deine Kund*innen rufen deinen Shop auf, geben ihr Passwort oder den QR-Code in das Eingabefeld ein und landen direkt in der geschützten Galerie.

Profi-Tipp:
Du kannst das Formular zur Eingabe des Zugangscodes auch auf eine bestehende (eigene) Webseite einbinden. Hier gibt es die Anleitung dafür. 

Weitere Informationen zum Thema zugangsgeschützte Kundengalerien haben wir für dich hier in unserem Blog.

Galerie auf Social Media-Kanälen teilen

Ob Social Media Buttons unterhalb der Fotos angezeigt werden sollen, kannst du im Shopdesigner im Bereich "Galerieansicht" >"Social Media" auswählen. Auf der Desktop-Version stehen dir Facebook und Twitter zur Verfügung. Galerien ohne Zugangsschutz können dann auf diesen Portalen geteilt werden.

Wenn die Galerie über ein Smartphone aufgerufen wird, kommt die Option, den Link zur Galerie über WhatsApp zu teilen noch hinzu:

Ansicht der Einzelbilder

Du kannst wählen, ob die Ansicht in der Vorschau des einzelnen Fotos groß oder normal dargestellt werden soll. Optional kannst du deinen Kunden auch die Bildauflösung des Originals anzeigen, diese Option findest du im Shopdesigner (die Bildauflösung wird generell nicht für Vorschaubilder angezeigt).

Direkt zur Bestellansicht: Wenn die Einzelbildansicht übersprungen werden soll, lässt sich das im Shopdesigner im Bereich "Galerieansicht" beim "Bildlayout" anpassen.

GEO-Daten anzeigen lassen

Im Shopdesigner hast du ebenfalls die Möglichkeit, den Aufnahmeort des Fotos anzeigen zu lassen. Dies könnte besonders für dich interessant sein, wenn du Landschaften oder Luftbilder mit Drohnen aufnimmst. Hierfür müssen die GEO-Daten am Foto hinterlegt sein, bevor du es in den Shop lädst. Im Shopdesigner findest du diese Einstellung unter Einzelbild → Aufnahmeort → anzeigen. In der Beschreibung des Bildes im Shop wird der Standort dann auf Google Maps verlinkt.

Mobile Ansicht

Dein Shop wird auch in der mobilen Ansicht optimal dargestellt. Die Highlightfarbe sowie alle Startseitenelemente wie Header, Grafiken, Text und Diashow werden übernommen und für alle mobilen Endgeräte ausgegeben. Deine Kunden können die Fotos also auch ganz leicht unterwegs über Smartphones und Tablets anschauen und bestellen. Wenn du verschiedene Bestelloptionen anbietest, werden diese oberhalb der Galerie übersichtlich dargestellt. Egal ob Sparpaket, Monatskalender oder Galeriedownload: Alles, was auf dem Rechner funktioniert, kann auch auf mobilen Endgeräten beim Kauf genutzt werden.

Mobile Ansicht des Bildlayouts in einer Galerie

Für das Bildlayout in den einzelnen Galerien stehen in der mobilen Version drei verschiedene Darstellungen zur Verfügung. Wenn du dich im Shopdesigner für das quadratische Bildlayout entschieden hast, werden die Bilder in der Galerieansicht auch auf dem Smartphone quadratisch angezeigt. Wenn du dich für die Einstellungen "Blocksatz normal", "Blocksatz groß" oder "Masonry" entscheidest, bleiben die Bildformate in der Übersicht erhalten. Bitte beachte: Für die mobile Darstellung gibt es keinen eigenen Shopdesigner. 

Im Folgenden siehst du als Beispiel, wie die Einstellungen im Shopdesigner unter Galerieansicht > Bildlayout für die mobile Ansicht übernommen werden

Favicon hochladen

In den Shopeinstellungen kann ein eigenes Favicon hochgeladen werden. 

Das Favicon wird im Browser-Tab oder als Bookmark-Icon verwendet und hilft, deinen Shop noch persönlicher erscheinen zu lassen. 

Schriftarten // Google Fonts

Im Shop können auch eigene Schriften verwendet werden. Hierfür empfehlen wir Bunny Fonts oder Google Fonts (bei der Nutzung von Google Fonts ist das Thema Datenschutz zu beachten, hierfür kannst du uns gern kontaktieren oder selbst nachlesen).

Um eine andere Schriftart als Shopfont zu verwenden, muss Folgendes als CSS gesetzt werden: 

Für gesamten Text: body { font-family: "NAME DER FONT", sans-serif; }
Nur für Überschriften: h1, h2, h3 { font-family: "NAME DER FONT", sans-serif; }

Den Import-Code für die Font bekommst du bei den folgenden Diensten.  Zum Beispiel hier: 

Via Bunny Fonts:

Via Google Fonts:

Weiteres

Unter "Weiteres" kannst du im Shopdesigner ...

• ... die Suchfunktion in deinem Shop aktivieren.
• ... verschiedene Menü-Links anzeigen lassen.
• ... Einstellungen am Footer vornehmen.
• ... deine Fotos auch in Schwarzweiß anbieten.
• ... eigene CSS einpflegen.

Suche

Wenn du die Suche im Shopdesigner unter "Weiteres" aktivierst, wird sowohl im Kopfbereich oben rechts als auch auf den Galerieseiten ein Suchfeld angezeigt. Mit dieser Funktion ermöglichst du deinen Kunden, nach Schlagworten im Shop zu suchen. Außerdem wird die Suchfunktion in der Navigation der mobilen Webseite aktiviert.

Menü-Links

1. Produktinformationen: Bietet einen Überblick über das Produktsortiment. Optional kannst du hier nur bestimmte Produkte anzeigen lassen oder eigene Produktbilder verwenden. Klicke dazu im eingeloggten Zustand auf den Bearbeiten-Stift:
   
2. Kundenzugang: Es erscheint ein Eingabefeld für Zugangscodes (Passwörter oder QR-Codes) auf einer neuen Seite.
3. Redaktionslogin: Bildredakteure von Nachrichtenportalen können hier ihre E-Mail-Adresse hinterlassen. Der Login für Redakteure befindet sich zusätzlich im Footer deines Shops. Mehr dazu im Hilfe-Center.

Wähle die gewünschten Einstellungen und klicke auf "Veröffentlichen".

eigene CSS

Über eigenen CSS kannst du den Shop sehr individuell anpassen. Nach und nach werden wir hier einige Beispiele für dich auflisten: 

• Bild-Detailseite → Aufnahmedatum ausblenden:
  .details-taken_at{display:none;}
• Bild-Detailseite → Empfehlungen ausblenden:
  .si-recommend-heading{display:none;} .js-social-media-wrap{display:none;}
• Bild-Detailseite → Dateiname ausblenden:
  .image-details .image-title {display:none}
• Bild-Detailseite → Keywords ausblenden:
  .js-image-details-keywords {display:none;}
• Bild-Detailseite → sehr großes Vorschaubild
  .image-preview-img-wrap .image-preview-img {zoom:150%; border:0;}
• Galerieübersicht → Anzahl der Bilder ausblenden:
  .albums-grid-details {display:none;}
• "Shop verwalten"-Link im Footer ausblenden:
  .footer-nav .footer-login {display:none;}
• Nur passende Formate anzeigen:
  p.product-base-matchable-separator ~ p.product-base.visible {display: none !important;}
.product-base-matchable-separator {display: none !important;}
  
• Instagram-Logo auf Shopstartseite kleiner oder größer darstellen:
  .startpage-instagram-link {zoom: 50%; -moz-transform: scale(0.50);}
• Hintergrundbild im Header (Shop-Startseite) nicht abdunkeln, sondern in Originalfarbgebung anzeigen:
  .header-bg-taint-overlay {background:rgba(0,0,0,0);}