Wie du dir deinen eigenen Conversion Header bastelst

Wie du dir deinen eigenen Conversion Header bastelst

Alexander Wolf 05. Juli 2016 18

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?

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

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

18 Kommentare

  • 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
  • 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
  • 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ß
  • 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
  • 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!
  • Hallo Bernhard,

    vielen Dank für dein nettes Feedback :)

    Gruß
    Alexander
  • Echt super geklappt, danke!
  • 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
  • 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?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Logo Größe anpassen mit Less für Shopware 5
Plugin Theme anpassen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Theme: Eigenes Listing Layout erstellen
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Staging Umgebung – Was ist das und warum brauchst du eine?
© 2017 by 8mylez. Powered by Goltfisch GmbH.