Das Shopware Design ist zwar an sich schon sehr ausgereift und schlicht gesagt „schön“ doch bei so einem umfangreichen System kann man natürlich immer ein paar Ecken finden die man verbessern oder einfach seinem Geschmack nach anpassen kann. Dieser Beitrag wird von Zeit zu Zeit aktualisiert und um weitere Anpassungen erweitert.

1. Shopware Template anpassen / ändern – Header

2. Shopware Template anpassen / ändern – Content Bereich

3. Shopware Template anpassen / ändern – Artikel Seiten

4. Weiterführende Links

1. Shopware Shopware Template anpassen – Header

1.1 Shopware Template ändern – Header – Warenkorb-Logo

Die usprüngliche Bilddatei des Warenkorb Logos im Shopware Header hat den Namen ico_basket.png und befindet sich in folgendem Ordner (Am Beispiel des Templates Emotion Green):
/templates/emotion_green/frontend/_resources/images/icons
Wer sich diese Datei einmal genauer anschaut wird feststellen, dass das Bild einen weißen Hintergrund hat. Somit kann es Probleme geben, wenn man den Header der Webseite farblich anpassen möchte. Für diesen Zweck kann es nützlich sein, das selbe Bild mit trasnparentem Hintergrund zur Hand zu haben um es gegen das Shopware eigene Original Bild auszutauschen.

Shopware Warenkorb Logo

Shopware Warenkorb Logo

Ihr könnt dieses von mir erstellte Icon gerne verwenden, ich würde mich freuen wenn ihr als Dankeschön diesen Beitrag über Twitter oder Facebook oder Google+ teilt.

1.2 Shopware Template ändern – Header – Währungs Links

Wer die Farbe seiner Währungs Links im Shopware Header anpassen möchte muss in der dazugehörigen CSS Datei bei:

#topbar input

die gewünschte Farbe zuweisen. Die Farbe der aktiven Währung muss außerdem bei:

#topbar input.active

angepasst werden.

In der CSS Datei des Templates werden folgende Zeilen hinzugefügt:

#topbar input {
color: #FFFFFF !important;
}

Der aktive Link und der Hover Link hingegen werden in schwarz angezeigt:

#topbar input.active {
color: #000000 !important;
}

#topbar input:hover {
color: #000000 !important;
}

1.3 Shopware Template ändern – Header – Service Box Links

Die Service Links im Shopware Header befinden sich rechts oben und bestehen aus den folgenden 3 Links: 1. Mein Konto 2. Merkzettel 3. Mein Konto / Hilfe. Um diese Links farblich anzupassen kann man folgende Codes in der CSS Datei verwenden:

/* Header - Links - Mein Konto */
.my_options a.account {
color: #FFFFFF;
border-right: none;
}

/* Header - Links - Mein Konto, HOVER */
.my_options a.account:hover {
color: #000000 !important;
}

/* Header - Links - Merkzettel */
.my_options a.note {
color: #FFFFFF;
border-right: none;
}

/* Header - Links - Merkzettel, HOVER */
.my_options a.note:hover {
color: #000000 !important;
}

/* Header - Links - Service */
.my_options .service {
color: #FFFFFF;
border-right: none;
}

/* Header - Links - Service, HOVER */
.my_options .service:hover {
color: #000000 !important;
}

/* Header - Links - Service, HOVER SPAN (INNEN) */
.my_options .service span:hover {
color: #000000 !important;
}

1.4 Shopware Template ändern – Header – Service Box Rahmen und Schatten

Um den Service Box Rahmen und  Schatten zu entfernen, so dass nur noch die Textlinks sichtbar sind können Sie folgenden Codeschnipsel verwenden:

.my_options {
border: medium none;
box-shadow: none;
width: auto;
}

Falls Sie den Rahmen entfernen macht es auch Sinn eventuelle rechte oder linke Rahmen der Einzelnen Servicebox Links zu entfernen:

/* Header - Links - Mein Konto - Rahmen auf der rechten Seite entfernt + Schrift */
.my_options a.account {
border-right: medium none;
color: #FFFFFF;
}

/* Header - Service Box - Währungsbereich - Rahmen links entfernt */
#topbar {
border:none;
}

1.5 Shopware Template ändern – Header – Suchformular in die Navi kopieren

Als erstes sollten Sie in der index.tpl Datei folgendermaßen das Suchfeld im Header ausblenden, damit Sie es später nicht doppelt haben – wenn Sie noch keine weiteren Änderungen vorgenommen haben sollte ihre index.tpl so aussehen:


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

{* Hier wird das Suchfeld im Header rausgenommen *}
{block name='frontend_index_search'}
{/block}

im nächsten Schritt muss die Datei categories_top.tpl aus dem _emotion Ordner ins eigene Template kopiert und folgendermaßen angepasst werden:


<div id="mainNavigation">
<ul>
<li class="{if $sCategoryCurrent eq $sCategoryStart} active{/if}">
<a href="{url controller='index'}" title="{s name='IndexLinkHome'}{/s}" class="first{if $sCategoryCurrent eq $sCategoryStart} active{/if}">
{se name='IndexLinkHome'}Home{/se}
</a>
</li>
{foreach from=$sMainCategories item=sCategory}
{if !$sCategory.hidetop}
<li {if $sCategory.flag} class="active"{/if}>
<a href="{$sCategory.link}" title="{$sCategory.description}" {if $sCategory.flag} class="active"{/if}>
<span>{$sCategory.description}</span>
</a>
</li>
{/if}
{/foreach}
</ul>
<div id="searchcontainer" class="grid_20">
<div class="inner_searchcontainer">
<form action="{url controller='search' fullPath=false}" method="get" id="searchform">
{block name="frontend_index_search_innerform"}{/block}
<input type="text" name="sSearch" id="searchfield" autocomplete="off" value="{s name="IndexSearchFieldValue"}Suche:{/s}" maxlength="30" />
<input type="submit" id="submit_search_btn" value="Suchen" />
</form>

{* Ajax loader *}
<div class="ajax_loader">&nbsp;</div>
</div>
</div>
</div>

zu guter letzt müssen folgende Zeilen in der CSS Datei ergänzt werden:


/* Position des Suchfelds anpassen */
div#searchcontainer {
background: none repeat scroll 0 0 transparent;
float: right;
left: 0;
margin: 0 13px 0 0;
position: relative;
top: 6px;
}

<h2>2. Shopware Template anpassen – Content Bereich</h2>
<a name="shopware-design-2-1-slider"></a>
<h3>2.1 Shopware Template ändern – Content Bereich – Slider</h3>
Am Shopware Slider kann man unterschiedlichste Anpassungen vornehmen, hier sollen nur ein paar genannt werden:

<strong>Textfarbe des Slider Counters bei aktiven Bildern anpassen:</strong>
Wenn Sie die Textfarve des Slider Counters bei den aktiven Bildern anpassen möchten müssen Sie folgendem Tag eine neue Farbe zuweisen:

.ajaxSlider .slide_navigation a.active {
color:#be0a30;
}

Shopware Design Anpassungen - Slider Counter Taxtfarbe

Shopware Design Anpassungen – Slider Counter Taxtfarbe

Dieser Code bewirkt nun also, dass die Zahl bei Bildern die gerade angezeigt werden in rot angezeigt werden.

2.2 Shopware Template ändern – Content Bereich – Artikel Listen Thumbnail Bildgröße

Um die Thumbnail Bildgröße in den Artikellisten anzupassen gehen Sie so vor. Gehen wir einmal davon aus, dass Sie (wie bei 115wear.com) die Thumbnail Bildgröße auf 250 x 350 Pixel anpassen wollen müssen Sie diese Thumbnailgröße zunächst im Medienmanager anlegen.

Gehen Sie als erstes in den Medienmanager und klicken Sie mit der rechten Maustaste auf Artikel – nun können Sie zu den Einstellungen der Artikelbild Thumbnails.

Thumbnail Bilder in Listen anpassen - Medien Manager

Thumbnail Bilder in Listen anpassen – Medien Manager

Einmal geklickt wird Ihnen das hier angezeigt:

Albumeinstellungen - Artikel

Albumeinstellungen – Artikel

Anfangs werden dort nur 6 Größen angezeigt werden, nämlich 0 – 5 Die Größen 6 (250×350), 7 (750×1050) und 8 (430×600) wurden von mir neu angelegt. Jeder Größe wird also eine Zahl zugeordnet. Die 3 angelegten Größen sind proportional zueinander und passen in die anderen Bilder wenn man sie vergrößert / verkleinert,

Und wo geben wir die jetzt ein? Hierfür müssen Sie in Ihrem Template im Ordner /frontend/listing/  zunächst die Datei box_article.tpl anlegen. Der Inhalt sieht so aus:

</pre>
{* Artikelbox des Emotion Templates erben *}
{extends file='parent:frontend/listing/box_article.tpl'}

{* Article picture *}
{block name='frontend_listing_box_article_picture'}
{if $sTemplate eq 'listing-3col' || $sTemplate eq 'listing-2col'}
{assign var=image value=$sArticle.image.src.3}
{else}
{assign var=image value=$sArticle.image.src.2}
{/if}
<a href="{$sArticle.linkDetails|rewrite:$sArticle.articleName}" title="{$sArticle.articleName}" class="artbox_thumb" {if isset($sArticle.image.src)}
style="background: url({$image}) no-repeat center center"{/if}>
{if !isset($sArticle.image.src)}<img src="{link file='frontend/_resources/images/no_picture.jpg'}" alt="{s name='ListingBoxNoPicture'}{/s}" />{/if}</a>
{/block}
<pre>

Wenn Sie noch kein eigenes Template erstellt haben, machen Sie sich hier schlau:
http://wiki.shopware.de/Thumbnailgroesse-von-Artikelbilder-aendern_detail_957.html

In Zeile 9 ist der Bildgröße der Schlüssel 2 zugewiesen und muss nun nur gegen die 6 ausgetauscht werden. Dann werden die Thumbnails in den Artikellisten in der vorher angelegten Größe 250×350 wie in diesem Beispiel angezeigt. Es ist zwar nur ein Bild aber den Rest kann man sich denken.

Thumbnail Bildgröße in Artikellisten anpassen

Thumbnail Bildgröße in Artikellisten anpassen

2.3 Shopware Template ändern – Content Bereich – Artikel Detail Bildergröße anpassen

Sie möchten die Bildergröße auf der Detailseite anpassen? Das geht so ähnlich wie bei Punkt 2.2 – In diesem Fall benötigen Sie 2 neue Dateien in Ihrem Template nämlich:

– /templates/emotion_ihrtemplatename/frontend/detail/images.tpl

– /templates/emotion_ihrtemplatename/frontend/detail/image.tpl

In unserem Beispiel laden wir als Vorschau Bild eine jpg Datei mit den Maßen 750×1050 Pixel hoch (Zahlencode 7).

Also das hier ist der Code den Sie sich in die images.tpl kopieren und dann anpassen können:

{* Main picture *}
<div id='img_1_{$sArticle.ordernumber}' class="displaynone">
{if $sArticle.image.src.1}
<a title="{$sArticle.articleName}" class="bundleImg" style="background-image: url({$sArticle.image.src.1});cursor:pointer"></a>
{else}
<a title="{$sArticle.articleName}" class="bundleImg" style="background-image: url(../../resource/images/no_picture.jpg);cursor:pointer"></a>
{/if}

{foreach from=$sArticle.images item=sArticleImage}
{if $sArticleImage.relations}
<div id="img_1_{$sArticleImage.relations}" class="displaynone">

{if $sArticleImage.src.1}
<a title="{$sArticle.articleName}" class="bundleImg" style="background-image: url({$sArticleImage.src.1});cursor:pointer"></a>
{else}
<a title="{$sArticle.articleName}" class="bundleImg" style="background-image: url(../../resource/images/no_picture.jpg);cursor:pointer"></a>
{/if}
</div>
{/if}
{/foreach}
</div>

{* Variant picture *}
{*if $sArticle.image.res.relations}
<div id="img{$sArticle.image.res.relations}" style="display:none">
<a href="{$sArticle.image.src.5}"  title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}" >
<img src="{$sArticle.image.src.4}" alt="{$sArticle.articleName}" border="0" title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}" /> </a>
</div>
{/if*}

{* Thumbnails *}
{if $sArticle.images}
<div class="space">&nbsp;</div>
<div class="thumb_box">
{if $sArticle.image.src.4}
<a href="{$sArticle.image.src.5}"
title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}"
style="background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sArticle.image.src.1});"
{if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
rev="{$sArticle.image.src.4}">
</a>
{/if}
{foreach from=$sArticle.images item=sArticleImage}
{if $sArticleImage.relations}

{* Main picture variant *}
<div id="img{$sArticleImage.relations}" class="displaynone">
<a rel="lightbox[{$sArticleImage.relations}]"
{if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
href="{$sArticleImage.src.5}"
title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}">
<img src="{$sArticleImage.src.4}" title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}" />
</a>
</div>

{* Thumbnail variant *}
<a id="thumb{$sArticleImage.relations}"
href="{$sArticleImage.src.5}"
title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}"
rev="{$sArticleImage.src.4}"
{if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
style="background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sArticleImage.src.1});">
</a>
{else}
<a href="{$sArticleImage.src.5}"
title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}"
rev="{$sArticleImage.src.4}"
{if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
style="background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sArticleImage.src.1});">
</a>
{/if}
{/foreach}
<div class="clear">&nbsp;</div>
</div>
<div class="clear">&nbsp;</div>
{/if}

Meine angepasste Version sieht folgendermaßen aus (der obere Teil ist identisch):

{* Thumbnails *}
{if $sArticle.images}
    <div class="space">&nbsp;</div>
    <div class="thumb_box">
        {* {if $sArticle.image.src.4}  Artikel-Bildgröße bei ausgewähltem Bild auf der Artikel-Detailseite - Standard: 4 bzw. 285x255 *}
        {if $sArticle.image.src.8} {* NEUE VERSION *}
            <a href="{$sArticle.image.src.5}" {* Zoom-Bildgröße auf der Artikel-Detailseite - Standard: 5 bzw. 720x600 *}
            title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}"
            style="background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sArticle.image.src.1});"
            {if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
            {* rev="{$sArticle.image.src.4}">   Artikel-Bildgröße bei ausgewähltem Bild auf der Artikel-Detailseite - Standard: 4 bzw. 285x255 *}
            rev="{$sArticle.image.src.8}"> {* NEUE VERSION *}
        </a>
        {/if}
        {foreach from=$sArticle.images item=sArticleImage}
            {if $sArticleImage.relations}
        
                {* Main picture variant *}
                <div id="img{$sArticleImage.relations}" class="displaynone">
                    <a rel="lightbox[{$sArticleImage.relations}]"
                       {if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
                       href="{$sArticleImage.src.5}" {* Zoom-Bildgröße auf der Artikel-Detailseite - Standard: 5 bzw. 720x600 *}
                       title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}">
                       {*<img src="{$sArticleImage.src.4}" title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}" />
                                    Artikel-Bildgröße bei ausgewähltem Bild auf der Artikel-Detailseite - Standard: 4 bzw. 285x255 *}
                                   <img src="{$sArticleImage.src.5}" title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}" />
                            </a>
                   </div>
            
                {* Thumbnail variant *}
                <a id="thumb{$sArticleImage.relations}"
                   href="{$sArticleImage.src.5}" {* Zoom-Bildgröße auf der Artikel-Detailseite - Standard: 5 bzw. 720x600 *}
                   title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}"
                   {*  rev="{$sArticleImage.src.4}"  Artikel-Bildgröße bei ausgewähltem Bild auf der Artikel-Detailseite - Standard: 4 bzw. 285x255 *}
                               rev="{$sArticleImage.src.8}" {* NEUE VERSION *}
                   {if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
                   style="background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sArticleImage.src.1});">
                </a>
            {else}
                 <a href="{$sArticleImage.src.5}" {* Zoom-Bildgröße auf der Artikel-Detailseite - Standard: 5 bzw. 720x600 *}
                    title="{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}"
                    {* rev="{$sArticleImage.src.4}"  Artikel-Bildgröße bei ausgewähltem Bild auf der Artikel-Detailseite - Standard: 4 bzw. 285x255 *}
                                rev="{$sArticleImage.src.8}"  {* NEUE VERSION *}
                    {if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
                    style="background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sArticleImage.src.1});">
                 </a>
            {/if}
        {/foreach}
        <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
{/if}

In der image.tpl tausche ich dann noch die 4 (285×255 Pixel)  gegen die neu angelegte 8 (430×600 Pixel) aus.

{block name="frontend_detail_image"}
{if $sArticle.image.src.8} {* War vorher 4  *}
{* Main picture *}
{block name='frontend_detail_image_main'}
{if $sArticle.image.res.relations}
<div id="img{$sArticle.image.res.relations}" style="display:none">
<a href="{$sArticle.image.src.5}"
title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}"
{if {config name=sUSEZOOMPLUS}}class="cloud-zoom-gallery"{/if}
rel="lightbox">

<img src="{$sArticle.image.src.8}" {* War vorher 4  *} alt="{$sArticle.articleName}" title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}" />
</a>
</div>
{/if}

<a id="zoom1" href="{$sArticle.image.src.5}" {* Das ist das Zoom Bild / LightBox Bild *} title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}" {if {config name=sUSEZOOMPLUS}}class="cloud-zoom"{/if} rel="lightbox[{$sArticle.ordernumber}]">
<img src="{$sArticle.image.src.8}" {* War vorher 4  *}  alt="{$sArticle.articleName}" title="{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}" />
</a>
{/block}

{* No picture available *}
{else}
{block name='frontend_detail_image_empty'}
<img src="{link file='frontend/_resources/images/no_picture.jpg'}" alt="{$sArticle.articleName}" />
{/block}
{/if}

{block name='frontend_detail_image_thumbs'}
{include file="frontend/detail/images.tpl"}
{/block}
{/block}

Das Ergebnis sieht in unserem Beispiel dann so aus:

Vergrößertes Artikelbild in Detailansicht

Vergrößertes Artikelbild in Detailansicht

Wenn Sie diese Größe festlegen, dann sollten Sie optimaler Weise ihre Bilder IMMER in diesem Format hochladen, also nicht mal hochkant und dann wieder im Breitformat.

Sollten Sie wie ich in in diesem Beispiel ihr Bild vergrößern, müssen Sie natürlich für diesen Zweck auch etwas Platz in Ihrer Artikel-Detailseite schaffen.

Wink mit dem Zaunpfahl:
/* Artikel Details – Merkzettel Links innen – schmaler gemacht */

#detail #detail_menu li {
width: 155px;
}

/* Artikel-Detailseite, Bewertungen und Merzettel Link-Box, schmaler */

#detail #detailbox #detailbox_middle {
margin: 0;
width: 162px;
}

So geht das also. War doch ganz einfach, oder?

P.S.: Solle ihre Webseite responsive sein, sollten Sie die Zoomansicht deaktivieren unter: Warenkorb / Artikeldetails. Andernfalls sprengen Sie das Design damit.

2.4 Shopware Template ändern – Content Bereich – Hintergrundbild

In der CSS Datei folgendes ergänzen / anpassen und dann im images Ordner eine Datei namens background hochladen:


/* Hintergrundbild einbinden */
body {
background: url("../images/background.jpg") repeat fixed;
}

4. Weiterführende Links

Offizielles Shopware Tutorial zur Template Erstellung