Wie Du Dir Deinen eigenen Conversion Header bastelst

Wie Du Dir Deinen eigenen Conversion Header bastelst

Alexander Wolf 05. Juli 2016 31

Was ist ein Conversion Header?

Im Prinzip ist das eine kleine Liste mit einigen Infos zu deinem Shop.

Dein Besucher liest dies als aller erstes und dort hast du die Chance ihn von deinem Shop zu überzeugen.

Er wird sicherlich auch weiter scrollen und sich dein Angebot anschauen.

Aber in einigen Fällen überzeugt der Conversion Header.

Wie kannst du ihn dir selbst basteln?

Ein interessanter Blogpost zu diesem Thema: ConversionOwl

Es gibt im Shopware Community Store einiges an Plugins für dieses Thema. Wir haben sogar eins kostenlos in den Store gestellt: Conversion Header

Aber da wir auf Theme Entwicklung abfahren, bauen wir uns den Conversion Header selbst in unser Theme ein.

Je weniger Plugins wir haben, desto weniger Aufwand / Stress haben wir bei Updates und der allgemeinen Pflege unseres Shops.

Theme erstellen - los gehts!

Falls ihr noch kein Theme erstellt habt, dann solltest ihr erst den Beitrag: Theme erstellen lesen.

Danach seid ihr bereit hier weiter zu machen.

Theme anpassen

Wir fangen mit den Template Dateien an. Da wir den Conversion Header über die gesamte Seite setzen wollen, müssen wir zunächst herausfinden, welche Elemente ganz oben sind.

Als erstes schauen wir uns folgende Datei an:

themes/Frontend/Bare/frontend/index/index.tpl

Das ist sozusagen die Hauptdatei die aufgerufen wird. In diese Datei werden alle anderen Dateien eingebunden.

In den Zeilen 33 - 35 sehen wir folgenden Code:

{block name='frontend_index_top_bar_container'}
    {include file="frontend/index/topbar-navigation.tpl"}
{/block}

Der Code fügt den Inhalt der Datei topbar-navigation.tpl ein. Wir merken schnell, dass dort das Service/Hilfe Dropdown eingebunden wird.

Unser Conversion Header soll über dieses Menü kommen. Daher können wir uns den selben Block vornehmen und mit einem prepend erweitern.

Also legen wir folgende Datei an:

themes/Frontend/DEINTHEME/frontend/index/index.tpl

Diese index.tpl befüllen wir mit folgendem Inhalt:

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

{block name="frontend_index_top_bar_container"}
  <div class="emz-conversion-header">
    <div class="container">
      <div class="emz-conversion-header-column">
        {s name="8mzConversionHeaderFirstItem"}{/s}
      </div>
      <div class="emz-conversion-header-column">
        {s name="8mzConversionHeaderSecondItem"}{/s}
      </div>
      <div class="emz-conversion-header-column">
        {s name="8mzConversionHeaderThirdItem"}{/s}
      </div>
    </div>
  </div>
{$smarty.block.parent}
{/block}

Zeile 1 erweitert die index.tpl Datei von unserem Eltern Theme. Und mit dem Rest schnappen wir uns den passenden Block und erweitern diesen. Durch das {$smarty.block.parent} lassen wir den Originalen Code nach unserem Code laden.
Dadurch wird unser Inhalt vor dem eigentlichen Block eingebunden.

Genau das wollten wir auch, sodass unser Conversion Header ganz oben über dem Rest der Seite platziert wird.

Das wäre der eine Teil. Uns fehlt aber noch die Verknüpfung zu Font Awesome. Sonst können wir gar keine Icons einbinden. Was wir aber unbedingt wollen.

Wir erstellen also noch die Datei 

themes/Frontend/DEINTHEME/frontend/index/header.tpl

und packen folgenden Code rein:

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

{block name="frontend_index_header_css_screen"}
{$smarty.block.parent}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
{/block}

Mit der ersten Zeile erweitern wir wieder die Eltern Datei, sodass wir alle anderen wichtigen Inhalte mitbekommen.

Der Rest sorgt dafür, dass die Font Awesome CSS Datei eingebunden wird und uns die Icons zur Verfügung stehen.

Mit append wird der Code nach dem eigentlichen Code des Blocks gesetzt.

Der Conversion Header ist theoretisch eingebaut. Wird aber auf jeden Fall nicht gut aussehen. Genau darum werden wir uns als nächstes kümmern.

LESS anpassen

Damit das ganze auch ordentlich aussieht brauchen wir etwas LESS Code.

Zuerst eine leere LESS Datei anlegen:

themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules/emz-conversion-header.less

Unser Header besteht aus zwei Klassen, die wir wie folgt stylen:

.emz-conversion-header{
  display: none;
}
@media screen and(min-width: @tabletViewportWidth) {
  .emz-conversion-header{
    display: block;
    width: 100%;
    padding: 5px 0;
    background-color: @brand-primary;
    color: @btn-default-top-bg;
    .container{
      background-color: @brand-primary;
      color: @btn-default-top-bg;
      .emz-conversion-header-column{
        width: 33%;
        display: inline-block;
        text-align: center;
        overflow: hidden;
        &:first-child{
          text-align: left;
        }
        &:last-child{
          text-align: right;
        }
      }
    }
  }
}

Auf dem Smartphone soll unser Conversion Header nicht angezeigt werden. Das erreichen wir mit Zeile 1. Da gibt es einfach nicht genug Platz, daher blenden wir den Conversion Header aus.

Die emz-conversion-header.less noch in unsere all.less einbinden

@import "_modules/emz-conversion-header";

Das war's mit unserem LESS Code.

Textbausteine

Damit die Texte einfach anpassbar bleiben verwenden wir sogenannte Textbausteine (Snippets) von Shopware. Diese können wir im Backend ändern und müssen nicht im Code rumspielen.

Die Textbausteine sprechen wir im Code an

{s name="8mzConversionHeaderFirstItem"}{/s}

Sobald wir den Cache geleert und unser Theme kompiliert haben, finden wir die Textbausteine im Backend unter Einstellungen -> Textbausteine.

Jetzt nur noch nach dem Namen 8mzConversionHeaderFirstItem suchen und Inhalt eintragen. Das gleiche gilt für die anderen beiden Einträge auch.

Font Awesome stellt wirklich coole Icons zur Verfügung. Die können wir ganz einfach nutzen, da wir Font Awesome weiter oben schon eingebunden haben.

Sucht euch auf Font Awesome Icons die Icons aus.

Wir nehmen den kleinen Brief.

In Textbausteinen kann auch HTML Code verwendet werden, daher nehmen wir den Code für unseren kleinen Brief und fügen den in unseren Textbaustein ein.

<i class="fa fa-envelope-o"></i> Service Line: i@8mylez.com

Hier nochmal ein Bild, damit das ganze etwas verständlicher wird.

Conversion Header Icon Textbaustein

Cool, oder?

Tipp: Wenn du weitere Font Awesome Icons verwenden möchtest, schau dir doch einmal dieses Tutorial an: Shopware Font Awesome

Cache leeren / Theme kompilieren

Nachdem wir alles erledigt haben, leeren wir noch einmal den Cache und kompilieren das Theme neu.

Wenn wir alles richtig gemacht haben, sollte jetzt der Conversion Header mit unseren Texten auf unserer Seite zu sehen sein.

Bei uns schaut das ganze so aus:

8mylez Conversion Header Beispiel

Weitere Links

31 Kommentare

  • Gibt es vielleicht eine relativ unkomplizierte Möglichkeit ( bei mobiler Anzeige) die einzelnen Punkte als Slider auszugeben, so wie es auch sehr viele Shops integriert haben (z.Bsp. Tezenis) ? ... ein vorhandenes Plugin gibt es bei Shopware wohl keins
    Antworten

  • Hey Sascha,

    unkompliziert leider nicht :/

    Es gibt eine Möglichkeit, das jQuery Plugin von Shopware zu nutzen, allerdings ist dies mit einigen Code Anpassungen verknüpft.

    Falls du dich an den Code traust, empfehle ich bei der Navigation zu schauen, da gibt es diesen Effekt, wenn der Bildschirm zu schmal wird bzw. die Navigation zu breit.

    Gruß
    Alexander

  • Ich würde gerne Social Media Icons einsetzen, mit dem entsprechenden Links.
    So z.B. Dann wird mir aber gar nichts angezeigt, nicht einmal das Icon. Woran kann das liegen?
    Antworten

  • Hey Dirk,

    kommt darauf an wie du das Icon eingefügt hast. Möglicherweise benutzt du nicht die korrekten Klassen, da Font Awesome schon einige Versionen weiter ist.

    Gruß
    Alexander

  • Also wenn ich nur das Icon abbilde, ohne den Link, dann wird es angezeigt.

    Dies dann aber nicht mehr:

  • Hey Dirk,

    wie sieht der Code dafuer aus? Du kannst ihn z.B. hier (https://pastebin.com/) verlinken und dann den Link in den Kommentaren posten.

    Gruß
    Alexander

  • Oh Gott,
    ist das peinlich!!! Fehler gefunden. Hatte vergessen das ganze in die modules.less einzubinden. Aber vielleicht hilft es ja anderen darauf zu achten.

    Gruß Matto
    Antworten

  • Hey Matto,

    sowas passiert auch den besten :)

    Freut mich, dass du den Fehler finden konntest!

    Gruß
    Alexander

  • Hallo Alexander,

    zunächst natürlich vielen Dank für die gute Anleitung.
    Leider hätte ich da gerne ein Problem. Habe den Code sowie beschrieben eingebunden, leider stehen bei mir die drei Zeilen untereinander und nicht links, mittig und rechts. Außerdem würde ich gerne dem Hintergrund und der Schrift eine andere Farbe zuweisen.

    Höre (lese) gerne von Dir.

    Gruß Matto
    Antworten

  • Hey, wie konntest du denn die Farbe des Hintergrundes und der Schrift ändern?

  • doof, ich habe es

  • Hey,
    klappt super und tolle Beschreibung.
    Einzig die font icons funktionieren nicht - wenn ich das so beschrieben einfüge, klappt es. Der Code des Email Icon bei fontawesome ist aber ein anderer als den Ihr nutzt? Copy Code reicht also nicht aus oder? Ich wollte noch das Phone Icon einfügen (https://fontawesome.com/icons/phone?style=solid) - das funktioniert aber nicht. Übersehe ich nur etwas?
    Antworten

  • Hallo Alexander,
    danke für deine tolle Anleitung, hat (fast) bestens geklappt. Ich habe das Problem das mein Header doppelt angezeigt wird und ich finde leider meinen Fehler nicht. Hast du eine Idee woran das liegt? Vielen Dank schonmal, gruß Matthias
    Antworten

  • Hey Matthias,

    vielen Dank fuer dein Feedback :)

    Wird der komplette Header oder nur der Conversion Header doppelt angezeigt?

    Am besten gehst du jede Zeile nochmal genau durch und schaust, ob irgendwo Code doppelt eingefuegt wurde. Das ist normalerweise der einzige Grund dafuer, dass etwas doppelt angezeigt wird.

    Gruß
    Alexander

  • Hi Alexander,

    ich habe eine Frage. Ich habe mir euer Flat Theme installiert und würde dort nun gerne den Conversion Header einbinden. Das Theme liegt jedoch in folgender Ordnerstruktur.

    httpdocs/engine/Shopware/Plugins/Community/Frontend/8mzFlatResponsiveTheme/Themes/Frontend/FlatResponsive

    Kann ich trotzdem nach deiner Anleitung vorgehen, oder lieber nicht? Lässt sich nicht eins zu eins übertragen und bevor ich was zerstöre, dacht eich mir, ich frag besser mal nach!

    Vielen Dank für die starken Tutorials
    LG Rico
    Antworten

  • Hallo Rico,

    am besten legst du ein eigenes Theme an, welches dann von dem Flat Theme ableitet. Dann kannst du das Tutorial befolgen und alles ist sicher.

    Vielen Dank für das positive Feedback!

    Gruß
    Alexander

  • Hallo,

    eine super Anleitung und funktioniert super, sowie die Bearbeitung der Textfelder ist einfach.
    Nur leider funktioniert eine Sache nicht gut bei mir. Auf Handys soll es nicht funktionieren, ist richtig, aber es wird auch auf dem Tablet angezeigt. Wenn es quer ist, sieht es gut aus und ist in Ordnung, aber es erscheint auch wenn das Tablet hoch gestellt ist. Dann wird aus dem Einzeiligen Header ein zweizeiliger und das sieht nicht gut aus.

    Wie kann ich das ausstellen, das nur beim quer gestelltem Tablet es angezeigt wird?

    Danke für eine Antwort.

    Gruß
    Antworten

  • Hallo Jens,

    vielen Dank für das positive Feedback!

    Du kannst bei den Less Regeln den Viewport ändern, ab dem der Conversion Header sichtbar wird. Setze bei @media screen and(min-width: @tabletViewportWidth) den Viewport ein @tabletLandscapeViewportWidth damit der Code erst beim Tablet in dem Landscape Mode genutzt wird.

    Theme kompilieren nicht vergessen :)

    Gruß
    Alexander

  • Hallo,

    danke für diese super Anleitunng. Nicht nur die sondern alle die ich bis heute von euch gelesen habe. Konnte somit viel selber umsetzen.
    Daumen hoch und weiter so...!!!

    Nun mein Anliegen,
    ich habe wie oben beschrieben alles entsprechen abgearbeitet, hat auch alles auf anhieb funktioniert. Nun möchte ich aber gerne 4 Texte oben drinnen stehen haben.

    Habe in der emz-conversion-header.less einfache ein 4ten Text hinzugefügt, was auch funktionierte. Allerding steht der Text jetz darunter und nicht in der gleichen Reihe.

    Ich finde einfach keinen Anhaltspunkt in der .less wie ich das ändern kann.

    Für Tipps wäre ich sehr dankbar.

    Gruß
    Sebastain
    Antworten

  • Hallo Sebastian,

    vielen Dank für dein Feedback!

    Damit 4 Texte nebeneinander angezeigt werden musst du nach width: 33%; suchen. Die 33% setzt du dann auf 25%. Das sollte alles gewesen sein.

    Gruß
    Alexander

  • Oh falsches Tutorial sorry :D

  • Hat einwandfrei funktioniert. Vielen Dank für dieses Tutorial, aber auch für die anderen in Eurem Blog. Großartig!
    Antworten

  • Hallo Bernhard,

    vielen Dank für dein nettes Feedback :)

    Gruß
    Alexander

  • Echt super geklappt, danke!
    Antworten

  • Hallo Tommy,

    perfekt!

    Gruß
    Alexander

  • Hallo und danke für die tolle Beschreibung. Bei mir hat alles sofort perfekt funktioniert. Toll das man nicht für jede Kleinigkeit gleich in Plugin installieren muss.

    Ich würde nur gerne vier Punkt aufführen und habe in der LESS auf width: 25% geändert. leider funktioniert das nicht so ganz. Was muss ich denn noch anpassen?

    VG, Alexander
    Antworten

  • Hallo Alexander,

    müsste eigentlich funktionieren. Hast du auch 24% probiert? Möglicherweise ist es sonst zu lang.

    Cache geleert und Theme kompiliert?

    Ansonsten schick mir die FTP Zugangsdaten und Shopware Backend an i@8mylez.com und ich schaue mal rein :)

    Gruß
    Alexander

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

E-Mail: support@8mylez.com

Telefon: +49 (0) 5251 284 710

Shopware Dienstleistungen

Shopware Code AuditShopware PerformanceShopware Leasing

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz