Im 3. Teil unserer Shopware 5 Beitragsreihe zeigen wir euch wie man ein eigenes Shopware 5 Theme anlegt und Anpassungen am Shopware 5 Design vornimmt.

Hier vorab zwei wichtige Tipps, die man gar nicht oft genug nennen kann:
– Ihr habt eine LESS Datei angepasst, aber seht keine Änderung? -> Kompiliert euer Theme!
– Ihr habt das Tehme kompiliert aber es tut sich trotzdem nichts? -> Löscht den Cache!!

1. Shopware 5 Theme erstellen:

  • 1.1 Theme Manager
  • 1.2 Vorschaubild

2. Shopware 5 Theme anpassen – Header

  • 2.1 Header – Cookie Plugin
  • 2.2 Header – Navi-Links

3. Shopware 5 Theme anpassen – Produkt-Detailseite

  • 3.1 Produkt-Detailseite – Artikelnummer Anzeige anpassen
  • 3.2 Produkt-Detailseite – Staffelpreis Anzeige anpassen
  • 3.3 Produkt-Detailseite – Ähnliche Artikel ausblenden
  • 3.4 Produkt-Detailseite – Anführungsstriche in Beschreibung entfernen

4. Shopware 5 Theme anpassen – Kategorie-Listen

  • 4.1 Kategorie-Listen – Artikelnummern abkürzen
  • 4.2 Kategorie-Listen – Eigenes Produktlayout
  • 4.3 Kategorie-Listen – Artikelnummern in Listen anzeigen

5. Shopware 5 Theme anpassen – Sidebar

  • 5.1 Sidebar – Rahmenfarbe anpassen
  • 5.2 Sidebar – Aktive Kategorie Links bearbeiten
  • 5.3 Sidebar – Paypal Feld anpassen

6. Shopware 5 Theme anpassen – Footer

  • 6.1 Footer – Newsletter Spalte entfernen

 

1.1 Shopware 5 Theme erstellen – Theme Manager

Gehen Sie in den Bereich: Einstellungen > Theme Manager und klicken Sie dann auf Theme erstellen.

Shopware 5 Konfiguration - Theme erstellen

Shopware 5 Konfiguration – Theme erstellen

Wählen Sie als Vorlage auf jeden Fall Responsive, wenn Sie nicht schon ein Diplom in Shopware-Wissenschaften besitzen. Wählen Sie zudem einen Namen, eine Beschreibung sowie Lizenz-Art. Ich empfehle: MIT.

Shopware 5 Konfiguration - Theme erstellen - Details

Shopware 5 Konfiguration – Theme erstellen – Details

Wer ganz sauber arbeiten möchte legt sein Theme lokal an, so werden nicht gleich alle möglichen leeren Unterordner mit angelegt.

 

1.2 Shopware 5 Theme erstellen – Vorschaubild

Wer mag kann noch die preview.png neu anlegen, damit es in der template Auswahl nicht so langweilig aussieht. Die Datei sollte direkt im obersten Verzeichnis des Themes abgelegt werden. Hier kommen die Maße: 133 x 98px.

2.1 Shopware 5 Theme anpassen – Header: Cookie Plugin

Wer bei der Installation von Shopware das Standard-Cookie-Plugin installiert hat, wird eventuell das Bedürfnis verspüren die Hintergrundfarbe anzupassen.

Hierfür können Sie so vorgehen: Legen Sie in Ihrem Theme die Datei „/themes/Frontend/ByouteaTheme/frontend/_public/src/css/byoutea.css“ an. Die Namen ByouteaTheme und byoutea.css sind Ihrem eigenen Theme entsprechend anzupassen.

Nun zum Inhalt:

 
/* HEADER - Cookie Bar - BG color */
.cookie-bar {
    background: #25beac !important;
}

Und hier das Ergebnis:

Shopware 5 - Theme anpassen - Header Cookie

Shopware 5 – Theme anpassen – Header – Cookie Hintergrundfarbe anpassen

2.2 Shopware 5 Theme anpassen – Header: Navi-Links

Wenn Sie die Navi-Links anpassen möchten, benötigen Sie in Ihrem childtheme die Datei /less/modules/main-navigation.less bearbeiten. So könnte man zum Beispiel die Top-Navi Links in ihrer Größe ein wenig verkleinern:

/* Header - Navi - Link-Textgröße */
.navigation-main .navigation--link {
    font-size: 15px;
}

3.1 Shopware 5 Theme anpassen – Produkt-Detailseite: Artikelnummer Anzeige anpassen

Wer, so wie ich gerade, das Bedürfnis hat den doch sehr riesigen Abstand zwischen dem Wort Artikelnummer und der eigentlichen Nummer zu verringern kann dies auf folgendem Wege erledigen: Zuerst einmal braicht ihr in eurem theme die Datei detail.less – die Datei muss im Ordner a/themes/Frontend/euertheme/frontend/_public/src/less/_modules abgelegt werden und dann noch in der modules.less eingetragen werden.

Der Inhalt der detail.less hingegen sollte so aussehen:

/* Abstand zwischen dem Wort ARTIKELNUMMER und der eigentlichen Nummer verringern */
.product--details .product--base-info .entry--label {
    width: auto;
}

Die Anmerkung könnt ihr natürlich auch weglassen, wenn ihr Platz sparen wollt. Auf jeden Fall wird dem Feld für das Wort Artikelnummer die Größe nun automatisch und schwer dynamisch zugewiesen. Vorher war die Breite starr auf 35% festgelegt. Woher ich das weiß? Ganz einfach: Ich bin bei der freiwilligen Feuerwehr und ein Arbeitskollege hatte eine Nutoka-Brot dabei.

Shopware 5 Theme erstellen - Produktdetails - Artikelnummer

Shopware 5 Theme erstellen – Produktdetails – Artikelnummer

In dem oberen Screenshot seht ihr wie es vorher war. Anstandshalber soll ein Screenshot der angepassten Version nicht fehlen. Zukünftige Shopware Superstars werfen auch 1-3 Blicke in den CSS Bereich.

Shopware 5 Theme erstellen - Produktdetails - Artikelnummer - nachher

Shopware 5 Theme erstellen – Produktdetails – Artikelnummer – nachher

 

3.2 Shopware 5 Theme anpassen – Produkt-Detailseite: Staffelpreisanzeige anpassen

Ein Kunde hatte zum Beispiel mal den Wunsch in den Staffelpreisen die Worte Stück und je ergänzen zu lassen. Hört sich erstmal komisch aber, aber dieses Screenshot erklärt sehr deutlich wo die beiden Worte eingesetzt wurden:

Staffelpreisanzeige anpassen

Staffelpreisanzeige anpassen

Um eine solche Anpassung vorzunehmen braucht ihr in eurem Theme die Datei: frontend/detail/block_price. Dort findet ihr die entsprechenden Stellen. Das Wort je kommt dann z.B. vor:

{$blockPrice.price|currency}

3.3 Produkt-Detailseite – Ähnliche Artikel ausblenden

Nicht jeder Shop Betreiber hat Lust auf die Cross-Selling Leiste wo unter anderem auch die ähnlichen Artikel angezeigt werden. Aus dem Backend kann man diese Funktion leider nicht deaktivieren. Daher gehören folgende Zeilen in eure global.less Datei eures childthemes:

/* Ähnliche Artikel ausblenden */
.tab-menu--cross-selling {
    display: none;
}

Dann solltet ihr das Theme kompilieren, falls der Cache aktiviert ist. Sonst sieht man keine Änderungen. Zumindest nicht im Regelfall.

Update vom 16.05.2017: Man kann die ähnlichen Artikel doch im Backend anpassen. Einfach mal bei den Einstellung „Cross-Selling“ eingeben und da die ANzahl der angezeigten Ähnlcihen Artikel auf 0 setzen…

4.1 Shopware 5 Theme anpassen – Kategorie-Listen: Artikelnamen abkürzen

Wenn ihr die Artikelnamen abkürzen wollt, könnt ihr dafür folgenden Code verwenden:

.product--box .product--title {
    height: 23px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

Was passiert da genau? Der Artikelname bekommt einen Höhe von 23px und kann damit schonmal nicht über 2 Zeilen gehen es sei denn die Schrift ist sehr winzig (macht das bitte nicht…). Alles was zu lang ist wird abgeschnitten und ans Ende werden 3 Punkte gesetzt. Wie viel vom Artikelnamen angezeigt wird, ist im Endeffekt davon abhängig wie breit die Artikelbox in euren Listen ist. Bei Artikeln mit kurzen Namen spielt das natürlich keine Rolle.

In welche Datei kommt der Code:
/themes/Frontend/euertheme/frontend/_public/src/less/_modules/product-box.less

Wie sieht das Ergebnis aus:

Shopware 5 - Design anpassen - Artikelnamen abkürzen

Shopware 5 – Design anpassen – Artikelnamen abkürzen

Und hier sieht man, wie die gleiche Liste aussieht wenn etwas mehr Platz vorhanden ist:

Shopware 5 - Design anpassen - Artikelnamen abkurzen

Shopware 5 – Design anpassen – Artikelnamen abkürzen

4.2 Shopware 5 Theme anpassen – Kategorie-Listen: Eigenes Produktlayout

Ursprünglich kann man im Kategorie Bereich des Backends 3 verschiedene Layouts für die Kategorie-Ansichten auswählen:

Shopware 5 - Theme anpassen - Kategorie-Layout

Shopware 5 – Theme anpassen – Kategorie-Layout

Wer eine zusätzliche option sucht kann sich mit ein paar Anpassungen der .less Dateien weiterhelfen. Das Ergebnis wird eine Mischung des Layouts „Großes BIld“ und „Nur wichtige Informationen“. Wenn man die Sidebar nutzt werden nur 2 große Bilder angezeigt. Verwendet man hingegen Nur wichtige Informationen werden gleich 4 Artikel nebeneinander angezeigt. Mit den unten beschriebenen Anpassungen erreichen wir, dass 3 Artikel angezeigt werden.

Das hier gehört im childtheme in den Ordner less/modules/product-box.less

/* PRODUCT BOX - FULL CONTAINER - less width to show more in 1 line */
.box--image {
    width: 33.33%;
}

Achtung: wenn die Datei neu angelegt wird muss sie auch in der modules.less aufgelistet werden! Um das Ergebnis zu sehen muss man bei der Kategorie Großes Bild wählen, da mit diesem Codeschnipsel die großen Bilder verkleinert werden. Die normale Version kann jetzt nicht mehr verwendet werden.

Nach ein paar Tests muss ich sagen: 3 Artikel in einer Reihe sehen in schmaleren Browsern semi-optimal aus. Es empfiehlt sich also die Anpassungen erst ab einer bestimmten Breite zu aktivieren. Ich habe es so gemacht, der Zweite Schnipsel ist um die Höhe der Bilder anzupassen, den braucht ihr nur, wenn ihr Bilder im Quer- statt Hochformat verwendet.

@media screen and (min-width: 68em) {
    /* PRODUCT BOX - FULL CONTAINER - less width to show more in 1 line */
    .box--image {
        width: 33.33%;
    }
    
    /* PRODUCT BOX - IMAGE HEIGHT, make smaller for widescreen pictures */
    .box--image .product--image {
        height: 180px;
    }
}

 

Denkt daran nach dem Upload den Cache zu löschen!! Denn sonst seht ihr die Änderung nicht und fragt euch warum!

4.3 Kategorie-Listen – Artikelnummern in Listen anzeigen

Um in den Shopware Kategorie-Listen die Artikelnummern anzuzeigen sind folgende Schritte notwendig:
a) Im Childtheme muss die Datei frontend/listing/product-box/box-basic.tpl angelegt werden.

ich kann jetzt viel erzählen aber ich poste gleich mal den Code:

{extends file='parent:frontend/listing/product-box/box-basic.tpl'} 
{block name='frontend_listing_box_article_info_container'} 
    <div class="product--info"> {* Product image *} 
        {block name='frontend_listing_box_article_picture'} 
            {include file="frontend/listing/product-box/product-image.tpl"}
        {/block} {* Customer rating for the product *} 

        {block name='frontend_listing_box_article_rating'} 
            <div class="product--rating-container"> 
                {if $sArticle.sVoteAverage.average} 
                    {include file='frontend/_includes/rating.tpl' points=$sArticle.sVoteAverage.average type="aggregated" label=false microData=false} 
                {/if} 
            </div> 
        {/block} 

        {* G2G - Anpassung: Artikelnummer in Artikelbox anzeigen *} 
        {if $sArticle.ordernumber} 
            {block name='frontend_detail_data_ordernumber'} 
                <div class="listing--dataid">
                    {se name="DetailDataId"}{/se}<span class="listing--ordernumber">{$sArticle.ordernumber}
                </div> 
            {/block} 
        {/if} 

        {* Product name *} 
        {block name='frontend_listing_box_article_name'}
            <a href="{$sArticle.linkDetails|rewrite:$sArticle.articleName}" class="product--title" title="{$sArticle.articleName|escape}"> {$sArticle.articleName|truncate:50} </a> 
        {/block} 

        {* Product description *} 
        {block name='frontend_listing_box_article_description'} 
            <div class="product--description"> 
                {$sArticle.description_long|strip_tags|truncate:240} 
            </div> 
        {/block} 

        {block name='frontend_listing_box_article_price_info'} 
            <div class="product--price-info"> 
                {* Product price - Unit price *} 
                {block name='frontend_listing_box_article_unit'} 
                    {include file="frontend/listing/product-box/product-price-unit.tpl"} 
                {/block} 

                {* Product price - Default and discount price *} 
                {block name='frontend_listing_box_article_price'} 
                    {include file="frontend/listing/product-box/product-price.tpl"} 
                {/block} </div> {/block} 

                {* Product actions - Compare product, more information, buy now *} 
                {block name='frontend_listing_box_article_actions'} 
                    {include file="frontend/listing/product-box/product-actions.tpl"} 
                {/block} </div> 
{/block}

So muss die Datei also aussehen. Als nächstes geht man dann zu den Textbausteinen und sucht nach DetailDataId. Ist es da, kann der entsprechende Titel eingegeben werden. Man muss aber darauf achten, dass es auch und die richtige Datei geht. Andernfalls könnt ihr den Textbaustein von hand nachtragen. Hier seht ihr 2 Einträge – der 1. war schon da und den 2. habe ich eingetragen. Jetzt wird der Inhalt anstelle der Variable angezeigt:

Shopware 5 Design anpassen - Artikelnummer in Listen

Shopware 5 Design anpassen – Artikelnummer in Listen

5.1 Sidebar – Rahmenfarbe anpassen

Um eure sidebar anzupassen benötigt ihr in eurem childtheme die Datei sidebar.less, die im Ordner: frontend/src/less/modules abgelegt werden und in der modules.less Datei registriert werden muss.

Sidebar Rahmenfarbe in der Desktop Ansicht anpassen:

 
.sidebar--navigation {
    border: 1px solid #b43f74;
}

5.2 Sidebar – Aktive Kategorie-Links anpassen

Die Inhalte kommen in die gleiche Datei wie beim letzten Punkt oben.

Aktive Oberkategorie, Hintergrund und Textfarbe anpassen

 
.sidebar--navigation .navigation--link.is--active {
    background: #b43f74 none repeat scroll 0 0;
    color: #fff;
}

Wichtig: Wenn ihr eine Hintergrundfarbe verwendet sollten die Abstände raus:

.sidebar--navigation .navigation--entry {
    margin: 0;
}

Aktive Oberkategorie größere Schrift:

 
.sidebar--navigation .navigation--link.is--active {
    background: #b43f74 none repeat scroll 0 0;
    color: #fff;
}

Aktive Unterkategorie-Links größer:

.sidebar--navigation ul.sidebar--navigation .navigation--entry {
    font-size: 0.97rem;
}

5.3 Sidebar – Aktive Kategorie-Links anpassen

Wenn ihr wie oben beschriben die Rahmenfarbe der Sidebar angepasst habt solltet ihr auch die Rahmenfarbe des Paypal Felds anpassen. Dafür könnt ihr diese Zeilen verwenden.

.paypal-sidebar {
    border-color: #b43f74;
}

6.1 Shopware 5 Theme anpassen – Footer: Newsletter Spalte entfernen

Sie haben keinen Lust einen Newsletter anzubieten oder wollen aus anderen Gründen die Newsletter Spalte im Footer Ihres Shops entfernen? Kein Problem mit 2, 3 Handgriffen ist das ganz erledigt. Zunächst einmal brauchen wir die Datei: /themes/Frontend/euertheme/frontend/index/footer-navigation.tpl die folgenden minimalen Inhalt benötigt:

{extends file='parent:frontend/index/footer-navigation.tpl'}
{block name="frontend_index_footer_column_newsletter"}
    
{/block}

Die erste Zeile registriert die Datei und sagt dem System dass die Original Datei mit dem Inhalt dieser Datei überschrieben werden soll. Der Rest zeigt die Box der Newsletter Spalte dessen Inhalt entfernt wurde.

Nun müssen die restlihen Spalten noch von 25% Breite auf 33.3 (PUNKT nicht Komma!) gebracht werden. Hierfür müssen wir die Datei unitize.less im Ordner: /themes/Frontend/euertheme/frontend/_public/src/less/_mixins/ angelegt werden. Zusätzlich müsst ihr sehr wahrscheinlich auch den Ordner _mixins nicht vergessen anzulegen und selbigen in der all.less Datei zu registrieren. Hierfür gebt ihr diese Zeile ein:

@import "_mixins";

Zu guter letzt müsst ihr noch eine mixins.less Datei anlegen und auf der Ebene der all.less Datei ablegen. Hier werden dann alle Dateien registriert, die im Ordner -mixins landen. Der Inhalt sollte so aussehen, wenn ihr noch keine andere Dateien außer der unitize.less darin gespeichert habt.

@import "_mixins/unitize";

So und jetzt kommen wir zu guter letzt auch noch zu dem Inhalt der besagten unitize.less Datei, der sieht nämlich so aus:

/* Footer Spalten auf 33% Breite erhöhen, da Newsletter ausgeblendet ist */
@media screen and (min-width: 48em) {
    .footer-main .footer--column {width: 33.3%}
}

 

P.S.: Es passiert nichts? Cache löschen!

to be continued… 😉

Weiterführende Links:
Icons für Shopware: https://8mylez.com/shopware-icon-set/
Font Awesome bei Shopware einbinden: https://8mylez.com/blog/eigene-font-awesome-icons/

 

Pin It on Pinterest

Share This