shopware agentur
TOP Tutorial

Der Header ist die „Fernbedienung“ Ihres Onlineshops

Alle konzentrieren sich auf Einkaufswelten, Customer Journey und Emotionen beim Onlineshopping. Dabei wird häufig die Wichtigkeit des Headers vernachlässigt oder gar vergessen. Bei der Shopware Standard Installation birgt der Header im „Responsive“ Theme (Design) folgende Elemente:

  • TopBar (Sprachwahl, Währungswahl, Vergleichsliste, Servicenavigation)
  • Container Header–Navigation (Logo, Suchefeld und Shopnavigation mit Merkliste, „Mein Konto“ und Warenkorb)
  • Navigation-Main (Die Hauptnavigation mit Homebutton, Artikelkategorien, Blogkategorien und externen Links) – sofern man diese noch als Header bezeichnen darf, denn technisch betrachtet liegen diese ja außerhalb des Headers.

Der Header ist somit die Hauptsteuerung Ihres Onlineshops. So stellt sich primär schon mal die Frage, ob es sinnvoll ist, dass diese beim nach unten Scrollen verschwinden darf bzw. soll. Ganz klar im Zuge des Checkouts sollte sie nicht verleiten zum Wegklicken. Mitunter bietet SW deshalb ja auch einen Minimalheader beim Checkoutprozess.

Dennoch lässt sich eine Shopware-Installation sehr häufig an dem eindeutigen Header erkennen. Dabei bedarf es nur ein paar Eingriffe in das Theme, um dem ganzen einen eigenen „Look n Feel“ zu verpassen.

Was kann getan werden?

ZB. wird gerade bei kleineren bzw. einfacheren Shops oft die Topbar gar nicht benötigt. Hierfür haben wir unser Video Tutorial geschaffen: https://www.youtube.com/watch?v=j2VZq9ZhL4I
Wem das zu mühsam ist, der darf gerne unser kostenloses Plugin im Shopware Store finden.

Des weiteren sollte meist das Logo etwas größer platziert werden.

Wer dann noch die Buttons mittels eigenem Theme und entsprechender LESS Datei individualisert, hat schon einen mächtigen Vorteil. Wer schon so weit ist, kann auch gleich die letzten Zeilen im folgenen Beispiel mitkopieren. 😉

.btn{
	display: 				inline-block;
	position: 				relative;
	
	-webkit-border-radius: 	8px;
	-moz-border-radius: 	8px;
	border-radius: 	8px;
  
  border-top: 		1px solid rgba(255,255,255,0.8);
	border-bottom: 		1px solid rgba(0,0,0,0.1);
	
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
	background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);

	-webkit-transition: background .2s ease-in-out;
	-moz-transition: 	background .2s ease-in-out;
	transition: 		background .2s ease-in-out;
	
/* Farbe */
	color: 				hsl(0, 0%, 40%) !important;
	background-color: 	hsl(0, 0%, 75%);
}
.btn.is--large{
height: auto;
}
.is--primary:hover{
color: #fff !important; 
}
btn .is--active{
color: #fff !important; 
}

/* Hintergrundfarbe des Headers */
.header-main,
.navigation-main,
.header-main .container,
.navigation-main .container{
background: #39434F;
}

Vielleicht noch die Positionierung des Suchefeldes überlegen und spätestens jetzt können Sie offensichtlich programmieren, wenn Sie die richtige Stelle in der index.tpl gefunden haben.

Wir stellen fest, dass guter e-Commerce nicht nur durch Marketing in den Einkaufswelten passiert, sondern auch mittels IT durch die Entwickler entsteht. 😉
Wer immer noch nicht weiß, was zu tun ist, darf uns gerne damit beauftragen, oder eben seinen Entwickler durch uns instruieren lassen.