> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/erweiterungen/produkt-symbole.md).

# Produkt-Symbole (Hinweisbilder)

Mit den ThemeWare® **"Produkt-Symbolen"** zeigst du individuelle Symbole und Hinweisbilder wie Pflegesymbole (z.B. Waschsymbole), Siegel oder Zertifikate direkt auf der Produktseite an – unter den Produktbildern, in der Buybox, in der Beschreibung, im Eigenschaften-Tab oder in einem separaten Tab.

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FchLZstErWIwABc0g09DA%2Fextensions--symbole-galerie-preview.png?alt=media&amp;token=d45154c6-7ae5-4060-bd6c-bc08a987b8e5" alt=""><figcaption><p>Produkt-Symbole unter der Galerie</p></figcaption></figure>

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F7X2t7toodDP66wbeHKtE%2Fextensions--symbole-buybox-preview.png?alt=media&amp;token=cd23de7e-1df0-4d09-a3e7-037f2fd56ffa" alt=""><figcaption><p>Produkt-Symbole in der Buybox</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Die Produkt-Symbole werden angezeigt, wenn die Konfiguration "Produkt-Symbole anzeigen" aktiviert ist und für das Produkt mindestens ein Symbol hinterlegt wurde – über eine Eigenschaft mit Bild oder ein Zusatzfeld.
{% endhint %}

{% hint style="success" %}
**Anleitung**: Eine Schritt-für-Schritt-Anleitung findest du im ThemeWare® Wiki: [Pflegehinweise & Produkt-Symbole anzeigen](https://wiki.themeware.design/wissensdatenbank/anleitungen/produktseiten/pflegehinweise-produkt-symbole)
{% endhint %}

***

## Konfiguration

### **Theme-Konfiguration**

1. Wechsel in den Tab "**Produktseiten**"
2. Öffne den Bereich "**Produkt-Symbole**"
3. Wähle über die Konfiguration "**Produkt-Symbole anzeigen**" die gewünschte Position
4. Optional: Nutze die weiteren Konfigurationsmöglichkeiten
5. Speicher deine Änderungen nach der Bearbeitung

### **Inhalt: Eigenschaften mit Bild**

Für Symbole, die an mehreren Produkten genutzt werden (z.B. Pflegesymbole oder Siegel), nutzt du am besten Eigenschaften mit Bild:

1. Wechsel über die Hauptnavigation in die "**Eigenschaften**"-Verwaltung deines Shops ("Kataloge" => "Eigenschaften")
2. Wähle die gewünschte Eigenschaften-Gruppe aus
3. Stelle das Zusatzfeld "**Als Produkt-Symbol anzeigen**" auf "ja"
4. Hinterlege an den gewünschten Optionen der Gruppe jeweils ein Bild
5. Speicher deine Änderungen

Es werden nur Optionen mit Bild als Symbol angezeigt. Die Gruppe erscheint weiterhin wie gewohnt in der Eigenschaften-Tabelle.

### **Inhalt: Zusatzfelder im Produkt**

Für Symbole, die nur ein einzelnes Produkt betreffen, nutzt du die Zusatzfelder im jeweiligen Produkt:

1. Wechsel über die Hauptnavigation in die "**Produkt-Verwaltung**" deines Shops ("Kataloge" => "Produkte")
2. Wähle das gewünschte Produkt aus
3. Wechsel in den Tab "**Spezifikationen**"
4. Scrolle zum Abschnitt "**Zusatzfelder**"
5. Wähle das Zusatzfeld-Set deines Themes aus
6. Wähle über die Zusatzfelder "**→ Symbol 1**" bis "**→ Symbol 3**" die gewünschten Bilder aus und vergebe optional je einen Titel
7. Speicher deine Änderungen

{% hint style="info" %}
**Hinweis**: Die Symbole aus den Zusatzfeldern werden vor den Symbolen aus den Eigenschaften angezeigt. Die Eigenschaften-Symbole folgen der nativen Sortierung der Eigenschaften (Position der Gruppe und Sortierung ihrer Optionen).
{% endhint %}

{% hint style="success" %}
**Tipp**: Lade die Symbole als SVG oder PNG in deiner Wunschfarbe hoch – sie werden nicht eingefärbt.
{% endhint %}

### **Text: Zwischenüberschrift**

* Passe die Zwischenüberschrift über den folgenden Textbaustein an:
  * `twt.detail.symbols.title`

### **Text: Beschreibungstext**

* Passe den Beschreibungstext über den folgenden Textbaustein und/oder das Zusatzfeld "Produkt-Symbole (Text)" an – die Quelle wählst du über die Konfiguration "Beschreibungstext":
  * `twt.detail.symbols.text`

{% hint style="info" %}
**Hinweis**: Wie du Textbausteine bearbeitest erfährst du in folgender Anleitung: [Texte bearbeiten und übersetzen](https://wiki.themeware.design/wissensdatenbank/anleitungen/texte-bearbeiten-und-uebersetzen)
{% endhint %}

{% hint style="success" %}
**Tipp**: Wirkt sich eine Änderung nicht auf die Storefront aus, leere einfach einmal den Shopware Cache: [Shopware Cache leeren / aufwärmen](https://wiki.themeware.design/wissensdatenbank/anleitungen/sonstiges/shopware-cache-leeren)
{% endhint %}

***

## Optionen

* **Stil**
  * Lege fest, wie die Symbole dargestellt werden: "Icons (nebeneinander)", "Icon mit Text" oder "Icon-Liste". "Standard (empfohlen)" wählt automatisch die passende Darstellung je Position.
* **Größe**
  * Lege die Höhe der Symbole in Pixeln fest. Die Breite ergibt sich aus dem jeweiligen Bild – das Seitenverhältnis bleibt erhalten, egal ob du quadratische, hoch- oder querformatige Bilder hochlädst. Im Stil "Icon-Liste" erhalten die Icons eine feste quadratische Spalte in dieser Größe, damit die Titel linksbündig fluchten.
* **Zwischenüberschrift anzeigen**
  * Lege fest, ob über den Symbolen eine Zwischenüberschrift angezeigt wird (Galerie, Buybox und Beschreibung – im separaten Tab greift stattdessen die Tab-Überschrift).
* **Beschreibungstext**
  * Lege fest, woher der Beschreibungstext über den Symbolen kommt: Textbaustein, Zusatzfeld oder beides – oder blende ihn ganz aus.

***

## Zusatzfelder

{% content-ref url="/pages/CdLnDfxihsaoXq1BXQLd" %}
[Symbole](/zusatzfunktionen/zusatzfelder/produkte/symbole.md)
{% endcontent-ref %}

{% content-ref url="/pages/GVRSXf2pynnUm3sNxcEH" %}
[Eigenschaften](/zusatzfunktionen/zusatzfelder/eigenschaften.md)
{% endcontent-ref %}

***

## Zusammenfassung

#### Theme-Konfiguration

* Tab "Produktseiten" => Bereich "Produkt-Symbole" => Produkt-Symbole anzeigen
* Tab "Produktseiten" => Bereich "Produkt-Symbole" => Abschnitt "Basiskonfiguration" => Stil / Größe / Zwischenüberschrift anzeigen / Beschreibungstext

#### Textbausteine

* `twt.detail.symbols.title` (Zwischenüberschrift)
* `twt.detail.symbols.text` (Beschreibungstext)

#### Zusatzfelder

* [Als Produkt-Symbol anzeigen](/zusatzfunktionen/zusatzfelder/eigenschaften/als-produkt-symbol-anzeigen.md) (Eigenschaften-Gruppe)
* [Symbol 1-3](/zusatzfunktionen/zusatzfelder/produkte/symbole/symbol-1-3.md)
* [Symbol 1-3 – Titel](/zusatzfunktionen/zusatzfelder/produkte/symbole/symbol-1-3-titel.md)
* [Produkt-Symbole (Text)](/zusatzfunktionen/zusatzfelder/produkte/symbole/produkt-symbole-text.md)

***

## Weiterführende Informationen

Möchtest du die Produkt-Symbole in einem separaten Tab anzeigen lassen, nutze einfach den ThemeWare® Symbole-Tab:

{% content-ref url="/pages/ERa4KdZuECDI2hQqPjg7" %}
[Symbole-Tab](/zusatzfunktionen/erweiterungen/tabs-auf-produktseiten/symbole-tab.md)
{% endcontent-ref %}
