Wo? Überblick aller Funktionen Startseite gestalten Diashow Designvorlagen Startseite Suche/Zugangscode: Eingabefeld auf der Startseite Galerieansicht Ansicht der Einzelbilder Weiteres Mobil eigene CSS

Mit dem Shopdesigner gestalten Sie die Kundenansicht Ihres Onlineshops. Probieren Sie sich gern aus, Änderungen werden in Echtzeit im Hintergrund angezeigt. So können Sie sofort entscheiden, ob Ihnen gefällt, was Sie sehen. Sichtbar werden die Einstellungen erst nach dem Veröffentlichen. Im Folgenden möchten wir Ihnen kurz zeigen, welche Möglichkeiten Ihnen dabei zur Verfügung stehen.

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

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

So gelangen Sie zum Shopdesigner

Nach dem Einloggen gelangen Sie zur Übersichtsseite. Klicken Sie danach auf den Button mit dem Auge oben links, um zur Kundenansicht Ihres Shops zu wechseln. Klicken Sie dann auf die orangefarbene Schaltfläche "Shopdesigner" am unteren Bildrand.

Überblick aller Funktionen

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

Startseite gestalten

Bei der Gestaltung Ihrer Startseite können Sie Ihrer Kreativität freien Lauf lassen: Wählen Sie für den Kopfbereich einen Text (z. B. Shopname) oder Ihr Logo aus und gestalten Sie den Hintergrund in einer individuellen Highlightfarbe oder mit einem Foto. Ihre Highlightfarbe zieht sich als roter Faden durch Ihr Shopdesign und ist auch beim Bestellvorgang für Ihre Kunden sichtbar.

Desweiteren können Sie im Shopdesigner bei den Einstellungen für Ihre Startseite zwischen verschiedenen Komponenten wählen: 

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

Für die Darstellung der Galerieübersicht haben Sie verschiedene Designs zur Auswahl und können wählen, ob alle Obergalerien oder nur ausgewählte Galerien auf der Startseite erscheinen sollen. 

 Kopfbereich der Shop-Startseite für andere Seiten des Shops übernehmen

Wenn Sie den Kopfbereich Ihrer Shop-Startseite zu Ihrer Zufriedenheit gestaltet haben (Shopname oder Logo, eigenes Foto als Header etc.), können Sie im Shopdesigner auswählen, ob dieser auch auf anderen Seiten im Shop übernommen werden soll. Dies betrifft dann z. B. die Eigenen Seiten, die Kontaktseite und andere. Dort wird der von Ihnen gestaltete Kopfbereich der Startseite übernommen.

Diese Einstellung können Sie im Shopdesigner unter "Startseite" > "Auf allen Seiten" vornehmen, indem Sie das Häkchen bei "anzeigen" setzen.

Beispiel: Der Kopfbereich der Startseite auf der Kontaktseite eines Pictrs-Shops

Diashow

Im Shopdesigner können Sie eine Diashow auf Ihrer Startseite zeigen. Laden Sie 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 können Sie im Shopdesigner einstellen. Die Diashow wird auch auf der mobilen Seite des Shops angezeigt.

Designvorlagen Startseite

Sie möchten sich einen Eindruck verschaffen, wie Sie Ihre Startseite gestalten können? Dafür haben wir verschiedene Vorlagen entwickelt. Diese finden Sie im Shopdesigner im Bereich "Startseite" ganz oben:

Klicken Sie auf den jeweiligen Stil und sehen Sie in Echtzeit, wie sich die Startseite Ihres Shops im Hintergrund verändert. Welche Diashow-Größe gefällt Ihnen am besten? Wie sieht Ihr Shop mit eigenem Logo aus? Mögen Sie Ihr Shopdesign eher schlicht oder auffällig? Nutzen Sie dazu unsere Vorlagen und sehen Sie, was alles möglich ist. Die Vorlagen können Sie nach Belieben weiter bearbeiten. Änderungen können unten rechts veröffentlicht oder verworfen werden.  

Suche/Zugangscode: Eingabefeld auf der Startseite

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

• QR-Code-Fotografie nutzen,
• regelmäßig Passwörter vergeben,
• Galerien haben, in denen die Startnummernsuche aktiviert ist. 

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

Hier eine Videoanleitung:

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

Profi-Tipp:
Sie können 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 Sie hier in unserem Blog.

Galerieansicht wählen

Hier können Sie aus verschiedenen Varianten ein Layout auswählen, in dem Ihren Kund*innen eine Galerie angezeigt werden soll: schlicht, moderat oder auffällig. 

• schlicht: geringe Abstände, links ausgerichtet, gut für eine effiziente Auflistung vieler Bilder
• moderat: größere Abstände, mittig ausgerichtet, gutes Mittelmaß zwischen Funktionalität und visueller Auflockerung
• auffällig: größere Abstände, großer Kopfbereich mit hinterlegtem Foto, wahlweise unterlegt mit Ihrer Highlightfarbe

Wenn Sie sich für die schlichte oder moderate Galerieansicht entscheiden, können Sie zusätzlich auswählen, ob oberhalb der Galerie Ihr Logo oder der Shopname angezeigt werden soll:

Wenn Sie sich für die auffällige Galerieansicht entscheiden, haben Sie die Wahl zwischen einem unscharfen Vorschaubild im Kopfbereich oder einem, das zusätzlich in Ihrer Highlightfarbe gefärbt ist. Hier ein Beispiel für eine Galerieansicht mit auffälligem Layout und Shortlinks im Header, Hintergrund unscharf:

Das Bildlayout bietet Ihnen die Möglichkeit auszuwählen, ob die Bilder der Galerie in der Übersicht quadratisch oder im Blocksatz angezeigt werden. 

Galerie auf Social Media-Kanälen teilen

Ob Social Media Buttons unterhalb der Fotos angezeigt werden sollen, können Sie im Shopdesigner im Bereich "Galerieansicht" >"Social Media" auswählen. Auf der Desktop-Version stehen Ihnen 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

Wählen Sie, ob der Hintergrund in der Einzelansicht Ihrer Fotos weiß oder schwarz sein soll. Je nachdem, welche Kontrastwirkung besser zu Ihren Fotos passt. Außerdem können Sie wählen, ob die Ansicht in der Vorschau des einzelnen Fotos groß oder normal dargestellt werden soll. Optional können Sie Ihren Kunden auch die Bildauflösung des Originals anzeigen, diese Option finden Sie im Shopdesigner (die Bildauflösung wird generell nicht für Vorschaubilder angezeigt).

GEO-Daten anzeigen lassen

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

Weiteres

Unter "Weiteres" können Sie im Shopdesigner ...

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

Suche 

Wenn Sie die Suche im Shopdesigner unter "Weiteres" aktivieren, wird sowohl im Kopfbereich oben rechts als auch auf den Galerieseiten ein Suchfeld angezeigt. Mit dieser Funktion ermöglichen Sie Ihren 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 können Sie hier nur bestimmte Produkte anzeigen lassen oder eigene Produktbilder verwenden. Klicken Sie 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 Ihres Shops. Mehr dazu im Hilfe-Center. 

Wählen Sie die gewünschten Einstellungen und klicken Sie auf "Veröffentlichen".
Zum zusätzlichen Anzeigen der Links im Kopfbereich Ihres Shops, aktivieren Sie im Shopdesigner "Startseite" > "Links im Kopfbereich" anzeigen.

Mobile Ansicht

Ihr 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. Ihre Kunden können die Fotos also auch ganz leicht unterwegs über Smartphones und Tablets anschauen und bestellen. Wenn Sie verschiedene Bestelloptionen anbieten, 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 Sie sich im Shopdesigner für das quadratische Bildlayout entschieden haben, werden die Bilder in der Galerieansicht auch auf dem Smartphone quadratisch angezeigt. Wenn Sie sich für die Einstellungen "Blocksatz normal", "Blocksatz groß" oder "Blocksatz sehr groß" entscheiden, bleiben die Bildformate in der Übersicht erhalten. Bitte beachten Sie: Für die mobile Darstellung gibt es keinen eigenen Shopdesigner. Im Folgenden sehen Sie als Beispiel, wie die Einstellungen im Shopdesigner unter Galerieansicht > Bildlayout für die mobile Ansicht übernommen werden:

1.) Mobile Darstellung Galerieansicht Bildlayout quadratisch
Alle Bilder werden quadratisch angezeigt. Seitenverhältnisse (Quer-/Hochformat) werden nicht berücksichtigt.

2.) "Blocksatz normal" und "Blocksatz groß"
Das Motiv wird auf dem Smartphone eingepasst dargestellt und nicht als Ausschnitt.
Das Seitenverhältnis der einzelnen Bilder wird verdeutlicht. 

 3.) "Blocksatz sehr groß"
Es wird ein Foto pro Zeile auf dem Smartphone-Display angezeigt.
Es wird deutlich ersichtlich, ob es sich um ein Hoch- oder Querformat handelt.

eigene CSS

Über eigenen CSS können Sie den Shop sehr individuell anpassen. Nach und nach werden wir hier einige Beispiele für Sie 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überischt → Anzahl der Bilder ausblenden:
  .albums-grid-details {display:none;}
• "Shop verwalten"-Link im Footer ausblenden:
  .footer-nav .footer-login {display:none;}
• Nur passenden Formate anzeigen:
  p.product-base-matchable-separator ~ p.product-base.visible {display: none !important;}
.product-base-matchable-separator {display: none !important;}
  mobil: optgroup.order-non-match-format-label { display: none; }
• 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);}