Kein-Bild-Bild ändern

Wenn ein Artikel kein Bild hat wird stattdessen ein Icon angezeigt. Dieses Icon ist keine Bilddatei sondern ein Zeichen aus dem Zeichen-Schritsatz Font Awesome.

Wenn kein Artikelbild vorhanden ist wird also zB auf der product.html des Templates html-Code erzeugt, der dieses Zeichen anzeigt.

Der erzeugt Code verwendet die css-Klasse no-image-icon. In der Datei Template.css des Templates legt die entsprechende css-Regel fest, dass ein bestimmtes Zeichen angezeigt wird.

Entweder sie kennen sich mit Less (hier im Handbuch beschrieben) aus oder verwenden folgende Ansätze:

1) Anderes Zeichen verwenden

Kopieren Sie folgende css-Regel in die Datei stylesheet.css Ihres Templates

.image .no-image .no-image-icon:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f03e";
    font-size: 500px;
    color: #e0e0e0;
}
.image .no-image .no-image-icon {
    padding: 0 0 0 0;
}

Der Wert für \f03e für content bestimmt, welches Zeichen angezeigt wird.

Verfügbare Zeichen finden Sie unter Font Awesome Icons

Sie können auch die Grösse, Farbe etc anpassen.
Die Regel padding: 0 0 0 0; entfernt das Polster oben und unten.

Vorteil dieser Lösung ist, dass Sie einfach zu verwenden ist und im gesamten Shop wirkt, also nicht nur auf der Artikelseite selbst sondern auch in den Kategorien

1a) Eigenes Bild per css einbinden

Sie könnnen für content auch eine Bild-Url angeben content: url(/media/images/info/noimage.gif);

2) HTML des Templates bearbeiten

In diesem Fall müssen Sie alle Dateien Ihres Templates in welchem Artikel-Bilder verwendet werden bearbeiten. Also die Artikelseite selbst, Kategorie-Listings, Boxen, Pages usw.

Suchen Sie nach no-image-icon und bearbeiten Sie das umliegende html Ihren Anforderungen entsprechend.