{"id":8539,"date":"2017-04-28T12:00:42","date_gmt":"2017-04-28T10:00:42","guid":{"rendered":"http:\/\/www.gambio.de\/blog\/?p=8539"},"modified":"2018-03-13T14:41:19","modified_gmt":"2018-03-13T13:41:19","slug":"testshop-templates-nutzen","status":"publish","type":"post","link":"https:\/\/www.gambio.de\/blog\/testshop-templates-nutzen\/","title":{"rendered":"Gambio Tutorials: Testshop-Designs f\u00fcr den eigenen Shop nutzen"},"content":{"rendered":"<p><em>\u201cWie bekomme ich meinen Shop so gestaltet wie den <a href=\"https:\/\/www.gambio.de\/Jetzt-Testen.html\" target=\"_blank\" rel=\"noopener\">Testshop 1, 2 oder 3<\/a>?\u201d<\/em> &#8211; Kaum eine Frage bekommen wir im <a href=\"https:\/\/www.gambio.de\/forum\">Forum<\/a> oder auch im Support so h\u00e4ufig gestellt wie diese.<\/p>\n<p>Im Forum haben wir f\u00fcr einige Shopversionen bereits <a href=\"https:\/\/www.gambio.de\/forum\/threads\/neue-testshops-sind-online.25422\/\" target=\"_blank\" rel=\"noopener\">die passenden Usermods, Content-Manager-Eintr\u00e4ge und StyleEdit-3-Einstellungen ver\u00f6ffentlicht<\/a>, um das Aussehen der Testshops in den eigenen Shop \u00fcbernehmen zu k\u00f6nnen.<\/p>\n<p>Doch wie sollten Shopbetreiber vorgehen, um die Testshop-Templates in den eigenen Shop zu \u00fcbernehmen? Das m\u00f6chte ich mit diesem kleinen Tutorial erkl\u00e4ren. <!--more--><\/p>\n<div class=\"alert alert-warning\"><b>Hinweis:<\/b><br \/>\nF\u00fcr meine Erkl\u00e4rungen verwende ich die Template-Dateien f\u00fcr Testshop 3, da hier die umfangreichsten Anpassungen vorgenommen werden. Es kann also sein, dass manche Schritte f\u00fcr die anderen Testshop-Styles abweichend sind oder ganz entfallen.<\/div>\n<div class=\"alert alert-danger\"><b>Update:<\/b><br \/>\nF\u00fcr aktuelle Shopversionen ab GX3 v3.8.x ist die Einbindung der Testshop-Designs noch einmal deutlich vereinfacht worden. Wie genau ihr dort vorgehen m\u00fcsst, erkl\u00e4rt Torben auch <a href=\"https:\/\/www.gambio.de\/blog\/gambio-tutorials-aenderungen-demoshop-templates\" target=\"_blank\" rel=\"noopener\">hier im Blog<\/a>.<\/div>\n<hr \/>\n<h2>Das Design des Testshops 3 in den eigenen Shop einbinden<\/h2>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/shop3_basis.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8540\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/shop3_basis.png\" alt=\"Startseite des Gambio-Testshops 3\" width=\"700\" height=\"373\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/shop3_basis.png 1600w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/shop3_basis-350x186.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/shop3_basis-768x409.png 768w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/shop3_basis-1024x545.png 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a> <em>Abb. 1: So oder so \u00e4hnlich soll es mal aussehen.<\/em><\/p>\n<p>&nbsp;<\/p>\n<div class=\"alert alert-danger\"><b>Achtung:<\/b><br \/>\nAnpassungen an Shoptemplate-Dateien haben zur Folge, dass diese mit jedem Update \u00fcberpr\u00fcft werden sollten. Hierf\u00fcr wird die Original-Datei mit der angepassten Version verglichen. Sollte sich an der Original-Datei etwas ver\u00e4ndert haben, sollten diese \u00c4nderungen in die angepasste Datei \u00fcbernommen werden. Hierdurch wird sichergestellt, dass eventuelle Bugfixes und Optimierungen in das angepasste Template \u00fcbernommen werden k\u00f6nnen.Zum Vergleichen der Dateien empfehle ich folgende Programme:<\/p>\n<ul>\n<li><b>Windows<\/b>: <a href=\"http:\/\/winmerge.org\/?lang=de\">WinMerge<\/a><\/li>\n<li><b>Linux<\/b>: <a href=\"http:\/\/meldmerge.org\/\">Meld<\/a><\/li>\n<li><b>Mac<\/b>: <a href=\"https:\/\/yousseb.github.io\/meld\/\">Meld for Mac<\/a><\/li>\n<\/ul>\n<\/div>\n<h2>Vorbereitungen f\u00fcr die Shopanpassung<\/h2>\n<p>Zun\u00e4chst brauchen wir die Dateien, um die Anpassungen \u00fcberhaupt vornehmen zu k\u00f6nnen. Aus dem angesprochenen <a href=\"https:\/\/www.gambio.de\/forum\/threads\/neue-testshops-sind-online.25422\/\" target=\"_blank\" rel=\"noopener\">Forenthread<\/a>, k\u00f6nnt ihr euch das Paket mit Styles herunterladen, welches ihr f\u00fcr euren Shop haben m\u00f6chtet. <strong>Achtet hier bitte unbedingt auf die richtige Shopversion.<\/strong> Pakete f\u00fcr \u00e4ltere Shopversionen enthalten unter Umst\u00e4nden Datei-St\u00e4nde, die in neueren Versionen nicht mehr funktionieren und dadurch Probleme verursachen k\u00f6nnten.<\/p>\n<h3>Netz und doppelter Boden<\/h3>\n<p>Ebenfalls wichtig bei dieser Art von Anpassung ist, immer ein entsprechendes Backup f\u00fcr den Notfall zu haben. Also erstellt euch am besten eine Sicherung eures Shops und eurer Shopdatenbank.<\/p>\n<p>Um auf der absolut sicheren Spur zu sein, legt euch einen Testshop an, in dem ihr die \u00c4nderungen vornehmt. Wenn dort alles funktioniert, \u00fcbertragt ihr die Anpassungen in euren Liveshop. Wie ihr euch einen Testshop einrichten k\u00f6nnt, ist auch im <a href=\"https:\/\/www.gambio.de\/forum\/threads\/shopumzug-neue-domain-neuer-ordner-neuer-server-testshop-erstellen-usw.14424\/\">Forum<\/a> beschrieben.<\/p>\n<p>Habt ihr eure Backups gemacht, k\u00f6nnen wir damit beginnen die \u00c4nderungen im Shop vorzunehmen.<\/p>\n<h3>FTP-Programm installieren<\/h3>\n<p>Daf\u00fcr brauchen wir allerdings auch ein FTP-Programm wie <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\">FileZilla<\/a> o.\u00e4. Solltet ihr ein solches nicht schon installiert haben, empfehle ich dies jetzt zu tun, denn sonst geht es hier erstmal nicht weiter \ud83d\ude09<\/p>\n<h3>Aufbau der Style-Pakete<\/h3>\n<p>Verschaffen wir uns erstmal ein \u00dcberblick, was da \u00fcberhaupt hochgeladen werden soll. Ich verwende f\u00fcr mein Beispiel hier das Paket von Testshop 3, da es die meisten \u00c4nderungen enth\u00e4lt und dadurch sehr gut geeignet ist, den kompletten Ablauf einmal durchzuspielen.<\/p>\n<p>Das Vorgehen f\u00fcr die anderen Pakete gestaltet sich analog, sollte es f\u00fcr das von euch gew\u00e4hlte Paket die angesprochenen Dateien nicht geben, macht einfach mit den anderen Dateien weiter.<\/p>\n<p>In dem Paket sehen wir erstmal folgende Dateien und Ordner:<\/p>\n<ul>\n<li><b>content_manager.sql<\/b> -&gt; Diese Datei enth\u00e4lt alle Texte, die wir in unseren Testshops eingetragen haben.\n<div class=\"alert alert-danger\"><b>ACHTUNG: <\/b><br \/>\nBeim Einf\u00fcgen dieser SQL-Datei in euren Shop werden s\u00e4mtliche anderen Eintr\u00e4ge aus dem Content Manager \u00fcberschrieben. Wenn ihr schon selber Texte eingetragen habt, w\u00e4gt bitte vorher ab, ob es sich wirklich lohnt diese Datei zu \u00fcbernehmen.<\/div>\n<\/li>\n<li><b>StyleEdit3<\/b> -&gt; In diesem Ordner befindet sich eine Datei mit den notwendigen Einstellungen, die im Style Edit 3 gemacht werden m\u00fcssen. Wie man diese Datei importieren kann, <a href=\"\/blog\/testshop-templates-nutzen\/#styleedit\">erkl\u00e4re ich weiter unten<\/a>.<\/li>\n<li><b>templates<\/b> -&gt; Dieser Ordner enth\u00e4lt alle Anpassungen, die an den Template-Dateien vorgenommen werden m\u00fcssen, damit der Shop so aussieht, wie unser Testshop 3. Mit dem Upload der Template-Dateien m\u00f6chte ich nun beginnen.<\/li>\n<\/ul>\n<h2>Upload der Template-Dateien<\/h2>\n<p>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\u00e4ndert, muss vorher abgeglichen werden, ob diese \u00c4nderungen m\u00f6glicherweise an den gleichen Stellen greifen wie die Anpassungen, die ihr jetzt einspielen wollt.<\/p>\n<p>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 <b>templates\/Honeygrid. <\/b>In eurem heruntergeladenen Style-Paket, findet ihr die gleiche Ordnerstruktur. Navigiert auch hier in den Ordner <b>templates\/Honeygrid. <\/b><\/p>\n<p>Wenn ihr abgeglichen habt, ob euer Shop Anpassungen enth\u00e4lt oder ihr einen frisch installierten Shop anpassen wollt, dann beginnt mit dem Upload der Dateien. Ihr k\u00f6nnt 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.<\/p>\n<div class=\"alert alert-warning\"><b>Hinweis: <\/b><br \/>\nEs kann passieren, dass die Dateien _bootstrap_variables.scss, _custom_styles.scss und _template_variables.scss nicht korrekt \u00fcbertragen werden k\u00f6nnen. Um diese zu \u00fcbertragen, kann es erforderlich sein, dass man die bestehenden Dateien aus dem Verzeichnis <b>templates\/Honeygrid\/styles\/custom<\/b> l\u00f6scht. Macht euch, sollte der Fall tats\u00e4chlich auftreten, bitte eine Sicherung der Originaldateien.<\/div>\n<p>Wundert euch nicht, dass der Shop nach diesen Anpassungen noch nicht hundertprozentig gut aussieht, wir sind ja auch noch nicht fertig \ud83d\ude09<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/result_demo_no_pics.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8544\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/result_demo_no_pics.png\" alt=\"Noch ist die Startseite leer, das \u00e4ndert sich aber gleich\" width=\"700\" height=\"373\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/result_demo_no_pics.png 1600w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/result_demo_no_pics-350x186.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/result_demo_no_pics-768x409.png 768w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/result_demo_no_pics-1024x545.png 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><em>Abb. 2: So sieht die Startseite des Shops nach dem Upload der Template-Dateien aus. Irgendwie noch ziemlich leer, aber das \u00e4ndert sich gleich.<\/em><\/p>\n<h2><a id=\"styleedit\"><\/a>Anwenden der StyleEdit 3 Konfiguration<\/h2>\n<p>Loggt euch in den Gambio Admin eures anzupassenden Shops ein und \u00f6ffnet den StyleEdit 3, indem ihr unter Darstellung &gt; Template-Einstellungen auf den Button \u201cShop im Bearbeitungsmodus laden\u201d klickt.<\/p>\n<p>Im ge\u00f6ffneten StyleEdit 3 findet ihr im unteren Drittel den Button \u201cStyle upload\u201d. Hier klickt ihr einmal drauf, worauf sich ein Fenster zum Hochladen eines Styles \u00f6ffnet. Hier k\u00f6nnt ihr einen Namen f\u00fcr den zu erstellenden Style w\u00e4hlen und eine Datei mit den n\u00f6tigen Style-Informationen hochladen. Diese findet sich im heruntergeladenen Paket unter <b>\/StyleEdit3\/templates\/Honeygrid<\/b>.<\/p>\n<p>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 \u00dcbersicht <b>Meine Styles<\/b> und w\u00e4hlt in dem sich \u00f6ffnenden Dropdown die Option <b>Style aktivieren.<\/b><\/p>\n<p>Wenn ihr nicht noch Farben oder andere Einstellungen \u00e4ndern wollt, sind wir im StyleEdit schon fertig und k\u00f6nnen uns um den letzten Punkt k\u00fcmmern.<\/p>\n<div class=\"alert alert-warning\"><b>Hinweis: <\/b><br \/>\nDurch die \u00dcbernahme der Template-Dateien von Testshop 3, rutscht die Schaltfl\u00e4che 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\u00f6nnt.<\/div>\n<h2>Einf\u00fcgen der Content Manager-Eintr\u00e4ge<\/h2>\n<div class=\"alert alert-danger\"><b>Achtung: <\/b><br \/>\nHierbei werden bestehende Eintr\u00e4ge \u00fcberschrieben. Solltet ihr hier schon Anpassungen gemacht haben, sichert euch diese bitte vorher, damit ihr sie wieder einf\u00fcgen k\u00f6nnt.<\/div>\n<p>Um die content_manager.sql einzuspielen ben\u00f6tigen wir nur den Shop. Unter Toolbox &gt; SQL &gt; MiniSQL findet sich eine Eingabemaske, um SQL-Befehle einzugeben. Hier kann der Inhalt der content_manager.sql vollst\u00e4ndig eingef\u00fcgt und abgeschickt werden. Anschlie\u00dfend sollten sich s\u00e4mtliche Content Manager-Eintr\u00e4ge aus dem Testshop in eurer Datenbank befinden.<\/p>\n<h2>Anpassen der Template-Dateien<\/h2>\n<p>Im Fall vom Style-Paket f\u00fcr Shop 3 werden wir jetzt trotzdem von einem recht leeren Shop begr\u00fc\u00dft. 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\u00fcr m\u00fcssen unter anderem Eintr\u00e4ge im Content Manager und Pfade in Usermod-Dateien angepasst werden.<\/p>\n<div class=\"alert alert-warning\"><b>Hinweis: <\/b><br \/>\nDie folgende Anleitung beschreibt das Vorgehen zur Personalisierung von einem Shop mit dem Styling-Paket f\u00fcr Testshop 3. Einige dieser Anpassungen sind f\u00fcr die anderen Shop-Styling-Pakete nicht notwendig. Das Einf\u00fcgen nicht vorhandener Bilder muss aber auch f\u00fcr die anderen Pakete durchgef\u00fchrt werden. Das Vorgehen ist hier analog zu dem im Folgenden beschriebenen.<\/div>\n<h3>Slider oder Video auf der Startseite?<\/h3>\n<p>Es ist m\u00f6glich einen Slider auf der Startseite anzuzeigen. \u00dcber Darstellung &gt; Teaser-Slider k\u00f6nnt ihr einen Slider definieren, der dann anstatt des Videos auf der Startseite angezeigt wird. Hiernach muss allerdings auch die <b>templates\/Honeygrid\/index-USERMOD.html <\/b>angepasst und folgender Codeblock entfernt werden:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">{if \"\"|detect_page == \"Index\"}\r\n    &lt;video autoplay loop id=\"bgvid\"&gt;\r\n            &lt;source src=\"images\/content\/index\/Garten_stumm.mp4\" type=\"video\/mp4\"&gt;\r\n    &lt;\/video&gt;\r\n{\/if}<\/pre>\n<p>Wollt ihr hier ein eigenes Video statt eines Sliders mit Bildern anzeigen, ist es notwendig die <b>templates\/Honeygrid\/index-USERMOD.html<\/b> anzupassen. Hier findet ihr folgenden Abschnitt, der den Pfad zu einem Video enth\u00e4lt:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;source src=\"images\/content\/index\/beispielvideo.mp4\" type=\"video\/mp4\"&gt;<\/pre>\n<p>Um das Video auszutauschen ladet ein Video in den Ordner <b>images\/content\/index\/ <\/b>und passt den Dateinamen in der index-USERMOD.html auf den Namen eures Videos an. Nach diesen \u00c4nderungen ist ein Leeren des Seitencaches notwendig.<\/p>\n<h3>Ein eigenes Logo<\/h3>\n<p>Um das Logo gegen ein eigenes auszutauschen, ist eine Anpassung der <b>templates\/Honeygrid\/snippets\/slider-USERMOD.html<\/b> notwendig. Hier versteckt sich das Logo in folgendem Codeblock:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">{else}\r\n    &lt;a class=\"title-image\" href=\"#recommendations\"&gt;\r\n        &lt;img src=\"images\/content\/index\/beispiellogo.svg\" alt=\"Shoplogo\" class=\"img-responsive\"&gt;\r\n    &lt;\/a&gt;\r\n{\/if}<\/pre>\n<p>Um das Logo auszutauschen, ladet am besten euer Logo als SVG in den Ordner <b>images\/content\/index\/ <\/b>und passt hier den Bildnamen auf den Namen eures Logos an. Zus\u00e4tzlich sollte der Alt-Tag auf eine passende Bezeichnung f\u00fcr euer Logo ge\u00e4ndert werden.<\/p>\n<p>Wollt ihr hier kein extra Logo unterbringen, kann die slider-USERMOD.html einfach gel\u00f6scht werden.<\/p>\n<p>Auch nach diesen \u00c4nderungen ist ein Leeren des Seitencaches notwendig.<\/p>\n<h3>Anpassen von Content Manager-Eintr\u00e4gen anhand des Style-Paketes aus Testshop 3<\/h3>\n<p>Auch in den Content Manager-Eintr\u00e4gen m\u00fcssen ein paar Anpassungen vorgenommen werden, damit hier eure Bilder angezeigt werden. Und wenn wir schon dabei sind, k\u00f6nnen hier dann auch gleich die verwendeten Blindtexte gegen eure eigenen ausgetauscht werden \ud83d\ude09<\/p>\n<h4>Gambio Demo<\/h4>\n<p>Beginnen wir hier mit dem Content <b>Gambio Demo <\/b>(f\u00fcr die bessere Auffindbarkeit sp\u00e4ter w\u00fcrde ich empfehlen, diesen mit einem f\u00fcr euch sinnvolleren Namen zu versehen). In diesem Content befindet sich ein Bild, welches f\u00fcr den sogenannten <a href=\"http:\/\/pixelcog.github.io\/parallax.js\/\">Parallax-Effekt<\/a>, 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:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;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; \"&gt;<\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8545\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic.png\" alt=\"Gambio Demo\" width=\"700\" height=\"240\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic.png 1600w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic-350x120.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic-768x263.png 768w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic-1024x351.png 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><em>Abb. 3: Erster Bereich der Startseite ohne Bild f\u00fcr den Parallax-Effekt<\/em><\/p>\n<p>&nbsp;<\/p>\n<h4>Index (Mitte)<\/h4>\n<p>Weiter gehts mit dem Content <b>Index (Mitte)<\/b>. Auch in diesem befindet sich ein Bild, welches f\u00fcr den Parallax-Effekt verwendet wird. Schaltet auch hier euren Editor auf die Code-Ansicht um, um folgenden Codeblock zu finden, der angepasst werden muss:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;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; \"&gt;<\/pre>\n<p>Auch hier ist das Vorgehen zum Austauschen des Bildes gleich, wie oben bereits geschrieben: Legt unter <b>images\/content\/index\/ <\/b>ein eigenes Bild in ausreichender Gr\u00f6\u00dfe ab und passt den Pfad entsprechend an. Anschlie\u00dfend sollte das Bild dann angezeigt werden.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8546\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic2.png\" alt=\"Der Index (Mitte)\" width=\"700\" height=\"214\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic2.png 1600w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic2-350x107.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic2-768x235.png 768w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/parallax_no_pic2-1024x313.png 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><em>Abb.4: Auch hier fehlt uns noch ein passendes Bild f\u00fcr den Parallax-Effekt.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h4>Index (unten)<\/h4>\n<p>Weiter geht es mit dem Content <b>Index (unten). <\/b>Auch hier wird analog wie oben beschrieben vorgegangen: Die im Editor eingetragenen Bilder werden durch eigene ersetzt.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/news_no_pics.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8547\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/news_no_pics.png\" alt=\"Der News-Block\" width=\"700\" height=\"184\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/news_no_pics.png 1233w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/news_no_pics-350x92.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/news_no_pics-768x202.png 768w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/news_no_pics-1024x269.png 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><em>Abb. 5: Auch im News-Block m\u00fcssen noch Bilder ausgetauscht und Texte angepasst werden.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h4>Instagram und Twitter einbinden<\/h4>\n<p>Allerdings gibt es in diesem Content Manager-Eintrag eine Besonderheit, weshalb er hier noch einmal extra genannt wird: Hier finden sich noch Eintr\u00e4ge 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\u00f6nnt ihr die betreffenden Zeilen einfach l\u00f6schen.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;div class=\"row\"&gt;\r\n        &lt;div class=\"col-xs-12 col-md-6 instagram\"&gt;\r\n            &lt;h4&gt;Instagram&lt;\/h4&gt;\r\n\r\n            &lt;div style=\"position: relative; height: 16px; overflow: hidden; padding-top:66.66666666666666%;\"&gt;\r\n                &lt;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%;\"&gt;&lt;\/iframe&gt;&lt;!-- WEBSTA WIDGETS - widgets.websta.me --&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=\"col-xs-12 col-md-6 twitter\"&gt;\r\n            &lt;h4&gt;Twitter&lt;\/h4&gt;\r\n            &lt;script defer&gt;!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\");&lt;\/script&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/insta_twitter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8548\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/insta_twitter.png\" alt=\"Einbinden von Instagram und Twitter\" width=\"700\" height=\"287\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/insta_twitter.png 1280w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/insta_twitter-350x144.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/insta_twitter-768x315.png 768w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/insta_twitter-1024x420.png 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><em>Abb. 6: Hier m\u00fcssen eigene Codes zum Einbinden von Instagram und Twitter verwendet werden.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h4>Kontakt<\/h4>\n<p>Hier befindet sich ein Codeblock zum Einbinden einer Google-Map, die den Standort einer eventuell vorhanden Filiale anzeigen kann. Wenn ihr diese nicht ben\u00f6tigt, kann der Code-Block gel\u00f6scht werden, andernfalls muss auch hier der Code-Block gegen einen eigenen ausgetauscht werden.<\/p>\n<p>Aus Platzgr\u00fcnden zeige ich euch hier nur den Anfang des Code-Blocks \ud83d\ude09<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;div id=\"contact-map\"&gt;&lt;\/div&gt;                                \r\n&lt;script src=\"\/\/maps.google.com\/maps\/api\/js?language=de&amp;key=AIzaSyBSK-OQ3BmoAgtXk3nY5noK93imcFFFHAw\"&gt;&lt;\/script&gt;<\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/contact_map.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8549\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/contact_map.png\" alt=\"Kontakt einbinden\" width=\"700\" height=\"435\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/contact_map.png 1240w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/contact_map-350x217.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/contact_map-768x477.png 768w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/contact_map-1024x636.png 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><em>Abb. 7: Da der Code zum Einbinden der Google-Map schon verwendet wird, gibt es hier einen Fehler.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h4>\u00dcber uns<\/h4>\n<p>Auch hier befinden sich Bilder, die gegen eigene ausgetauscht werden m\u00fcssen. Geht dabei wie oben beschrieben vor.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/about_us.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8550\" src=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/about_us.png\" alt=\"\u00dcber uns einbinden\" width=\"700\" height=\"297\" srcset=\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/about_us.png 818w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/about_us-350x148.png 350w, https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/about_us-768x326.png 768w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><em>Abb. 8: Auch dieser Content wartet darauf, dass er mit passenden Bildern versorgt wird.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h4>Weitere Content Manager-Eintr\u00e4ge<\/h4>\n<p>Nat\u00fcrlich m\u00fcssen auch die anderen Content Manager-Eintr\u00e4ge auf eure Bed\u00fcrfnisse angepasst werden. Die hier aufgef\u00fchrten dienen dabei als Beispiel, wie bei der Anpassung vorgegangen werden kann.<\/p>\n<h4>Probleml\u00f6sungen<\/h4>\n<p>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\u00f6nnt ihr in jedem bekannten Browser mit einem Klick auf die Taste F12 eurer Tastatur \u00f6ffnen. Wechselt hier dann in den Tab \u201cNetzwerk\u201d und ladet eure Seite einmal neu. Hier sollten dann s\u00e4mtliche Bilder und andere Inhalte, die nicht gefunden werden k\u00f6nnen, mit einem Fehler 404 gekennzeichnet sein. Diese Inhalte m\u00fcssen dann in den Usermods und Content Manager-Eintr\u00e4gen gesucht und die Pfade zur Einbindung angepasst werden.<\/p>\n<h2>Abschluss<\/h2>\n<p>Das war es eigentlich auch schon. Weitere Anpassungen an Texten, Farben oder Templates k\u00f6nnen jetzt noch umgesetzt werden, um dem Shop einen Feinschliff und die pers\u00f6nliche Note zu verpassen.<\/p>\n<p>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\u00e4hnten Forenthread zu fragen.<\/p>\n<p>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.<\/p>\n<p><em><strong>In der n\u00e4chsten 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\u00e4sst.<\/strong><\/em><\/p>\n<hr \/>\n<div class=\"alert alert-info\">\n<p>F\u00fcr aktuelle News aus der Welt des E-Commerce folge uns bei <a href=\"https:\/\/twitter.com\/Gambio\" target=\"_blank\" rel=\"noopener\"><strong>Twitter<\/strong> <\/a><\/p>\n<p>Selbstverst\u00e4ndlich findest du uns auch bei <a href=\"https:\/\/www.facebook.com\/GambioGmbH\" target=\"_blank\" rel=\"noopener\"><strong>Facebook<\/strong> <\/a><\/p>\n<\/div>\n<p><strong>Erstelle mit Gambio ganz einfach noch heute deinen eigenen Onlineshop<\/strong><\/p>\n<p><a class=\"btn btn-primary\" href=\"https:\/\/www.gambio.de\" target=\"_blank\" rel=\"noopener\" type=\"button\">Mehr erfahren<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cWie bekomme ich meinen Shop so gestaltet wie den Testshop 1, 2 oder 3?\u201d &#8211; Kaum eine Frage bekommen wir im Forum oder auch im Support so h\u00e4ufig gestellt wie diese. Im Forum haben wir f\u00fcr einige Shopversionen bereits die passenden Usermods, Content-Manager-Eintr\u00e4ge und StyleEdit-3-Einstellungen ver\u00f6ffentlicht, um das Aussehen der Testshops in den eigenen Shop [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":8591,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[526],"tags":[301,40,528,527],"class_list":["post-8539","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-design","tag-gambio","tag-styleedit","tag-testshop"],"_links":{"self":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/8539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/comments?post=8539"}],"version-history":[{"count":68,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/8539\/revisions"}],"predecessor-version":[{"id":9842,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/8539\/revisions\/9842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/media\/8591"}],"wp:attachment":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/media?parent=8539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/categories?post=8539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/tags?post=8539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}