Speaker: Bernd Schmitt WordCamp Berlin 13.5.2017

1. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Onlineshop-Design mit WordPress

2. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Teil 1 - die Basics
Bilder +
Größen
Galerie-
Funktion
Design-
Basics

3. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Die Basics
Den Kundinnen und
Kunden den Weg durch
das Dickicht aufzeigen
Alles Störende
ausblenden

4. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Die Basics
Links zu Pflichtseiten wie Impressum,
Datenschutzerklärung, Widerrufsbelehrung und
AGB* stören das Einkaufserlebnis und führen den
User in die Irre.
Lösung: Verlagerung in Footer-Widgets.
*AGB sind keine Pflicht.
Emotionen verbreiten.
Auf den Produktbildern
ist das nicht immer
möglich – aber im FAQ-
Bereich.

5. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Typografie
Die Wahl der Schriftart beeinflusst die Lesbarkeit einer
Produktbeschreibung. Verschnörkelte Schriften sollten
nur im Ausnahmefall eingesetzt werden.
Die Wahl der Schriftart beeinflusst die
Lesbarkeit einer Produktbeschreibung.
Verschnörkelte Schriften sollten nur im
Ausnahmefall eingesetzt werden.
●
Listen und Aufzählungen
erleichtern die Lesbarkeit
● Listen und Aufzählungen bieten die
Möglichkeit, Keywords in der
Produktbeschreibung zu häufeln
●
Fair-Trade-Kleidung
● Unsere Produzentinnen und
Produzenten erhalten einen fairen
Lohn
●
Unsere Produkte sind mit dem Fair-
Trade-Siegel ausgezeichnet

6. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Der Mobilknopf in Jetpack
●
Mobile Shopping nimmt auf in Deutschland zu –
Onlineshops sollten für Smartphones optimiert sein
●
Eine schnelle Möglichkeit bietet das Plugin Jetpack
●
Über Einstellungen / Writing / Optimize your Site for
Smartphone lässt sich das Theme schnell anpassen
Achtung: Danach Erreichbarkeit von Pflichtseiten
kontrollieren!

7. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Teil 2 – die Galerie
Bilder +
Größen
Galerie-
Funktion
Design-
Basics

8. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Neue Galeriefunktion
in WooCommerce 3.0 Bionic Butterfly
,

9. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Update zu Bionic Butterfly
Aktuelle Version: 3.0.4
Achtung: Nach einem Major-
Update ist mit „Denglisch“
zu rechnen
Es empfiehlt sich, für den
Live-Einsatz mit dem Update
zu warten
Über den Fortschritt bei der deutschen Übersetzung
gibt diese URL Auskunft:
https://translate.wordpress.org/locale/de/default/wp-plugin
Auswahl im Dropdownmenü zwischen:
●
Anrede Du = default
●
Anrede Sie = formal

10. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Galerie-Funktion
●
Durch das Bewegen des Mauszeigers wird die betreffende
Stelle auf dem Produktbild vergrößert. Nativ in
WooCommerce – ohne weiteres Plugin.
●
Mit dem Anklicken der Lupe rechts oben präsentiert
WooCommerce die Galerieansicht.

11. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Galerie-Funktion
Optionen in der Galerieansicht:
● Mit dem Lupenwerkzeug maximale Größe anzeigen lassen
● Mit dem Handwerkzeug Bild verschieben
Projektseite zum Testen: https://rabatte.shop/
Aufgabe: Warum lässt sich das Rahmenbild nicht zoomen?

12. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Touchscreen-Optimierung
● Die neue Galerie ist optimiert
für Touchscreens
● Ein Tip aufs Galeriebild
wechselt das große Bild
●
Ein Tip auf das große Bild löst
Zoom-in und Zoom-out aus

13. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Teil 3 – die Größen
Bilder +
Größen
Galerie-
Funktion
Design-
Basics

14. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Die Größe von Produktbildern
Die Produktbilder-Standardwerte von
WooCommerce:
Katalogbilder: 300x300 px
Einzelnes Produktbild: 600x600 px
Produkt-Vorschaubilder: 180x180 px
Empfohlene Bildgrößen zum Ausreizen
der Galeriefunktion:
750x900 px (Hochkant)
900X900 px (Quadrat)
Auf keine Fall die hier
Katalogbild-Größe
unterschreiten, da sonst der
Zoom nicht funktioniert

15. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Vorteile quadratischer Produktbilder
●
Keine Probleme
beim Wechsel des
Themes
●
Ideal für
Marketing auf
Instagram (aber
nicht für
Pinterest)
● Faustregel: Je
mehr Produkte im
Sortiment, desto
besser ist das
Quadrat
● Einfache
horizontale und
vertikale
Ausrichtung in der
Katalogansicht
● Kein Umrechnen
bei Skalierungen

16. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Individuelle Produktbilder
●
Ästhetischer Aspekt
Kleine Objekte sind schwieriger zu fotografieren als große
Hauptprobleme sind die Ausleuchtung und der Schattenwurf
Lösung: Hohlkehle in Fotostudios mieten oder selbst herstellen
●
Juristischer Aspekt
„What you get is what you see“. Aus wettbewerbsrechtlichen Gründen muss abgebildet sein, was verkauft wird. Gegebenenfalls
deutlichliche Hinweise direkt am oder in der Nähe des Bild anbringen, zum Beispiel: „Ohne Netzteil“.
Vorsicht eBay und Amazon: Die beiden Plattformen nehmen sich das Nutzungsrecht an Händlerbildern heraus!
„Die Teilnehmer übertragen Amazon ein vergütungsfreies, zeitlich unbefristetes, unfassendes Nutzungsrecht, insbesondere zur
Vervielfältigung, Verbreitung, Verarbeitung an allen Werken oder Werkteilen sowie Datenbanken der jedem anderen Katalog
oder jeder anderen Produktinformation, die Teilnehmer im Rahmen des Online-Angebotes von Amazon an Amazon übermitteln
(mit Ausnahme jedes Firmenzeichens, jeder Schutzmarke oder anderen ähnlichen Brandings) einschließlich des Rechts, diese
Inhalte in Printmedien, online, auf CD-Rom, etc. zu publizieren, auch zu Werbezwecken."

17. WordCamp Berlin 13.05.17 | Bernd Schmitt | onlineshop-diy.de
Onlineshop-Design mit WordPress
vielen Dank für eure Aufmerksamkeit