EU-Shopversion mit WooCommerce für MASC By Jeff Chastain

Jeff Chastain ist ein US-amerikanischer Haar- und Bartstylist und Influenzer auf Instagram. Für seine Produktlinie MASC By Jeff Chastain entwickelte PERIMETRIK® eine Shopversion mit WooCommerce für den europäischen Markt.

Highlights:

Aufbau und Design im Look and Feel des Originals
Übersichtliche Shopseite mit allen verfügbaren Produkten
Produkt-Highlight: Kuschelbär
Warenkorb mit Produktanzeige in Echtzeit
Komfortabler Bestellablauf und sichere Zahlungsmethoden
Jeff Chastain: Das Gesicht der Produktlinie
Social Media Feed und Hashtag Marketing

Design im Look and Feel des Originals

Der Original US-Shop wurde mit Shopify erstellt und diente PERIMETRIK® als Design-Vorlage bei der Erstellung der europäischen Shopversion mit WooCommerce. Aufgrund der Verwendung zweier verschiedener Shopsysteme unterscheiden sich die beiden Shops an einigen Stellen leicht im Design.

Der Look von Website und Shop ist cool und modern. Neben Weiß und Schwarz dient ein greller Pink-Ton als Highlighter für Buttons etc. Die Startseite wirkt bunt und lebendig: Im eingebundenen Vimeo-Video stellt Jeff den Usern seine Produktlinie vor. Der Instagram-Feed bietet Impressionen und Eindrücke von Jeffs Account.

Das Menü ist unterteilt in die Punkte About, Shop, Cart, Contact und FAQ. Obwohl zunächst mit einer deutschen Sprachversion gelauncht werden sollte, entschied sich das Team um Jeff Chastain während der Projektarbeit doch mit einer englischen Sprachversion im europäischen Raum zu starten. PERIMETRIK® installierte das Mehrsprachen-PlugIn WPML, sodass jederzeit die Möglichkeit besteht weitere Sprachversionen bereitzustellen.

Die Startseite des neuen EU-Shops wurde im Look and Feel des US-amerikanischen Originals erstellt.

Im Shop werden alle verfügbaren Produkte aufgelistet und mit Titel, Preisangabe und Button „Add to cart“ (dt.: „in den Warenkorb“) dargestellt.

Produkt-Übersicht im Shop

Bei den Produkten der Linie MASC By Jeff Chastain handelt es sich um eine kleine Auswahl an Styling- und Pflegeprodukten für Bartträger. Fokus-Produkt im Shop ist der Kuschelbär Beard Straightener, der in verschiedenen Versionen angeboten wird.

Die insgesamt sechs Produkte, die die Linie derzeit umfasst, stellte PERIMETRIK® alle auf der Shop-Übersichtsseite dar. Hier werden alle vorhandenen Produkte mit Thumbnail, Titel und Preis in Euro aufgelistet. Per Klick auf Titel oder Thumbnail wird der Benutzer auf die jeweilige Produkt-Detailseite weitergeleitet. Hier findet er weitere Produktdetails. Anhand des Buttons „Add to Cart“ gelangt das Wunschprodukt dann in den Warenkorb.

Diesen verlinkte PERIMETRIK® im Header an zwei Stellen: Neben dem klassischen Menüpunkt „Cart“ findet der User auch anhand eines kleinen Einkaufwagen-Symbols jederzeit zum Warenkorb zurück. Die Anzahl aller sich im Warenkorb befindenen Produkte wird praktischerweise neben dem kleinen Einkaufswagen-Icon mit angezeigt und in Echtzeit aktualisiert. So hat der Käufer die Anzahl seiner Produkte jederzeit im Blick.

Produkt-Highlight: Kuschelbär

Der Beard Straightener „Kuschelbär“ ist das absolute Highlight im Shop. Da es auf vielen US-amerikanischen Fashion-Blogs und Websites bereits Erwähnungen über den Kuschelbär gibt, integrierte PERIMETRIK® die entsprechenden Brand-Logos präsent auf der Startseite und verlinkte diese im neuen Tab mit der jeweiligen Quelle.

Um zu demonstrieren, wie der Kuschelbär angewendet wird, dient ein GIF, auf dem Jeff zeigt, wie man mit dem Glätteisen seinen Bart in Form bringt. Dieses band PERIMETRIK® ebenfalls in der Homepage ein.

Auch im Video, das auf der Startseite eingebunden wurde, wird der Kuschelbär beworben.

Im integrierten GIF zeigt Jeff Chastain, wie der Kuschelbär richtig angewendet wird.

Im Warenkorb werden alle „eingepackten“ Produkte übersichtlich aufgelistet. Der User kann seine Bestellung noch einmal überprüfen und Produktdetails einsehen. Wenn alles passt, gehts weiter zum Checkout.

Professioneller Warenkorb

Auch bei der Gestaltung des Warenkorbs orientierte sich PERIMETRIK® an der US-Vorlage. Dazu verwendete PERIMETRIK® die von WooCommerce bereit gestellten Tools und glich Layout und Funktionalität an das US-Original an. Die Produkte im Cart werden folgendermaßen dargestellt. Neben dem Thumbnail, auf dem das Produkt gut erkennbar zu sehen ist, findet der User Titel, Informationen zu den Lieferbedingungen und Versandkosten. Daneben werden Preis und Stückzahl angegeben.

Zudem erstellte PERIMETRIK® ein Eingabefeld, über das – falls vorhanden – ein Coupon-Code eingegeben und anhand des Buttons „Apply Coupon“ berücksichtigt werden kann.

Unterhalb der Produktauflistung im Warenkorb folgt der Gesamtpreis mit erneuter Angabe zu Versandkosten und enthaltener Mehrwertsteuer. Per Klick auf „Calcuate Shipping“ öffnet sich ein Formular, in das der Besteller das Empfängerland sowie die Postleitzahl eintragen kann. Aus den Eingaben werden dann die anstehenden Versandkosten berechnet. Diese sind für alle EU-Mitgliedsstaaten kostenlos. Anhand des Buttons „Proceed to Check out“ wird der Käufer weiter zur Kasse geführt.

Komfortabler Bestellablauf und sichere Zahlungsmethoden

Um den Bestellvorgang im Check out abzuschließen, entwickelte PERIMETRIK® einen Prozess mit drei Ebenen:

Step 1 dient zur Eingabe der persönlichen Daten ins Formular. Die Daten-Übermittlung ist durch eine verschlüsselte SSL-Übertragung gewährleistet. Zudem schützt ein Google reCaptcha vor dem Absenden von Bestellungen durch Robots.

In Step 2 wird die Zahlungsart abgewickelt. Bezahlt werden kann via Kreditkarte oder PayPal. Dazu nutzte PERIMETRIK®den Anbieter Stripe und band ein Stripe-Formular zur Eingabe von Keditkartennummer und Datum und Code ein. Wählt der Käufer eine Zahlung via PayPal wird er zur Anmeldung bei PayPal weitergeleitet.

Step 3 dient zur Bestätigung des Kaufabschlusses. Nach getätigtem Kauf erhält der User eine entsprechende Bestätigungsmail mit Details zu Bestellung und Versand.

Der Checkout findet in drei Ebenen statt- In Ebene 1 werden die persönlichen Daten des Bestellers ins Kontaktformular eingetragen. Schritt 2 dient zur Auswahl der gewünschten Zahlungsart und und in Ebene 3 wird die Bestellung bestätigt und abgeschlossen.

In seinem Heimatland, den USA, ist Jeff Chastain ein erfolgreicher Influenzer und hat eine große, barttragende Fan-Community.

Über Jeff

Jeff ist das Gesicht seiner gleichnamigen Linie „MASC By Jeff Chastain“ Auf der Seite „About“ stellt er sich und sein Produkt-Motto kurz vor.

Um Tochtergesellschaft der Linie zu werden, wirbt Jeff Chastain auf seiner Seite für sein Affiliate Program. PERIMETRIK® band die gleichnamige Seite unter dem Menüpunkt „Contact us“ im Header und unter „More Info“ im Footer ein.

Social Media Feed und Hashtag Marketing

Als Influenzer mit über 250.000 Followern verfügt Jeff Chastain über eine große Fan-Community. Da er diese auf seinem Account regelmäßig mit Neuigkeiten füttert, integrierte PERIMETRIK® seinen Instagram-Feed großflächig auf der Startseite. Zudem verlinkte PERIMETRIK® seinen Account per Icon im Footer.

Auf der Seite „About“ stellt Jeff zudem seinen Hashtag # TotesMASC vor. Über den Hashtag können seine Follower jeden Monat abstimmen, für welchen guten Zweck 5 % der Einnahmen von ausgewählten Produkten gespendet werden sollen.

Auf Instagram postet Jeff regelmäßig neue Bilder zum Thema Bart-Trends und vermarktet dabei geschickt seine Produktlinie. Ebenso nutzt er das Netzwerk, um sich sozial zu engagieren.

Fazit:

PERIMETRIK® gelang es mit der Ergänzung einer europäischen Shopversion für MASC By Jeff Chastain dem Look des US-amerikanischen Originals treu zu bleiben und alle Funktionen in ähnlicher Weise umzusetzen. Aufgrund seiner Sicherheitsstandards bei der Datenübermittung innerhalb der Formulare und beim Kaufabschluss wird der EU-Shop den strengeren Datenschutzverordnungen, die innerhalb der Europäischen Union gelten in allen Punkten gerecht.

Mit Hilfe des integrierten Mehrsprachen-PlugIns WPML lassen sich bei Bedarf weitere Sprachversionen für den europäischen Raum ergänzen.