USP/Grafik-Header in Shopware einfügen

Nicht immer braucht man für Shopware kostenpflichtige Plugins. Die Struktur der Shopware-Software macht es möglich, dass mit der richtigen Anleitung auch Laien dazu fähig sind, kleine, aber Conversion-steigernde Änderungeneinzupflegen. In diesem Fall erkläre ich, wie ihr am einfachsten einen grafischen Header zum anzeigen von USP’s, also Alleinstellungsmerkmalen oder Wettbewerbsvorteilen wie zB Versandkostenfreiheit oder verlängertem Rückgaberecht, in euer Template einpflegt. Als Basis dient das Shopware 5 Responsive Default Theme.

Grafischer Header in Shopware: Welche Dateien werden geändert?

shopware-grafischer-usp-header

Die gute Nachricht vorweg: Wir benötigen nur eine Dateien um den grafischen Header einzufügen: index.tpl

Damit beim nächsten Update nicht alle Änderungen überschrieben werden, solltet ihr ein eigenes Theme anlegen (Backend > Theme Manager > eigenes Theme erstellen > ableiten von Responsive Theme). Nun können Dateien, welche geändert werden einfach aus dem Bare Theme in das eigene Theme kopiert werden (Ordnerstruktur immer beibehalten) und werden bei einem Update nicht überschrieben.

Da es mehrere index.tpl gibt, hier der Pfad: themes/frontend/deintheme/frontend/index

Hier fügt ihr nun folgenden Code ein:

{extends file='parent:frontend/index/index.tpl'}

{block name='frontend_index_before_page' prepend}
{s name="UspHeader"}{/s}
{/block}

Erklärung:

Wir fügen damit einfach einen Textblock am obersten teil der Seite ein. Alles andere können wir über die Textbausteine im Backend lösen. Somit vermeiden wir bei jeder Änderung extra per FTP die .tpl ändern zu müssen. Da wir auch CSS-Angaben in den Textbausteinen eingeben können, muss auch hier nicht extra mit mit einer neuen CSS-Datei gearbeitet werden, wenn diese nicht für andere Änderungen ohnehin angelegt wurde.

Grafischer Header über Textbausteine: Der Inhalt

Geht nun ins Backend. Unter Einstellungen > Cache/Performance muss das Theme einmal neu kompiliert werden, damit der angelegte Textbaustein erkannt wird. Sucht danach in den Textbausteinen nach „UspHeader“. Hier könnt Ihr eintragen, was ihr möchtet und die Gestaltung anpassen wie gewünscht. Empfehlenswert ist hier die Nutzung der Shopware eigene Icons. Sieht einfach besser aus, als blanker Text und ihr erspart euch das Einbinden/Installieren anderer CSS-Dateien oder Plugins.

Ein Beispiel sieht wie folgt aus:

<div style="color:#fff; background:#000;overflow:hidden;">
<ul style="display:block; position: relative;float: left;left: 50%;margin: 0 auto;padding: 0;">
<li style="position: relative;float: left;right: 50%;margin-right: 10px;padding: 5px 10px;list-style: none;"><span class="icon--truck"> <span style="font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;">Versandkostenfrei ab XXX</span></span></li>
<li style="position: relative;float: left;right: 50%;margin-right: 10px;padding: 5px 10px;list-style: none;"><span class="icon--phone"> <span style="font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;">Beratung & Verkauf: 000 123456</span></span></li>
<li style="position: relative;float: left;right: 50%;margin-right: 10px;padding: 5px 10px;list-style: none;"><span class="icon--thumbsup"> <span style="font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;">Ein weiterer Punkt</span></span></li>
</ul></div>

Natürlich könnt ihr das Ganze auch in Klassen verpacken und in eure CSS auslagern, sofern entsprechende Kenntnisse vorhanden sind 😉

TIPP: Vergesst nicht die Rechtssicherheit. Werbt ihr mit kostenlosem Versand, obwohl dies nur innerhalb Deutschlands gilt, müsst ihr diese im Footer vermerken. Am einfachsten geht dies über die Erweiterung des unten befindlichen Textbausteins mit dem Sternen. Fügt hier einfach die Erklärung mit ** hinzu.

Loading Facebook Comments ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.