# Kategorien durch Bilder/Grafiken ersetzen

**URL:** <https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428>\
**Category:** Allgemein\
**Created:** [12. März 2017 um 19:45 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428 "2017-03-12T19:45:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [12. März 2017 um 19:45 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/1 "2017-03-12T19:45:11Z")

</div>

Hallo,

ich habe in meinem Shop versucht, die Kategorien durch Bilder/Grafiken zu ersetzen, um es ansprechender zu gestalten und um die Logos der Firmen ausdrucksstark benutzen zu können.

Dabei habe ich im Backend im Bereich Kategorien Folgendes eingetragen:&nbsp;\< img src=Link title=Name alt=Name\> Wenn man nun mit der Maus über die Kategorie, also das Bild bzw. die Grafik fährt, wird eben auch dieser lange&nbsp;\< img src=Link title=Name alt=Name\> Ausdruck angezeigt. Gibt es diesbezüglich eine sauberere oder alternative Lösung?

Vielen Dank im Voraus.

---

<div class="post-metadata">

**Author:** ![benjaminbergau](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benjaminbergau](https://forum.shopware.com/u/benjaminbergau)\
**Post date:** [12. März 2017 um 20:14 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/2 "2017-03-12T20:14:27Z")

</div>

Hallo 🙂

Ich würde das über die Freitextfelder empfehlen. Den IMG Tag würde ich bzgl. des SEO nicht in den Titel eintragen um dort ein Bild rauszubekommen.

&nbsp;

Also Freitextfeld definieren und dann in deinem Custom Theme in der Navigationsdatei statt dem Wort den Verweis auf die Grafik setzen, welche du über das Freitextfeld definiert hast.

&nbsp;

Liebe Grüße aus Dresden von der&nbsp;kinderDerZeit - kreativagentur

Benjamin

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [13. März 2017 um 06:24 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/3 "2017-03-13T06:24:00Z")

</div>

Vielen Dank erstmal für deinen Hinweis. Leider habe ich bislang noch nicht mit den Freitextfeldern gearbeitet. Ich habe mir gerade das Shopware Tutorial und den Bereich im Backend angeschaut, bin aber leider noch nicht sicher, wie ich genau vorgehen muss. Vielleicht könntest du mir diesbezüglich noch ein paar Tipps geben.

Viele Grüße. 🙂

---

<div class="post-metadata">

**Author:** ![benjaminbergau](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benjaminbergau](https://forum.shopware.com/u/benjaminbergau)\
**Post date:** [13. März 2017 um 06:32 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/4 "2017-03-13T06:32:43Z")

</div>

Schick mal bitte einen Link zu deinem Shop.&nbsp;

Hast du ein neues Theme abgeleitet, ein Custom installiert oder nutzt du das Standard &nbsp;Responsiv?

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [13. März 2017 um 06:40 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/5 "2017-03-13T06:40:44Z")

</div>

> **[SmartStylez Fitness Fashion](https://www.smartstylez.de)**
>
> SmartStylez bietet Fitnessmode der Marken Labellamafia und Oxyfit! ✓ Leggings online bestellen! ✓ Versandkostenfrei nach Deutschland! ✓

Standard Responsive

Danke 🙂

---

<div class="post-metadata">

**Author:** ![benjaminbergau](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benjaminbergau](https://forum.shopware.com/u/benjaminbergau)\
**Post date:** [13. März 2017 um 07:00 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/6 "2017-03-13T07:00:00Z")

</div>

Ok, du hast ja einiges angepasst.

Allgemeiner Hinweis, wenn du direkt im Responsiv Theme Sachen veränderst&nbsp;und vorher nicht über ein eigenes Theme abgeleitet hast kann es sein, dass nach einem Update deine Sachen einfach weg sind, weil Shopware die Grunddateien bei einem Update einfach ersetzt.

Daher bitte vorher unbedingt über Einstellungen -\> Theme Manager ein neues Theme erstellen.

Zum Thema Freitextfelder gehe ich jetzt mal nicht ein, weil es dazu ja sehr viele und gute Tutorials gibt.

Nachdem du dein Theme abgeleitet hast gehst du über deinen FTP in folgende Ordnerstruktur:

themes -\> Frontend -\> DeinCustomTheme -\> index -\> der Ordner muss bei dir jetzt leer sein, daher legst du bitte die Datei main-navigation.tpl an.

In die .tpl bitte folgenden Inhalt eintragen:

```
{extends file="parent:frontend/index/main-navigation.tpl"}

{block name='frontend_index_navigation_categories_top_link'}
  

    

  
{/block}

```

&nbsp;

Wir haben uns hier an einem SMARTY Block bedient und den Bereich, wo der Kategoriename ausgegeben wird einfach überschrieben.

&nbsp;

Anschließend noch dein Theme neu kompilieren und dann hast du deine Bilder/Grafiken oben 🙂

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [13. März 2017 um 15:44 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/7 "2017-03-13T15:44:51Z")

</div>

Vielen Dank für die ausführliche Hilfe.

Was mir noch nicht ganz klar ist:

1. In der Ordnerstruktur des neu angelegten Themes fehlt bei mir der Ordner index (themes -\> Frontend -\> DeinCustomTheme -\> index -\>). Muss ich diesen manuell anlegen?

2. Muss ich für jedes Kategoriebild ein eigenes Freitextfeld anlegen?

Viele Grüße

---

<div class="post-metadata">

**Author:** ![benjaminbergau](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benjaminbergau](https://forum.shopware.com/u/benjaminbergau)\
**Post date:** [13. März 2017 um 16:00 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/8 "2017-03-13T16:00:30Z")

</div>

Zum Punkt 1: Nein, die legt er automatisch an. Bitte mal nach der Erstellung den Cache komplett leeren und in deinem FTP Browser auf “Ansicht aktualisieren” klicken.

Zum Punkt 2: Du legt für die Kategorie XY ein Media Freitextfeld an. Dieses Freitextfeld ist dann auch für Kategorie AB und Kategorie EF automatisch angelegt. Du musst dann nur je Kategorie ein Bild auswählen. In dem Snippet was ich dir geschickt haben ist außen rum eine FOREACH Schleife, weshalb du das dort einmal defnierst und dann für alle Kategorien (Außer Home) definiert wird. Home hat einen separaten Block

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [13. März 2017 um 16:10 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/9 "2017-03-13T16:10:24Z")

</div>

So erstmal zu Punkt 1:

Weder der Ordner Bare / Responsive / SmartStylez enthält einen Ordner index…oder bin ich da auf dem ganz falschen Dampfer?&nbsp; ![Gasp](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/gasp.png "Gasp")

---

<div class="post-metadata">

**Author:** ![rpatzel](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@rpatzel](https://forum.shopware.com/u/rpatzel)\
**Post date:** [13. März 2017 um 16:22 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/10 "2017-03-13T16:22:28Z")

</div>

Unter dem Ordner kommt zunächst nochmals der Ordner “Frontend” und darunter liegen alle weiteren, auch index.

---

<div class="post-metadata">

**Author:** ![benjaminbergau](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benjaminbergau](https://forum.shopware.com/u/benjaminbergau)\
**Post date:** [13. März 2017 um 16:27 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/11 "2017-03-13T16:27:24Z")

</div>

My fault&nbsp; ![Grin](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/70033cde8e8ff79cfa538293ae71318d6f788423.png "Grin")

---

<div class="post-metadata">

**Author:** ![rpatzel](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@rpatzel](https://forum.shopware.com/u/rpatzel)\
**Post date:** [13. März 2017 um 16:29 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/12 "2017-03-13T16:29:30Z")

</div>

Was mich noch interessieren würde (habe mir eben den Shop angesehen) und wie vom Vorredner schon erwähnt - da ist ja einiges verändert.  
Und das alles ohne eigenes Template? Auf welcher Version bist du aktuell bzw. wann war das letzte Update?  
Ohne eigenes Template, in welchem idealerweise NUR die Änderungen zum abgeleiteten Theme sind, ist das tödlich.  
Du solltest dich ganz dringend mit der Doku bzgl. eigenem Template , append, extend usw. beschäftigen.

---

<div class="post-metadata">

**Author:** ![rpatzel](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@rpatzel](https://forum.shopware.com/u/rpatzel)\
**Post date:** [13. März 2017 um 16:31 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/13 "2017-03-13T16:31:36Z")

</div>

> [@benjaminbergau schrieb:](https://forum.shopware.com/profile/24715/benjaminbergau "benjaminbergau")
> 
> My fault&nbsp; ![Grin](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/grin.png "Grin")

Kein eigenes Template zu haben ist schlimmer 😉

---

<div class="post-metadata">

**Author:** ![benjaminbergau](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benjaminbergau](https://forum.shopware.com/u/benjaminbergau)\
**Post date:** [13. März 2017 um 16:35 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/14 "2017-03-13T16:35:15Z")

</div>

> [@rpatzel schrieb:](https://forum.shopware.com/profile/3430/rpatzel "rpatzel")
> 
> > [@benjaminbergau schrieb:](https://forum.shopware.com/profile/24715/benjaminbergau "benjaminbergau")
> > 
> > My fault&nbsp; ![Grin](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/grin.png "Grin")
> 
> Kein eigenes Template zu haben ist schlimmer 😉

Ja, hatte ich ja oben schon erwähnt. Aber in meiner Ableitung wurde an das frontend gedacht. Aber @SmartStylez: du solltest dir wirklich die Doku anschauen. Sonst ist der Frust beim Update groß&nbsp; ![Foot-in-Mouth](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/foot-in-mouth.png "Foot-in-Mouth")

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [13. März 2017 um 17:02 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/15 "2017-03-13T17:02:16Z")

</div>

Also das mit dem index Ordner hat so tatsächlich hingehauen unter frontend, nur im Responsive ist der nicht, aber das ist ja jetzt auch egal. 😉

Ich nutze die neueste Shopware Version, da wir aber auch noch nicht allzu lange dabei sind, bin ich ja jetzt froh, dass ihr mich darauf hingewiesen habt! 🙂

Jetzt muss ich das nur noch mit dem Media-Freitextfeld hinbekommen!&nbsp; ![Wearing-Sunglasses](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/wearing-sunglasses.png "Wearing-Sunglasses")

---

<div class="post-metadata">

**Author:** ![benjaminbergau](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benjaminbergau](https://forum.shopware.com/u/benjaminbergau)\
**Post date:** [13. März 2017 um 17:06 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/16 "2017-03-13T17:06:51Z")

</div>

Dass die Datei nicht im Responsive Order ist, ist klar.

Bitte unbedingt die Doku anschauen.

Als kleine Übersicht. Das Bare ist das Fundament von Shopware -\> Responsive ist eine Ableitung (Vererbung) des Bare Themes und beinhaltet lediglich LESS und JS um das ganze hübsch aussehen zu lassen.

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [13. März 2017 um 17:15 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/17 "2017-03-13T17:15:46Z")

</div>

Okay, danke für eure geniale Hilfe! 🙂

Wegen den Freitexfeldern melde ich mich spätestens morgen nochmal…mit positivem oder negativem Ergebnis! 😉

---

<div class="post-metadata">

**Author:** ![rpatzel](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@rpatzel](https://forum.shopware.com/u/rpatzel)\
**Post date:** [13. März 2017 um 17:54 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/18 "2017-03-13T17:54:42Z")

</div>

> [@SmartStylez schrieb:](https://forum.shopware.com/profile/25994/SmartStylez "SmartStylez")
> 
> Also das mit dem index Ordner hat so tatsächlich hingehauen unter frontend, nur im Responsive ist der nicht…
> 
> …da wir aber auch noch nicht allzu lange dabei sind, bin ich ja jetzt froh, dass ihr mich daruaf hingewiesen habt!

Nee, aber sicher unter Bare…  
„nicht lange dabei“ hat nichts zu bedeuten, die bisher getane Arbeit scheint mir aber nicht unerheblich und das heißt es jetzt updatesicher aufzubauen.  
Nur ein kleines Beispiel&nbsp; - die confirm.tpl unter checkout - wir wollten dort das Feld und den Button „Artikel hinzufügen“ nicht:

Die tpl im Bare hat aktuell exakt 711 Zeilen. Was wir ändern wollen, finden wir ab Zeile 610-626:

```
{* Additional feature - Add product using the sku *}
                                {block name="frontend_checkout_confirm_additional_features_add_product"}
                                    
                                        

                                            {block name='frontend_checkout_confirm_add_product_field'}
                                                
                                            {/block}

                                            {block name='frontend_checkout_confirm_add_product_button'}
                                                
                                                    
                                                
                                            {/block}
                                        
                                    
                                {/block}

```

&nbsp;

Mit Hilfe einer neuen confirm.tpl und folgendem Code im Ordner checkout im eigenen Template geht das ganz einfach:

&nbsp;

{extends file=„parent:frontend/checkout/confirm.tpl“}

```
{extends file="parent:frontend/checkout/confirm.tpl"}

{* Additional feature - Add product löschen *}
{block name="frontend_checkout_confirm_additional_features_add_product"}
{/block}

```

Der komplette Block für Feld und Button wird damit quasi geleert und ausgeblendet, alles andere aus der tpl im Bare bleibt unberührt.

Grüße  
Ralph

Ps: Wenn ich jetzt noch wüßte, wie man Schnippsel aus den Template-Dateien hier ordentlich postet 😉

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [13. März 2017 um 21:40 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/19 "2017-03-13T21:40:32Z")

</div>

So, das Anlegen und Bearbeiten der Freitextfelder ist ja wirklich kein Problem, wenn man sich damit beschäftigt. Auch das Anlegen und Bearbeiten des individuellen Themes klappt soweit gut.

Ich komme nur noch nicht an folgender Stelle weiter:

\< img src=“HIER-BITTE-DEN-VERWEIS-AUF-DEIN-FREITEXTFELD-ANGEBEN.-SOLLTE-DEN-MEDIA-PATH-AUSGEBEN”

Wie muss der Verweis aussehen bzw. aufgebaut sein (bei mir erscheint immer nur ein x, weil der Aufbau fehlerhaft zu sein scheint)?

Vielen Dank schonmal.

---

<div class="post-metadata">

**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\
**Post date:** [14. März 2017 um 11:03 UTC](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428/20 "2017-03-14T11:03:19Z")

</div>

Ich weiß nicht, woran es liegen kann, aber ist diese Variable die falsche?&nbsp;

$s\_categories\_attributes.attribute1

Es wird einfach kein Wert ausgegeben.

[Nächste Seite](https://forum.shopware.com/t/kategorien-durch-bilder-grafiken-ersetzen/44428.md?page=2)
