Gambio Tutorials: Testshop-Designs für den eigenen Shop nutzen

28. April 2017

“Wie bekomme ich meinen Shop so gestaltet wie den Testshop 1, 2 oder 3?” – Kaum eine Frage bekommen wir im Forum oder auch im Support so häufig gestellt wie diese.

Im Forum haben wir für einige Shopversionen bereits die passenden Usermods, Content-Manager-Einträge und StyleEdit-3-Einstellungen veröffentlicht, um das Aussehen der Testshops in den eigenen Shop übernehmen zu können.

Doch wie sollten Shopbetreiber vorgehen, um die Testshop-Templates in den eigenen Shop zu übernehmen? Das möchte ich mit diesem kleinen Tutorial erklären.

Hinweis:
Für meine Erklärungen verwende ich die Template-Dateien für Testshop 3, da hier die umfangreichsten Anpassungen vorgenommen werden. Es kann also sein, dass manche Schritte für die anderen Testshop-Styles abweichend sind oder ganz entfallen.
Update:
Für aktuelle Shopversionen ab GX3 v3.8.x ist die Einbindung der Testshop-Designs noch einmal deutlich vereinfacht worden. Wie genau ihr dort vorgehen müsst, erklärt Torben auch hier im Blog.

Das Design des Testshops 3 in den eigenen Shop einbinden

Startseite des Gambio-Testshops 3 Abb. 1: So oder so ähnlich soll es mal aussehen.

 

Achtung:
Anpassungen an Shoptemplate-Dateien haben zur Folge, dass diese mit jedem Update überprüft werden sollten. Hierfür wird die Original-Datei mit der angepassten Version verglichen. Sollte sich an der Original-Datei etwas verändert haben, sollten diese Änderungen in die angepasste Datei übernommen werden. Hierdurch wird sichergestellt, dass eventuelle Bugfixes und Optimierungen in das angepasste Template übernommen werden können.Zum Vergleichen der Dateien empfehle ich folgende Programme:

Vorbereitungen für die Shopanpassung

Zunächst brauchen wir die Dateien, um die Anpassungen überhaupt vornehmen zu können. Aus dem angesprochenen Forenthread, könnt ihr euch das Paket mit Styles herunterladen, welches ihr für euren Shop haben möchtet. Achtet hier bitte unbedingt auf die richtige Shopversion. Pakete für ältere Shopversionen enthalten unter Umständen Datei-Stände, die in neueren Versionen nicht mehr funktionieren und dadurch Probleme verursachen könnten.

Netz und doppelter Boden

Ebenfalls wichtig bei dieser Art von Anpassung ist, immer ein entsprechendes Backup für den Notfall zu haben. Also erstellt euch am besten eine Sicherung eures Shops und eurer Shopdatenbank.

Um auf der absolut sicheren Spur zu sein, legt euch einen Testshop an, in dem ihr die Änderungen vornehmt. Wenn dort alles funktioniert, übertragt ihr die Anpassungen in euren Liveshop. Wie ihr euch einen Testshop einrichten könnt, ist auch im Forum beschrieben.

Habt ihr eure Backups gemacht, können wir damit beginnen die Änderungen im Shop vorzunehmen.

FTP-Programm installieren

Dafür brauchen wir allerdings auch ein FTP-Programm wie FileZilla o.ä. Solltet ihr ein solches nicht schon installiert haben, empfehle ich dies jetzt zu tun, denn sonst geht es hier erstmal nicht weiter 😉

Aufbau der Style-Pakete

Verschaffen wir uns erstmal ein Überblick, was da überhaupt hochgeladen werden soll. Ich verwende für mein Beispiel hier das Paket von Testshop 3, da es die meisten Änderungen enthält und dadurch sehr gut geeignet ist, den kompletten Ablauf einmal durchzuspielen.

Das Vorgehen für die anderen Pakete gestaltet sich analog, sollte es für das von euch gewählte Paket die angesprochenen Dateien nicht geben, macht einfach mit den anderen Dateien weiter.

In dem Paket sehen wir erstmal folgende Dateien und Ordner:

  • content_manager.sql -> Diese Datei enthält alle Texte, die wir in unseren Testshops eingetragen haben.
    ACHTUNG:
    Beim Einfügen dieser SQL-Datei in euren Shop werden sämtliche anderen Einträge aus dem Content Manager überschrieben. Wenn ihr schon selber Texte eingetragen habt, wägt bitte vorher ab, ob es sich wirklich lohnt diese Datei zu übernehmen.
  • StyleEdit3 -> In diesem Ordner befindet sich eine Datei mit den notwendigen Einstellungen, die im Style Edit 3 gemacht werden müssen. Wie man diese Datei importieren kann, erkläre ich weiter unten.
  • templates -> Dieser Ordner enthält alle Anpassungen, die an den Template-Dateien vorgenommen werden müssen, damit der Shop so aussieht, wie unser Testshop 3. Mit dem Upload der Template-Dateien möchte ich nun beginnen.

Upload der Template-Dateien

Wichtig ist hierbei zu beachten, dass der Shop noch keine angepassten Template-Dateien haben sollte. Habt ihr an den HTML-, beziehungsweise CSS- oder JavaScript-Dateien schon etwas geändert, muss vorher abgeglichen werden, ob diese Änderungen möglicherweise an den gleichen Stellen greifen wie die Anpassungen, die ihr jetzt einspielen wollt.

Zum Hochladen der Anpassungen verbindet ihr euch per FTP-Programm mit dem Server, auf dem der Shop liegt. Navigiert hier vom Hauptverzeichnis aus in den Ordner templates/Honeygrid. In eurem heruntergeladenen Style-Paket, findet ihr die gleiche Ordnerstruktur. Navigiert auch hier in den Ordner templates/Honeygrid.

Wenn ihr abgeglichen habt, ob euer Shop Anpassungen enthält oder ihr einen frisch installierten Shop anpassen wollt, dann beginnt mit dem Upload der Dateien. Ihr könnt hier einfach alle Dateien und Ordner aus dem Style-Paket templates/Honeygrid-Verzeichnis in das templates/Honeygrid-Verzeichnis des Shops auf eurem Server laden. Nachdem der Upload abgeschlossen ist, kann es eventuell notwendig sein, den Seiten-Cache des Shops zu leeren.

Hinweis:
Es kann passieren, dass die Dateien _bootstrap_variables.scss, _custom_styles.scss und _template_variables.scss nicht korrekt übertragen werden können. Um diese zu übertragen, kann es erforderlich sein, dass man die bestehenden Dateien aus dem Verzeichnis templates/Honeygrid/styles/custom löscht. Macht euch, sollte der Fall tatsächlich auftreten, bitte eine Sicherung der Originaldateien.

Wundert euch nicht, dass der Shop nach diesen Anpassungen noch nicht hundertprozentig gut aussieht, wir sind ja auch noch nicht fertig 😉

Noch ist die Startseite leer, das ändert sich aber gleichAbb. 2: So sieht die Startseite des Shops nach dem Upload der Template-Dateien aus. Irgendwie noch ziemlich leer, aber das ändert sich gleich.

Anwenden der StyleEdit 3 Konfiguration

Loggt euch in den Gambio Admin eures anzupassenden Shops ein und öffnet den StyleEdit 3, indem ihr unter Darstellung > Template-Einstellungen auf den Button “Shop im Bearbeitungsmodus laden” klickt.

Im geöffneten StyleEdit 3 findet ihr im unteren Drittel den Button “Style upload”. Hier klickt ihr einmal drauf, worauf sich ein Fenster zum Hochladen eines Styles öffnet. Hier könnt ihr einen Namen für den zu erstellenden Style wählen und eine Datei mit den nötigen Style-Informationen hochladen. Diese findet sich im heruntergeladenen Paket unter /StyleEdit3/templates/Honeygrid.

Nach dem Upload der Datei erstellt der StyleEdit 3 einmal die Styles des Shops neu und zeigt diese an. Klickt auf den erstellten Style in der Übersicht Meine Styles und wählt in dem sich öffnenden Dropdown die Option Style aktivieren.

Wenn ihr nicht noch Farben oder andere Einstellungen ändern wollt, sind wir im StyleEdit schon fertig und können uns um den letzten Punkt kümmern.

Hinweis:
Durch die Übernahme der Template-Dateien von Testshop 3, rutscht die Schaltfläche zum Einloggen in den Shop nach unten. Wenn ihr nicht so weit scrollen wollt, ruft ihr einfach die login_admin.php auf, mit der ihr euch auch in euren Shop einloggen könnt.

Einfügen der Content Manager-Einträge

Achtung:
Hierbei werden bestehende Einträge überschrieben. Solltet ihr hier schon Anpassungen gemacht haben, sichert euch diese bitte vorher, damit ihr sie wieder einfügen könnt.

Um die content_manager.sql einzuspielen benötigen wir nur den Shop. Unter Toolbox > SQL > MiniSQL findet sich eine Eingabemaske, um SQL-Befehle einzugeben. Hier kann der Inhalt der content_manager.sql vollständig eingefügt und abgeschickt werden. Anschließend sollten sich sämtliche Content Manager-Einträge aus dem Testshop in eurer Datenbank befinden.

Anpassen der Template-Dateien

Im Fall vom Style-Paket für Shop 3 werden wir jetzt trotzdem von einem recht leeren Shop begrüßt. Warum ist das so? Im Prinzip ist das ganz einfach. Die verwendeten Bilder und Videos sind im Style-Paket nicht enthalten, sodass hier eigenes Material verwendet werden muss. Hierfür müssen unter anderem Einträge im Content Manager und Pfade in Usermod-Dateien angepasst werden.

Hinweis:
Die folgende Anleitung beschreibt das Vorgehen zur Personalisierung von einem Shop mit dem Styling-Paket für Testshop 3. Einige dieser Anpassungen sind für die anderen Shop-Styling-Pakete nicht notwendig. Das Einfügen nicht vorhandener Bilder muss aber auch für die anderen Pakete durchgeführt werden. Das Vorgehen ist hier analog zu dem im Folgenden beschriebenen.

Slider oder Video auf der Startseite?

Es ist möglich einen Slider auf der Startseite anzuzeigen. Über Darstellung > Teaser-Slider könnt ihr einen Slider definieren, der dann anstatt des Videos auf der Startseite angezeigt wird. Hiernach muss allerdings auch die templates/Honeygrid/index-USERMOD.html angepasst und folgender Codeblock entfernt werden:

{if ""|detect_page == "Index"}
    <video autoplay loop id="bgvid">
            <source src="images/content/index/Garten_stumm.mp4" type="video/mp4">
    </video>
{/if}

Wollt ihr hier ein eigenes Video statt eines Sliders mit Bildern anzeigen, ist es notwendig die templates/Honeygrid/index-USERMOD.html anzupassen. Hier findet ihr folgenden Abschnitt, der den Pfad zu einem Video enthält:

<source src="images/content/index/beispielvideo.mp4" type="video/mp4">

Um das Video auszutauschen ladet ein Video in den Ordner images/content/index/ und passt den Dateinamen in der index-USERMOD.html auf den Namen eures Videos an. Nach diesen Änderungen ist ein Leeren des Seitencaches notwendig.

Ein eigenes Logo

Um das Logo gegen ein eigenes auszutauschen, ist eine Anpassung der templates/Honeygrid/snippets/slider-USERMOD.html notwendig. Hier versteckt sich das Logo in folgendem Codeblock:

{else}
    <a class="title-image" href="#recommendations">
        <img src="images/content/index/beispiellogo.svg" alt="Shoplogo" class="img-responsive">
    </a>
{/if}

Um das Logo auszutauschen, ladet am besten euer Logo als SVG in den Ordner images/content/index/ und passt hier den Bildnamen auf den Namen eures Logos an. Zusätzlich sollte der Alt-Tag auf eine passende Bezeichnung für euer Logo geändert werden.

Wollt ihr hier kein extra Logo unterbringen, kann die slider-USERMOD.html einfach gelöscht werden.

Auch nach diesen Änderungen ist ein Leeren des Seitencaches notwendig.

Anpassen von Content Manager-Einträgen anhand des Style-Paketes aus Testshop 3

Auch in den Content Manager-Einträgen müssen ein paar Anpassungen vorgenommen werden, damit hier eure Bilder angezeigt werden. Und wenn wir schon dabei sind, können hier dann auch gleich die verwendeten Blindtexte gegen eure eigenen ausgetauscht werden 😉

Gambio Demo

Beginnen wir hier mit dem Content Gambio Demo (für die bessere Auffindbarkeit später würde ich empfehlen, diesen mit einem für euch sinnvolleren Namen zu versehen). In diesem Content befindet sich ein Bild, welches für den sogenannten Parallax-Effekt, also das Mitscrollen der Bilder auf der Startseite, verwendet wird. Um hier das Bild auszutauschen, schaltet euren Editor auf die Code-Ansicht um. Hier findet ihr dann den folgenden Codeblock, der angepasst werden muss:

<div class="parallax-window" data-image-src="images/content/index/welcome-bg.png" data-parallax="scroll" data-z-index="1" id="welcometext" style="min-height: 0; ">

Gambio DemoAbb. 3: Erster Bereich der Startseite ohne Bild für den Parallax-Effekt

 

Index (Mitte)

Weiter gehts mit dem Content Index (Mitte). Auch in diesem befindet sich ein Bild, welches für den Parallax-Effekt verwendet wird. Schaltet auch hier euren Editor auf die Code-Ansicht um, um folgenden Codeblock zu finden, der angepasst werden muss:

<div class="parallax-window row" data-image-src="images/content/index/tools.jpg" data-parallax="scroll" data-z-index="1" id="content" style="min-height: 0; ">

Auch hier ist das Vorgehen zum Austauschen des Bildes gleich, wie oben bereits geschrieben: Legt unter images/content/index/ ein eigenes Bild in ausreichender Größe ab und passt den Pfad entsprechend an. Anschließend sollte das Bild dann angezeigt werden.

Der Index (Mitte)Abb.4: Auch hier fehlt uns noch ein passendes Bild für den Parallax-Effekt.

 

Index (unten)

Weiter geht es mit dem Content Index (unten). Auch hier wird analog wie oben beschrieben vorgegangen: Die im Editor eingetragenen Bilder werden durch eigene ersetzt.

Der News-BlockAbb. 5: Auch im News-Block müssen noch Bilder ausgetauscht und Texte angepasst werden.

 

Instagram und Twitter einbinden

Allerdings gibt es in diesem Content Manager-Eintrag eine Besonderheit, weshalb er hier noch einmal extra genannt wird: Hier finden sich noch Einträge zum Einbinden von Instagram und Twitter. Wenn ihr diese nutzen wollt, schaut euch einmal bei Instagram, beziehungsweise Twitter an wie die Einbindung konkret funktioniert und passt unten stehende Codezeilen entsprechend an. Solltet ihr keines der beiden verwenden, so könnt ihr die betreffenden Zeilen einfach löschen.

<div class="row">
        <div class="col-xs-12 col-md-6 instagram">
            <h4>Instagram</h4>

            <div style="position: relative; height: 16px; overflow: hidden; padding-top:66.66666666666666%;">
                <iframe allowtransparency="true" class="websta-widgets" frameborder="0" scrolling="no" src="//widgets-code.websta.me/w/4f1a173834fb?ck=MjAxNi0wNS0yOVQyMDoyNjoyMy4wMDBa" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe><!-- WEBSTA WIDGETS - widgets.websta.me -->
            </div>
        </div>

        <div class="col-xs-12 col-md-6 twitter">
            <h4>Twitter</h4>
            <script defer>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
</div>

 

Einbinden von Instagram und TwitterAbb. 6: Hier müssen eigene Codes zum Einbinden von Instagram und Twitter verwendet werden.

 

Kontakt

Hier befindet sich ein Codeblock zum Einbinden einer Google-Map, die den Standort einer eventuell vorhanden Filiale anzeigen kann. Wenn ihr diese nicht benötigt, kann der Code-Block gelöscht werden, andernfalls muss auch hier der Code-Block gegen einen eigenen ausgetauscht werden.

Aus Platzgründen zeige ich euch hier nur den Anfang des Code-Blocks 😉

<div id="contact-map"></div>                                
<script src="//maps.google.com/maps/api/js?language=de&key=AIzaSyBSK-OQ3BmoAgtXk3nY5noK93imcFFFHAw"></script>

Kontakt einbindenAbb. 7: Da der Code zum Einbinden der Google-Map schon verwendet wird, gibt es hier einen Fehler.

 

Über uns

Auch hier befinden sich Bilder, die gegen eigene ausgetauscht werden müssen. Geht dabei wie oben beschrieben vor.

Über uns einbindenAbb. 8: Auch dieser Content wartet darauf, dass er mit passenden Bildern versorgt wird.

 

Weitere Content Manager-Einträge

Natürlich müssen auch die anderen Content Manager-Einträge auf eure Bedürfnisse angepasst werden. Die hier aufgeführten dienen dabei als Beispiel, wie bei der Anpassung vorgegangen werden kann.

Problemlösungen

Sollte es noch dazu kommen, dass Bilder nicht gefunden oder angezeigt werden, bietet es sich an, die Browserkonsole zur Untersuchung dieser Probleme heranzuziehen. Diese könnt ihr in jedem bekannten Browser mit einem Klick auf die Taste F12 eurer Tastatur öffnen. Wechselt hier dann in den Tab “Netzwerk” und ladet eure Seite einmal neu. Hier sollten dann sämtliche Bilder und andere Inhalte, die nicht gefunden werden können, mit einem Fehler 404 gekennzeichnet sein. Diese Inhalte müssen dann in den Usermods und Content Manager-Einträgen gesucht und die Pfade zur Einbindung angepasst werden.

Abschluss

Das war es eigentlich auch schon. Weitere Anpassungen an Texten, Farben oder Templates können jetzt noch umgesetzt werden, um dem Shop einen Feinschliff und die persönliche Note zu verpassen.

Ich hoffe das Tutorial hilft beim Einbauen der Testshop-Styles weiter. Sollte etwas unklar gewesen sein oder nicht funktioniert haben, dann scheut euch nicht im oben schon erwähnten Forenthread zu fragen.

Sollte etwas nicht richtig geklappt haben, spielt bitte euer Backup wieder ein und versucht es mit einer sauberen Basis erneut. Nichts ist frustrierender als in Anpassungen, die nicht richtig geklappt haben, nach einem Fehler zu suchen.

In der nächsten Zeit wird es ein paar weitere Tutorials geben, die sich mit der Funktionsweise des StyleEdit 3 befassen und zeigen sollen, wie sich damit der eigene Shop personalisieren lässt.


Für aktuelle News aus der Welt des E-Commerce folge uns bei Twitter

Selbstverständlich findest du uns auch bei Facebook

Erstelle mit Gambio ganz einfach noch heute deinen eigenen Onlineshop

Mehr erfahren