> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/extensions/product-symbols.md).

# Product symbols

With the ThemeWare® **"Product symbols"** you display individual symbols and notice images such as care symbols (e.g. washing symbols), seals or certificates directly on the product page – below the product images, in the buy box, in the description, in the properties tab or in a separate tab.

<figure><img src="/files/DDxFpBUA10xBn2WDkNW3" alt=""><figcaption><p>Product symbols below the gallery</p></figcaption></figure>

<figure><img src="/files/VUuTZc9GFJarhgiPdjpA" alt=""><figcaption><p>Product symbols in the buybox</p></figcaption></figure>

{% hint style="info" %}
**Note**: The product symbols are displayed when the "Show product symbols" configuration is activated and at least one symbol has been maintained for the product – via a property with an image or a custom field.
{% endhint %}

{% hint style="success" %}
**Guide**: You can find a step-by-step guide in the ThemeWare® Wiki: [Showing care symbols & product symbols](https://knowledge.themeware.design/knowledge-base/tutorials/product-pages/care-symbols-product-symbols)
{% endhint %}

***

## Configuration

### **Theme configuration**

1. Switch to the tab "**Product pages**"
2. Open the block "**Product symbols**"
3. Select the desired position via the "**Show product symbols**" configuration
4. Optional: Use the further configuration options
5. Save your changes after editing

### **Content: Properties with an image**

For symbols that are used on several products (e.g. care symbols or seals), it is best to use properties with an image:

1. Switch via the main navigation to the "**Properties**" management of your shop ("Catalogues" => "Properties")
2. Choose the desired property group
3. Set the custom field "**Show as product symbol**" to "yes"
4. Assign an image to each of the desired options of the group
5. Save your changes

Only options with an image are displayed as a symbol. The group will still appear in the properties table as usual.

### **Content: Custom fields in the product**

For symbols that only concern a single product, use the custom fields in the respective product:

1. Switch via the main navigation to the "**Products**" management of your shop ("Catalogues" => "Products")
2. Choose the desired product
3. Switch to the tab "**Specifications**"
4. Scroll to the block "**Custom fields**"
5. Select the custom field set of your theme
6. Select the desired images via the custom fields "**→ Symbol 1**" to "**→ Symbol 3**" and optionally assign a title to each
7. Save your changes

{% hint style="info" %}
**Note**: The symbols from the custom fields are displayed before the symbols from the properties. The property symbols follow the native sorting of the properties (position of the group and sorting of its options).
{% endhint %}

{% hint style="success" %}
**Tip**: Upload the symbols as SVG or PNG in your desired colour – they are not recoloured.
{% endhint %}

### **Text: Subheadline**

* Adjust the subheadline via the following snippet:
  * `twt.detail.symbols.title`

### **Text: Description text**

* Adjust the description text via the following snippet and/or the "Product symbols (Text)" custom field – you select the source via the "Description text" configuration:
  * `twt.detail.symbols.text`

{% hint style="info" %}
**Note**: You can find out how to edit snippets in the following tutorial: [Edit and translate texts](https://wiki-en.themeware.design/knowledge-base/tutorials/edit-and-translate-texts)
{% endhint %}

{% hint style="success" %}
**Tip**: If a change does not affect the storefront, simply clear the Shopware cache: [Clearing / warming up the Shopware cache](https://wiki-en.themeware.design/knowledge-base/tutorials/miscellaneous/clearing-the-shopware-cache)
{% endhint %}

***

## Options

* **Style**
  * Specify how the symbols are displayed: "Icons (side by side)", "Icon with text" or "Icon list". "Standard (recommended)" automatically selects the appropriate style for each position.
* **Size**
  * Specify the height of the symbols in pixels. The width results from the respective image – the aspect ratio is preserved, regardless of whether you upload square, portrait or landscape images. In the "Icon list" style, the icons get a fixed square column of this size so that the titles align left.
* **Show subheadline**
  * Specify whether a subheadline is displayed above the symbols (image gallery, buy box and description – in the separate tab the tab headline is used instead).
* **Description text**
  * Specify where the description text above the symbols comes from: snippet, custom field or both – or hide it completely.

***

## Custom fields

{% content-ref url="/pages/Tv6NFPEqx7dSXxsejibV" %}
[Symbols](/additional-features/custom-fields/products/symbols.md)
{% endcontent-ref %}

{% content-ref url="/pages/nu79RzGIfcg9qqlNamNi" %}
[Properties](/additional-features/custom-fields/properties.md)
{% endcontent-ref %}

***

## Summary

#### Theme configuration

* Tab "Product pages" => Block "Product symbols" => Show product symbols
* Tab "Product pages" => Block "Product symbols" => Section "Basic configuration" => Style / Size / Show subheadline / Description text

#### Snippets

* `twt.detail.symbols.title` (subheadline)
* `twt.detail.symbols.text` (description text)

#### Custom fields

* [Show as product symbol](/additional-features/custom-fields/properties/show-as-product-symbol.md) (property group)
* [Symbol 1-3](/additional-features/custom-fields/products/symbols/symbol-1-3.md)
* [Symbol 1-3 – Title](/additional-features/custom-fields/products/symbols/symbol-1-3-title.md)
* [Product symbols (Text)](/additional-features/custom-fields/products/symbols/product-symbols-text.md)

***

## Further information

If you want to display the product symbols in a separate tab, simply use the ThemeWare® Symbols tab:

{% content-ref url="/pages/Mj7bjGA0tqAQrdySuOcv" %}
[Symbols tab](/additional-features/extensions/tabs-on-product-pages/symbols-tab.md)
{% endcontent-ref %}